The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.
The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the <fb:like> XFBML tag and requires you use the new JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook. The XFBML version also dynamically sizes its height; for example, if there are no profile pictures to display, the plugin will only be tall enough for the button itself.
If your web pages represent profiles of real-world things — things like movies, sports teams, celebrities, and restaurants, you can optionally use the Open Graph protocol to enable users to establish lasting connections to your pages. Your pages show up in more places on Facebook and you gain the ability to publish stream stories to connected users.
The Facebook documentation doesn’t really go into any detail about what the generated code means, so I took the default sample and hacked on it to figure out what each parameter affected and how to best customize it to our own particular needs.
If you look at the default code that the generator outputs, it looks like this:
iFrame code:
|
1 |
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fcrunchify.com&width&layout=standard&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe> |
XFBML code:
|
1 |
<fb:like href="https://crunchify.com" layout="standard" action="like" show_faces="true" share="true"></fb:like> |
So, in essence, the entire widget lives inside an iframe, whose content is generated entirely by Facebook’s servers. If you parse through and de-percent-encode the actual URL, you’ll find it makes an HTTP GET request to http://www.facebook.com/plugins/like.php with the following parameters:
- href = http://developers.facebook.com/
- layout = standard
- show-faces = true
- width = 450
- action = like
- font = arial
- colorscheme = light
Look familiar? Those are all the same options that you can set with Facebook’s generator, albeit expressed much more densely. layout can be standard or button_count, show-facesis a boolean that corresponds to the “show faces” checkbox, etc.
Get your Like Button here: http://developers.facebook.com/docs/reference/plugins/like
Would love to know what you think. Chime in and share it as a comment. Don’t forget to share this guide!