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 :)

{ 2 trackbacks }

uberVU - social comments
April 24, 2010 at 11:55 am
Facebook “Like” Buttons. « Social Media for Dealers
May 24, 2010 at 12:10 pm

{ 119 comments… read them below or add one }

Marian March 31, 2011 at 2:47 pm

I’m trying to add the button onto my website using the iframe code and nothing pops up. I use godaddy.com as my domain and page designer and I’m not sure if that affects it. The tech support staff at godaddy.com are close to useless. Thank you.

Reply

katrina April 19, 2011 at 12:28 pm

I’m unable to get this to work :-(

For now i’ve added the i-frame version to my page manually – though in th efuture i’d like to figure out if i can add it to the template of the page and have it automatically use that URL (may be too much for me to comprehend initially).

The like button doesn’t even show up: http://tinyurl.com/nolikey

Also, I’m confused by the width attribute… i only really want the small button, which is nowhere near the default 400 px that facebook offers by default.

tanks in advance of any help/insight you can offer…

katrina

Reply

Sudha May 11, 2011 at 10:18 pm

Do you know how to get fb:like to work when you do not have a clean URL – like with struts?

Reply

Mark May 13, 2011 at 3:31 am

Hi. Thanks for the article. I was wondering whether it’s possible to also include a summary of the article when posting it back to FB.

Thanks,

Mark

Reply

sngerge May 15, 2011 at 8:14 am

Thank you… I did it. Add into my blog but did not register for fb.apps.

Reply

Chris Reed June 3, 2011 at 7:02 am

An excellent writeup. Fast and easy, it’s the best of all worlds! Thanks for providing this, made my day much easier.

Reply

Corky Seevinck June 19, 2011 at 8:22 pm

Hi, I tried the code you suggested above and have some weird results. I am working in Joomla and am trying to add a LIKE Button only on sermons on my website (I also have a like box on the front page and that works fine). I added the following code to the component in Joomla:

toString();
echo $un; —– >>> for debugging to conform that I have a good URL
?>

window.fbAsyncInit = function() {
FB.init({appId: ’226907447328380′, 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);
}());

<fb:like href="” layout=”standard” show_faces=”true” width=”450″ action=”like” colorscheme=”light” />

What I get is a LIKE notice on my facebook page, but all links point to the main website URL and not to the particular page from which I do the LIKE??
Any suggestions will be much appreciated.
Corky

Reply

bhargav June 30, 2011 at 11:47 pm

thank you

Reply

mary July 14, 2011 at 2:15 pm

Hello,
Is there a way you could give provide a step by step instruction on how to do this in dreamweaver? I am new in this area and only using dreamweaver to create a website. I have tried several tutorial but to no avail. It would be a great help if you would reply asap.

Thank you.

Reply

Theo van Elmpt July 16, 2011 at 5:19 am

Hi Lyndon,

I’m not a very accomplished web/soc network person but I thought I give it a try. I did as suggested but am not sure if I’m missing a trick.
I get the button alright (using the Java version) but when I click on the button nothing happens….
??? Should I not get a ‘hand’ cursor at least?
Any ideas?
Thanks for your help
Theo

Reply

Ravi December 22, 2011 at 6:29 pm

Make Sure you are not already logged into Facebook….

Reply

Sharmila July 25, 2011 at 11:52 am

Hi,
I am not able to understand the instructions on how to add the like button on the website.
Please help me with instructions.
Its urgent!
Thanks,
Sharmila

Reply

SEO September 7, 2011 at 4:16 am

Excellent article hosting here and Last few days i was found code of facebook like button and After Read entire post, I will try to implement this cod on my blog and Site as well..Thanks

Reply

Dharnendra September 13, 2011 at 8:43 am

Hi,
If I want to pass the comment from my site to user’s facebook wall, how can I achieve that.
I want to use some predefine site text which are also being posted to user’s wall, when user clicks on like button.

Reply

emma stock September 14, 2011 at 3:46 pm

Can anyone please help me get my facebook like button onto my web page without me having to spend £100′s to a web designer….I have created a face book page for the web address but I cannot work out how to get the button onto my website. Please, if you can help email me. thank you so much.

Reply

Ells September 25, 2011 at 7:08 am

Using a PHP CMS but when input the code in my admin area the webpage shows the text of the code and not the “Like” button? Help!!

Reply

Rick Tatsch October 2, 2011 at 4:46 pm

Hi, FB really does a terrible job explaining how to add a Like Box. Reading the forums a lot of people are having the same difficulty. I know how to get the code but what is it excatly you do after you copy the code? At that point this is where everyone is getting stuck. Including me.

Any help would be appreciated.

Reply

beesh October 6, 2011 at 3:34 am

how do i use a custom facebook or twitter icon/button to link to the page on my website?

Reply

Lauren Smith October 6, 2011 at 12:01 pm

I am wanting to add the facebook like button to this website. When I have generated the code from FB developers and added it to my code, nothing happens. The website was made using a template so will this have something to do with why it won’t work? I didn’t make the site myself and don’t know a great deal about web design yet but my boss really wants this like button on the site! Please help if you can. Thank you.

Reply

dieter October 24, 2011 at 7:55 am

HI,

I’ve added the code from facebook developers website. My problem is that my button is not even showing in IE or CHROME
Am I missing something ?

Regards
Dieter

Reply

Nem0 December 7, 2011 at 8:06 am

thank you for the tutorial..

Reply

Mark December 20, 2011 at 9:39 am

Hi,

Thanks for the help so far. I am not a web designer so i’m learning as I go.
I have done everything needed on facebook to get the codes needed for my page but I am having problems putting it into the html code. I am using an old version of dreamweaver. I have created a box that I want the facebook like thing to go into but when i put in the code when i preview it it just shows the text of the code in that box. No facebook like panel.

any help would be much appreciated!

Reply

Confused January 6, 2012 at 12:58 pm

i’m still lost

Reply

Shades of Grey Photography January 9, 2012 at 12:49 am

I added a Like Box to my Info and Special offers page and It was supposed to be the dark color. It instead is clear any ideas as to how to fix this? I contacted my hosting company and they told me it was a scripting error with facebook. Yet I can not find any relevant info about fixing this or even contacting facebook to see if they could check the code. Any ideas?

Reply

Cat January 12, 2012 at 4:53 pm

I suppose I’m asking the same question as everyone else but perhaps you can dummy it down a little. I can see the Like button in Safari and Firefox but not Chrome. I saw it in Chrome when I initially added it but subsequently it did not show. This is what I have:

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

Any suggestions? Thanks!

Reply

Cat January 12, 2012 at 5:08 pm

That above code is not what I have nor is it what I copied/pasted to this post. Let’s try again.

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

Reply

Cat January 12, 2012 at 5:11 pm

Sorry if I’m now being annoying. Not sure why the code isn’t pasting to this post. Thanks anyway.

Reply

SEO Services Dublin January 19, 2012 at 5:56 am

I think it doesn’t work on the new version, they must have changed something…

Reply

mohini February 6, 2012 at 7:29 am

i am still not able to get the like button on my site….pls help me out.
i hvae used php and javascript to dev it,

Reply

Code February 8, 2012 at 5:45 pm

Is XFBML the same as XHTML? My site is xhtml and I have been trying the XFBML method but I can’t get it to work :(

Reply

sanny February 21, 2012 at 2:48 am

Thanks it is very simple and i got it right well
But there are already more 2,000 like even though i haven’t done it at all

Reply

Jason February 25, 2012 at 7:29 am

Thank you so much I have been looking for simple instructions like this, you’re right facebook makes it sound so complicated!

Many thanks again,
Jason.

Reply

martins February 27, 2012 at 7:52 pm

i am a novice in site building. dont know how to go about adding facebook like on my website, pls help

Reply

Anurag March 6, 2012 at 11:04 am

Is there a way to add face book like button but use our own like button, instead of what facebook provides.

Reply

colm March 13, 2012 at 5:34 pm

Is there a way to add the like button using html code

Reply

moatz March 14, 2012 at 11:13 am

the following is part of php script associated with buttton ”

var bootstrap = new bootstrap(‘http://hotmail.com’, ‘button’, ’304770399584182′); bootstrap.init();
the JS associated is here http://pastebin.com/1cunBBP0

Using windows vista and chrome , I have facebook logged in , so why this line returns null in the JS ?

if(document.getElementById(‘fb-root’)) return;

I have tab in chrome already runing and using facebook , any suggestions

Reply

Kladovo March 28, 2012 at 4:57 am

Hi, I post on my blog and it works well. Thnaks for grate post!

Reply

Nehru Place April 8, 2012 at 11:58 pm

Well that really nice of you, that you have posted about like buttom. But my problem is how to get this particular code from facebook so that when a user clicks on like button it goes into the account of my site like i am running this nehru place market website and want to get facebook like code for this, how i can get it from facebook side… really confusing.

Reply

James@Local SEO Services April 15, 2012 at 3:51 pm

Very good explanation on why it can benefit of using the XFBML and not the i-frame version.

Reply

sindhu April 18, 2012 at 6:15 am

hi I want to display only fb like button. can you please tell me how to hide the comments which displays near like button “You and 220 others like this” .

Reply

David Speight May 16, 2012 at 1:02 pm

OK, the Facebook tool gives me the button code, but you haven’t explained the ‘Step 2 – Get Open Graph Tags’ ?
How about a series of step-by-step instructions, rather than an explanation of the differences and
the theory of adding a like button?
Can the process not be stated in a step -by-step fashion?

Reply

Lyndon May 19, 2012 at 9:34 pm
maruifeng August 26, 2012 at 3:18 am

I encountered a ‘confirm’ button when launching the like button. don’t know where it comes from. It says FB use this to prevent spamming or something.

Reply

bloglive September 2, 2012 at 12:40 pm

Added the iframe code and its working fine. Thank you.

Reply

ishaq September 18, 2012 at 7:29 pm

Plzz you can make any video about that. how to like button to site. plzzz

Reply

Andy January 3, 2013 at 8:10 am

hi, im trying to get this butoon to work but i see no button only a box that says internet explorer cannot display ths page. Does your facbook page have to be set up differently or settings changed or something? please help.

Reply

Tina Sawhney January 4, 2013 at 12:14 pm

Added facebook like button but it shows 1 like when I have 3 likes already so why does it show 1 only?

Reply

Tina Sawhney January 4, 2013 at 12:15 pm

I added facebook like button and it shows 1 liked when I clicked it but I have 3 likes on my facebook page.

Reply

Mary January 8, 2013 at 12:22 pm

No matter what I did button does not show on my page. Spent literally hours on it trying everything. But after reading FB dev forum it appears bug is there for 2 years. You know why? Because FB does not want free likes to your page. They want you to pay for each like. Forget about trying to make this work.

Reply

http://tinyurl.com/womehimes04640 January 26, 2013 at 8:44 pm

How did u actually obtain the concepts to publish ““How
to Add the Facebook Like Button to a Webpage”? Thanks a lot -Amos

Reply

Leave a Comment