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:
|The verb to display on the button. Can be either |
|The color scheme used by the plugin for any text outside of the button itself. Can be |
|The URL of the webpage that will be liked.|
|If your website or online service, or a portion of your service, is directed to children under 13 you must set this to |
|Selects one of the different layouts that are available for the plugin. Can be one of |
|A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details.|
|Specifies whether to include a share button beside the Like button, |
|The button is offered in 2 sizes i.e. |
|The width of the plugin (standard layout only), which is subject to the minimum and default width. Please see the Layout Settings table for more details.|