In an early Web Development News, Tips, and Tricks post I showed how to implement the Facebook ‘LIKE’ button. After I implemented this on a couple sites I started doing some more research to understand how my site could take full advantage of the ‘LIKE’ button.
There are a few steps you need to take to fully integrate the ‘LIKE’ button on your site. Facebook uses the Open Graph protocol, enabling you to expose content on your web pages to the social graph. Page selection is important when you consider adding ‘LIKE’ buttons – you should choose to add them to pages with something a person would actually like, e.g. a product, an event, a personal bio, etc.
Along with the ‘LIKE’ button you’ll need to add some “og” meta tags. These “og” meta tags will help you specify structured information about your web pages. The more information you provide in the “og” meta tags, the better your chances are that your page will show up on Facebook.
So let’s look at the example Facebook gives you – a person goes to http://www.imdb.com and clicks the ‘LIKE’ button on the movie “The Rock” (with one of the greatest actors ever, Nicholas Cage). IMDb has implemented the following “og” tags:
As you can see, the “og” meta tags contain several pieces of descriptive information about the movie. Let’s dissect the tags.
The Open Graph protocol defines four required properties:
- og:title – The title of your object as it should appear within the graph, e.g., “The Rock”.
- og:type – The type of your object, e.g., “movie”. See the complete list of supported types in the Facebook Open Graph documentation.
- og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. Facebook supports PNG, JPEG and GIF formats.
- og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
- og:site_name – A human-readable name for your site, e.g., “IMDb”.
- og:description – A one to two sentence description of your page.
When a user clicks the ‘LIKE’ button, the following will show up for all their friends to see:
Once someone likes your page, the image, name, likes, web page, and the number of people who also like it will show up on that user’s profile under the Info tab.
I’ve just reviewed a few of the basic “og” tags – there are close to 50 tags, and growing. You can see all the meta properties you can include on your site by visiting ogp.me .
When building a site or updating a site I recommend adding as many of these meta tags as applicable. Review the list of og tags on Facebook, identify appropriate content, and add the tags to your site.
Why are you doing this extra work? As I reviewed above, when a user likes something Facebook adds that to the user’s wall for all their friends to see. That’s free advertising to their friends! Facebook also displays a user’s likes on their profile page by adding both a link to the page the user likes and a link to the main web site. That’s two links per like. Now if 5,000 people like you that’s 10,000 inbound links.
Facebook also offers per click advertising advertising. As a part of the segmentation and profiling Facebook offers, you can specify groups such as “friends of users who like the Rock” to target your ads to those who are more likely to be interested in your product.
With all the benefits of a ‘LIKE’ button, what are you waiting for? Get working on your “Like” button now!!
