Developing an Application for Facebook

Social Networking seems to be the latest buzz word on the internet these days. Facebook is just one of many Social Networking sites available on the web today. With this article, I will try to explain some of the behind-the-scenes technologies used with Facebook, and how to write an application that interface with Facebook.

If you have followed any of my articles, you will know by now that I always cover the theoretical elements first, before you do a sample application. So, don’t let me waste any more of your time.

Technologies Used

FBML

Facebook Markup Language (FBML) is an evolved subset of HTML with some elements added (which are specific to Facebook), and some elements removed.

Facebook tags

The following is a list of some of the Facebook tags found in FBML (as shown in the Facebook Developers Wiki):

fb:name Gets the name of the user specified
fb:grouplink Displays the specified group’s name linked to the group’s page
fb:user Forces enclosed content to be restrained to site privacy checks, based on the viewer of the information
fb:pronoun Renders a specific pronoun for a user. For example: You, they, he are / is doing something
fb:profile-pic Turns into an <img> tag of the specified user’s profile picture. The tag itself is treated like a standard img tag, so attributes valid for img are valid with fb:profile-pic as well
fb:is-in-network Displays content inside the tag only if the user is in a given network
fb:if-can-see Displays the enclosed content if the logged in user can see the specified what attribute of the specified user. For example: profile, friends, wall
fb:if-can-see-photo Displays the enclosed content only if the logged in user can see the photo specified
fb:if-is-app-user Displays the enclosed content only if the specified user has accepted the terms of service of the application
fb:if-is-friends-with-viewer Displays the enclosed content only if the specified user is friends with the logged-in user
fb:if-is-group-member Displays the enclosed content only if the specified user is a member of the specified group. For example: admin, member, officer
fb:if-is-user Only renders the content inside the tag if the viewer is one of the specified user(s)
fb:if-user-has-added-app Used to determine whether the user has added the application to their account
fb:wide Renders the content contained by the tag only if the profile box is in the wide column of the profile
fb:narrow Renders the content contained by the tag only if the profile box is in the narrow column of the profile
fb:profile-action Renders a link on the user’s profile under their photo (such as “View More photos of..”)
fb:user-table Renders a table, each cell of which contains a thumbnail and name for a particular user, similar to the Mutual Friends table on profile pages
fb:user-item Specifies the user to display in fb:user-table
fb:subtitle Defines the subtitle for the profile box. The enclosed content is interpreted purely as plain text. For example: “Displaying 20 Wall Posts”
fb:action Renders a link, usually for navigational purposes. Its appearance depends on its container.
fb:visible-to-owner Displays content inside only if the viewer of the profile matches the profile owner
fb:visible-to-user Only displays the content inside the tag if the viewer is the specified user
fb:visible-to-app-users Displays the enclosed content only if the viewer has granted full permissions to the application
fb:visible-to-added-app-users Displays the enclosed content only if the viewer has added the application to their account
fb:wall Emulates a wall environment
fb:wallpost Renders a wall-style post
fb:wallpost-action Displays a link at the bottom of a wall post

Valid HTML tags in FBML

The following list shows some of the most common HTML tags that are still valid (can be used with) FBML.

a i
abbr img
acronym input
address li
b ol
big option
blockquote p
br pre
caption s
center script
cite select
code small
dd span
div strike
dl strong
dt style
em sub
font sup
form table
h1 tbody
h2 td
h3 textarea
h4 th
h5 tr
h6 u
hr ul

More info about HTML tags can be found here.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read