The Facebook Like button was the most popular among the social plugins on Facebook. Well, it used to be Facebook’s Share button, but when Facebook’s developers disparaged Share in favor of Like, developers have to update their code and implement the changes lest their applications and sites would be broken. So today, we will learn to to add an xfbml like button.
The Facebook Platform was the least (and worst) documented API, so they say, that Facebook Platform developers are sometimes at a loss at what to do next during the development process of a Facebook application. We are lucky that that landscape has changed in the past years as new versions of the platform were introduced.
After the Like button was beefed up, Facebook has released a useful documentation on its uses. But some developers are still struggling with how to correctly expand Like on sites and applications.
Using an iframe
Suppose you like AlyChi Designs and want your users to like it too on your website. You can add up an iframe code such as:
[crayon-5ba88d45ec8c8449698644/] You can adjust iframe’s attribute to your liking. What’s important is how you build up your link on the
src attribute. Here, you link to Facebook’s like.php page and put some extra query strings, the most important of which is the
href query string parameter where you add up the link you like. In the above example, we put in
It is also important to have a valid URL format, and one way of making your
src link valid is to URL-encode it. In the above example, ‘
http%3A%2F%2F‘ actually translates to ‘
There are three types of layout for the Like button.
button_count simply renders a button with a counter beside it.
standard renders a button with a sentence describing how many likes the link.
box_count renders a like button with a callout above it.
show_faces tells us whether we want thumbnail of profile pictures to appear when one hovers his mouse right after liking the link.
action renders the text we want to appear on the button, either ‘Like’ or ‘Recommend’.
colorscheme let us control how Facebook renders the button, either light or dark. The rest are pretty much self-explanatory.
Using XFBML for Like Button
One flexible and extensible way of setting up a Like button on a web page is through Facebook’s XFBML. There are a lot of resources already made available for XFBML that this article will no longer expound about it.
First, in order to tell our browsers that we are using a special set of XML codes named XFBML, we need to add additional parameters in our html tag:
xmlns:fb direct our page to use Open Graph Protocol and FBML, respectively, as references.
[crayon-5ba88d45ec8d7764107780/] This ensures that the rest of the page have been rendered properly before we render XFBML tags. If you want to load the SDK together with other elements we need to do it asynchronously and call our declarations right after calling the opening body tag:
[crayon-5ba88d45ec8da268946310/] Let’s dissect the above code. The div tag named ‘fb-root’ is a placeholder for the SDK which we will call later on in the code. Then we created a hook named
fbAsyncInit that will be called globally when the library is loaded.
Next, we declared an anonymous function that will be called automatically when the browser reaches this part of the page. The function’s purpose is to build a script tag and append it inside the div named ‘fb-root’, our placeholder.
Once you’re done with this process, you can use any XFBML tags inside your HTML document as if you are treating them like normal HTML tags. To add a Like button, you can have the following code:
[crayon-5ba88d45ec8de055357107/] The parameters of
fb:like are pretty much the same to the query string parameters. On the latter code, we use
href for our URL and we set
show_faces to true. You can modify this code a little bit to your liking.
[crayon-5ba88d45ec8e2285686242/] Facebook Platform can be somewhat overwhelming to those who have just started their feet on Facebook Platform development. But once you learn the ropes, it will be as easy as browsing Facebook itself!