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.
Here is my simple guide on putting up a Like button on sites. There are two ways of putting up the Like button: through an iframe and through XFBML. Using an iframe is very straightforward you don’t need any other libraries, while XFBML expects us include Facebook’s JavaScript SDK on the page.
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:
<iframe
src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhttp://www.alychitech.com
&layout=button_count&show_faces=false&width=100&
action=like&font=arial&colorscheme=light&height=21"
scrolling="no"
frameborder="0"
style="border:none;
overflow:hidden;
width:100px;
height:21px;"
allowTransparency="true">
</iframe>
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 http%3A%2F%2Fhttp://www.alychitech.com.
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 ‘http://‘.
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:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
xmlns:og and xmlns:fb direct our page to use Open Graph Protocol and FBML, respectively, as references.
Next, we call the Facebook JavaScript SDK through the script tag. Unlike other JavaScript declarations where we enclose them inside the head tag, the Facebook JavaScript SDK is best called just right before the end body tag.
<script src="http://connect.facebook.net/en_US/all.js"></script> </body>
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:
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
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. fbAsyncInit is actually a function that calls FB.init() which initializes the FB JavaScript SDK. Here, we tell Facebook to render all XFBML tags that we parse.
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:
<fb:like href="http://www.alychitech.com" show_faces="true" width="450"></fb:like>
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.
Just in case your XFBML tags do not work or are not rendered properly, ensure that you are using the valid XFBML tags as enumerated on this Facebook documentation. Also, you can add additional JavaScript code to forcefully parse the XFBML tag, just like below:
// Suppose the XFBML tag is enclosed inside a div named 'fb_tags'
FB.XFBML.parse(document.getElementById('fb_tags'));
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!
