How to Add Facebook Like Buttons to Your Website

Monday, July 12th, 2010 at 7:06 pm

You already know that Facebook Like Buttons are important to increase your Social Media Optimization, and luckily Facebook has made it pretty simple to add the Like button to your website. Facebook is using its Open Graph strategy to theoretically make all websites more Facebook friendly. To achieve this, Facebook has developed a way for you to add a series of Social-Plugins (which are ultimately widgets) to your website to make it more Facebook interactive.

There are two versions of the Like Button that you can add to your website. The first is called the simple i-frame version. The content inside this i-frame allows Facebook to detect whether the person who clicked on the button is logged into Facebook or not; if the person is logged in this i-frame will appear personalized, if they are not logged in they will be prompted to do so.

The simple i-frame code looks like this:

If you use Facebook’s Like Button creator on their developers website to tweak the parameters and enter your unique URLs, you will have a functioning Like Button in no time. Enter the information and click the “Get Code” blue button, and once your code is generated just add it to your websites!

There is another type of Like Button and the code is a tiny bit more complicated, but it offers more features. It’s the JavaScript version and to use it you need to incorporate JavaScript SDK and Facebook’s XFBML fb:like tag.

The JavaScript code looks like this:

<fb:like href=”Your URL” layout=”standard” show-faces=”true” width=”450″ action=”like” colorscheme=”light” />

Definitely use Facebook’s Like Button creator on their Developers website to adjust your parameters and add your unique URLS.

In addition to the feature of the simple i-frame version, if you use the JavaScript code to make your Like Button, you can show the profile pictures (show-faces=”true”) of your friends who have clicked the Like Button. In addition, people can add a comment to the link once they clicked on it. This is the more interactive version of the Like Button, but both versions work well so choose whichever one is best for you.

In both versions, it is highly recommended that you add meta data codes to the code Facebook generates for you. These Open Graph meta tags make your link look better.

These meta tags include the title of your page, the name of your website, and the URL of the best image for the page (this would be the picture that appears by your link on Facebook).

The example Facebook gives is such:

By looking at these additional meta tags, we can infer that the title of the website is “The Rock”, the website is “IMDb.com”, and that there is an image (probably the movie poster) that accompanies it. Change these settings as necessary so that it reflects your website.

Once you have a code, you will run it through the URL Linter to make sure that you did everything correctly. If everything seems fine add the final code to your website and you will be good to go!