How To Put The Facebook “Like” Button On A Site

Last month, Facebook dropped the news about their “Open Graph” or new Facebook Platform that brings content into Facebook  – and of course expands Facebook’s web reach out to a more granular level. Since the announcement, there have been two questions asked quite frequently:

1. Should I put this on my website?
2. How do I put this on my website?

Luckily, this post will answer both of the above questions.  To question 1: unless you have content that isn’t interesting, isn’t social in nature or you have privacy concerns, adding this is new functionality to your original content is recommended.

However, it isn’t recommended to go buck wild putting this functionality on every page, just your content that would interesting people. Should it be on your Contact Us Page? No. Should it be on your weekly unique and creative blog posts? Yes. The answer to question 2 isn’t quite cut and dry, so this post will serve as an à la carte menu on the various different ways to implement the Facebook “Like” code onto your individual pages/posts.

“Single Serving” implementation

Looking to have a “Like” button appear on a single post or page? If so, this section is for you. Facebook makes it quite easy to copy-paste a code snippet right into the HTML of any page/post and have the “Like” button appear instantly. This standard code can be found on the main Facebook for Websites page.

But wait – there’s more! Not only can you have the standard button, but there is also the ability to tweak the font, profile images, verbiage, width and color combinations with the drop down buttons. One of the most interesting options that can be customized is the verb itself. While most people call it the “like” button, the button can actually say that users either “like” something or that they “recommend” something.

If you want give your article a bit more customization, you can add in additional meta data to customize what shows up on a users wall. The following attributes can be customized so that you can dictate the name of the item that users like, along with the proper site name and accompanying images. Note: for this to work, the site must be added to the Facebook Open Graph Protocol. Here is the sample code that could be implemented for this page:

og:title – This will overwrite the title tag as the name of the article that will show on Facebook

og:site_name – This will be the exact site name that will display in conjunction with the article that was liked.

og:image –  This will represent the best image for the page users will ‘like’

So for this article page, the meta data could look like this:

<meta property=”og:title” content=”How To Add Facebook Like Button”/>

<meta property=”og:site_name” content=”Search Engine Land”/>

<meta property=”og:image” content=”https://searchengineland.com/images/20/logo.png”/>

And the end result would be:

Facebook user likes “How To Add Facebook Like Button” from Search Engine Land (with accompanying logo)

This is still early in the game, and there are a variety of bugs and issues popping up, but there is great support in the Facebook developer forums if you get stuck.

Site-wide platform implementation

If looking to go ahead and toss the code on every page on your blogging platform, there are a variety of plugins that have already been built to save you time and effort! Simply choose from the blogging software you are using and follow the instructions or add on the plugins so you users can “like” away.

WordPress

Right now, the highest rated plugin is the “fblikebutton” plugin. This allows for some handy implementation options like displaying above/below the content with the addition to add to pages and the homepage. There are also a variety of other like buttons on the WordPress plugin market.

TypePad

SixApart has put together a easy method for adding the “like” widget on their TypePad templates. It has some nice options to display on a post-by-post basis and even has help for advanced templates.

Blogger

A Facebook “like” button has been built for Google’s Blogger platform as well. The post has detailed directions on implementation and customization.

So find out what works for you (and more importantly your audience) and use this information to boost your site’s visibility on Facebook.