The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user’s friends’ News Feed with a link back to your website.
When your Web page represents a real-world entity, things like movies, sports teams, celebrities, and restaurants, use the Open Graph protocol to specify information about the entity. If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content.
To get started, just use the configurator below to get code to add to your site.
Step 1 – Get Like Button Code
- (?)The URL to like. In XFBML, defaults to the current page.
- (?)determines the size and amount of social context next to the button
- Show Faces (?)Show profile pictures below the button.
- (?)the width of the plugin, in pixels
- (?)The verb to display in the button. Currently only 'like' and 'recommend' are supported.
- (?)the font of the plugin
- (?)The color scheme of the plugin.
href– the URL to like. The XFBML version defaults to the current page.
layout– there are three options.
standard– displays social text to the right of the button and friends’ profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
button_count– displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
box_count– displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
show_faces– specifies whether to display profile photos below the button (standard layout only)
width– the width of the Like button.
action– the verb to display on the button. Options: ‘like’, ‘recommend’
font– the font to display in the button. Options: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’
colorscheme– the color scheme for the like button. Options: ‘light’, ‘dark’
ref– a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
fb_ref– the ref parameter
fb_source– the stream type (‘home’, ‘profile’, ‘search’, ‘other’) in which the click occurred and the story type (‘oneline’ or ‘multiline’), concatenated with an underscore.
Step 2 – Get Open Graph Tags
- (?)The title of the entity.
- (?)The type of the entity.
- (?)The canonical, permanent URL of the page representing the entity.
- (?)The URL to an image that represents the entity.
- (?)A human-readable name for your site.
- (?)A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID.
Open Graph Tags
Open Graph tags are
<meta>tags that you add to the
<head>of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:<meta property="og:tag name" content="tag value"/>
If you use Open Graph tags, the following six are required:
og:title– The title of the entity.
og:type– The type of entity. You must select a type from the list of Open Graph types.
og:image– The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url– The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name– A human-readable name for your site, e.g., “IMDb”.
fb:app_id– A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation .
How do I know when a user clicks a Like button?
If you are using the XFBML version of the button, you can subscribe to the ‘edge.create’ event through FB.Event.subscribe.
When will users have the option to add a comment to the like?
If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the Iframe version of the button, users will have the option to comments if you are using the ‘standard’ layout with a width of at least 400 pixels. If users do add a comment, the story published back to Facebook is given more prominence.
What analytics are available about the Like button?
If you visit facebook.com/insights and register your domain, you can see the number of likes on your domain each day and the demographics of who is clicking the Like button.
Can I link the Like button to my Facebook page?
Yes. Simply specify the URL of your Facebook page in the
hrefparameter of the button.
What is the best way to know which Like button on my page generated the traffic?
Add the ‘ref’ parameter to the plugin (see “Attributes” above).
When a user clicks a link back to your website, we will pass back both the ref value as a fb_ref parameter and the fb_source parameter in the referrer URL. Example:http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline
Aggregated stream stories contain all ref parameters, concatenated with commas.
When does Facebook scrape my page?
Facebook needs to scrape your page to know how to display it around the site.
Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs – it will look at “Expires” and “Cache-Control” in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.
The user agent of the scraper is: “facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)“
How do I display the Like button in different languages?
If you are using the XFBML version include the language code when you instantiate the library. Replace ‘en_US’ in this line with the correct locale code:'//connect.facebook.net/en_US/all.js';
If you are using the Iframe version include a locale parameter with the proper country code in the src URL. Example:src="http://www.facebook.com/widgets/like.php?locale=fr_FR&..."
You may need to adjust the width of the Like button to accommodate different languages.
What makes up the number shown on my Like button?
The number shown is the sum of:
- The number of likes of this URL
- The number of shares of this URL (this includes copy/pasting a link back to Facebook)
- The number of likes and comments on stories on Facebook about this URL
- The number of inbox messages containing this URL as an attachment.
The Like button is replacing ad units or Flash, what should I do?
By using the Like Button, you agree to the general guidelines and terms found here. You also agree that you will not modify the Like Button in any way beyond the customization options provided on this page.
Updated about a month ago
rictandag on Jewish Abolitionist Movement:… rictandag on Yugoslav General Albert… ITgeekRunner on Yugoslav General Albert… CurlyLAF on AmBAG Glows at Good Morning… lena on Big Love for Briggy A Filipino…
- September 2014
- August 2014
- July 2014
- March 2014
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010