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
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 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>
<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/likeWould love to know what you think. Chime in and share it as a comment. Don’t forget to share this guide!