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.