How to Add the Facebook Like Button to a Webpage

by Lyndon on April 24, 2010




A couple of days ago FaceBook made some big announcements at the 2010 F8 developer conference.   The Universal Like Button was the announcement that has everyone most excited.  So let’s take a look at how to add a like button to any web page.

How to Add a Like Button to a Web Page

First the good news – It is terrible easy.   Now the bad news – FaceBook does a bad job of explaining it.  Ready for more good news?  I am going to simply things for you!

There are two ways to add the Like button to your Website – with an i-frame or with JavaScript.   We will discuss the difference and also take a look at some of the available WordPress Plugins.

Adding the Like Button to a Webpage using a simple i-frame

The easiest way to generate the i-frame code is to use the tool provided by FaceBook.  The attributes used in the i-frame code are straight forward however it’s best to make use of the tool because it automatically URL Encodes (converts special characters) you’re Web page URL for you.

The code below which was generated by the Facebook tool could be placed on http://lyndonreid.com/contact (note the colon (:) and forward slashes (/) are URL Encoded).

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flyndonreid.com%2Fcontact&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Adding the Like Button using XFBML and JavaScript

In order to use the XFBML you will need to reference the FaceBook JavaScript Library. You can simply  copy and paste the code that follows into the footer of your web page (or anywhere inbetween the opening and closing <body> tags) .  The code will load the JavaScript library from FaceBook at the same time as the rest of your site loads (asynchronously) meaning it will not block or slow the loading of the rest of your website.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};


(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Once you have the following code added to your webpage you can simply use the FaceBook tool to generate your XFBML or edit the code below and copy and paste it into your web page.

<fb:like href="http://lyndonreid.com/contact" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

The benefit of using the XFBML is that users will have the option to comment when they “like” your page.  The i-frame version does not provide this functionality.

Adding the Like Button to a CMS

If you use the XFBML version of the code it’s quite simple.  You will load the JavaScript library on each page and then modify <fb:like /> tag to reference the current page.  Following are two examples, one that use PHP and one that uses VB.NET.

PHP

Note: this script assumes your site is running on http:// and not https://.
<fb:like href="<?php echo "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI'];?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
<fb:like href="http://lyndonreid.com/contact" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

VB.NET

<fb:like href="<%=Request.UrlReferrer.ToString()%>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
<fb:like href="http://lyndonreid.com/contact" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

Adding the Like Button to WordPress

There are two pluggins available already.  The plugin available at Kouguu.net allows for some customization via the control panel.

Smoking Gunn: http://blog.gunnjerkens.com/2010/04/facebook-like-plugin-for-wordpress/
Kouguu.net:  http://www.kouguu.net/?p=1

Adding the Like Button to a Thesis Themed WordPress Site

If you are familiar with the way hooks work within thesis then this will be really straight forward and you may not require this explanation.  If not, here you go J

Again, you can choose to do this with the XFBML of the i-frame version of the code.  I am going to show you how to do it the XBFML version as allowing you visitors to comments on posts they “like” is a nice touch.

We are going to add two hooks.  One for the actual button and one to load the required JavaScript.

You are going to edit you custom_functions.php file which can be found at:
\wordpress\wp-content\themes\thesis1.6\custom\custom_functions.php

Add the following lines to the top of the file:

add_action('thesis_hook_before_post','add_facebook_like_button');
add_action('thesis_hook_after_footer','add_XFBML_JavaScript');

Add the following to the bottom of the file:

//the following function will allow the facebook like button to display on every post
<div id="fb-root"></div>
function add_facebook_like_button() { ?>
<div style="width: 100%;">
<fb:like href=""<?php echo get_permalink($post->ID);?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
</div>
<?php
}


//the following will load the FaceBookJ avascript Libraray
function add_XFBML_JavaScript() { ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script><?php
}

The FaceBook like button will now appear at the top of every post in your Thesis themed WordPress blog.

Summary

Adding the FaceBook Like Button to a Web page is very simple. If you have any issues adding the button to your Web site leave a comment below and I reply with in few hours.  If you found this article useful, please scroll to the top and click the like link and tweet it :)

{ 124 comments… read them below or add one }

masum March 6, 2014 at 3:00 am

I want to add a sticky Facebook like box with a close button my site bottom right area. when site will lodding it will popup in footer. If any one know about it please give me solution. you can see a demo visiting http://dhakatimes24.com/

Reply

P RAMESH KUMAR April 4, 2014 at 10:31 pm

Sir, I have added the social plugin in my website default page and my problem is i want to send my own content and image when user clicks on like button.the following image and content show in users profile. please elaborate me with example. thank you

Reply

Leave a Comment

{ 2 trackbacks }