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&layout=standard&show_faces=true&width=450&action=like&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 }
{ 86 comments… read them below or add one }
Excellent article.
I’ve also pushed out a Facebook Like Button Plugin for Wordpress the day before yesterday.
It offers options you’ll find on the FB developers page … plus options to add the button to the top and/or bottom of your post.
Thanks for stopping by Dean. Yeah i was going to add that but felt like I was going to on and on.
Thesis peeps you can you the “thesis_hook_after_post” hook
Thanks for summarizing all this! You’ve saved me quite a bit of time next week.
Here’s an easy change for that PHP code to support HTTP/S automagically:
<fb:like href="” layout=”standard” show_faces=”true” width=”450″ action=”like” colorscheme=”light” />
Are you saying, you can leave the URL (href) blank and it will automatically take the current URL? If so I wasn’t aware
No, your blog ate my PHP code.
I sent you an email.
Haha, weird thanks dude. How you doing? Wasn’t sure if it was the one only Gregg
Thanks for checking out and mentioning my plugin, Lyndon!
Thanks for releasing something so quick
UH OH! Yep, I broke my blog… lol. I knew I wasn’t going to be able to do this easily
Lets get ya fixed up pronto
You are running thesis right?
Thanks so much Lyndon – I can’t believe you so quickly fixed what it took me an hour to break! I like having the FB ‘Like’ button on my blog
Anything for you
Everyone else, if you have issues, just let me now.
I’m surprised you didn’t mention the Like Button exploit in that you can have it actually reference any page you want without the person realizing it while they think they are liking that particular page.
Side note: Have you tried doing Thesis customization via the OpenHook plugin – MUCH better IMHO
Hey Michael,
Realized that after this post. Might have to do a series of posts.
Haven’t checked it out yet, will do!
Look at you droppin all the knowledge! Thanks man.
Lyndizzle
Thanks for the great info! I have the iframe version on my website and want to try out the XFBML version. What I’m not understanding in the script is this:
FB.init({appId: ‘your app id’, status: true, cookie: true, xfbml: true});
What’s “your app id”? I know that you can get something like this from the Facebook Developers page, but I’m not developing a custom FB app, I’m using one of their plugins. Do I just sign up for one and use the id it generates?
I didn’t even notice that it was looking for an app id. You can generate one in the FaceBook developers area. I will get ya a link/more information
Thanks for spotting.
Thanks for posting this! I couldn’t get it to work within the confines of my CMS and didn’t have the patience to keep playing with it. But I did manage to be able to add the button manually to posts.
Just as an FYI, the button wouldn’t show up for me until I wrapped the code in div tags, in case anyone else is having a problem with it not showing up. Not sure if that was a function of my particular CMS or not, so thought it was worth mentioning. I noticed on this site that yours was wrapped in divs so I tried that and it worked like a charm.
Were you getting errors or it just would not display? I’d be happy to help if you like.
Thanks for the heads up, I put mine in a div for positioning reasons.
No errors, it just didn’t display. It’s fine now with the divs around it, but thanks for the offer of help!
Lyndon: Your like button doesn’t show up at all from an IE8 browser. Bug? It doesn’t appear on any of your blog entries in IE8 but appears fine in Firefox.
Confirmed. I also don’t see your “like” button above if I use IE 8. It only works in Firefox. Weird, because I can see the like button in IE 8 for sites like CNN.com…
I have this problem as well.
Thanks for this! It’s always bad news when a third party needs to explain a fantastic new feature. Maybe Facebook should invest in some good walkthrough writers?
Lyndon, I think your vb.net has a small error.
Request.UrlReferrer.ToString() in the VB.Net example should be Request.Url.ToString(). Otherwise your users will like the Referrer, which is not want you want.
Only displays in IE8 if you include a line of code in the head tag
Thanks Topher, I’ll add the meta tags and update the post
What line of code needs to be in there for this to work properly?
I used the code on the following site and it worked for me.
http://nonsense.nonsensical.com/2010/05/ie-8-troubles-with-facebook-like-button.html
Here’s the Wordpress plugin:
http://wordpress.org/extend/plugins/like
No coding necessary, you can customize the look and placement of the button in the settings interface
Hi,
I have added code of iFrame to display the Like Button but if i click on Like button, nothing will happen.
Any solutions?
Thanks and Regards,
Bhavin Shah
Can you send me the URL? I’d be happy to take a look.
I’ve added the iframe version of the button and it seems to work fine. I tried the XFBML version, but couldn’t get the comment box to work. I could see the top few lines of the box display, but not the entire box. I initially had this button within a table and then tried it within divs, but nothing allowed the full comment box to display. Has anyone else experienced this problem?
Thanks!
Hi,
Similar to Lori, I have implemented the iframe version of the like button with no issues.
But I can’t get the XFBML version to work. I’d like to use this mainly for the comments feature that comes with the Like.
I’ve posted the code before and used the XFBML tag but no luck. I’ve also noticed the application id requirement in the code. I generated an id within facebook but it says to submit my application I need to have a certain number of fans???
I don’t get it
I do not understand what is so cool about this. I tried to add to my articles and tutorials on my web site and I get W3C validation errors. Or are there any workarounds that can solve the problem?
I just published the solution to my problem which have been solved from the members of my community: http://www.londoncitygallery.co.uk/valid-fb-button.html
Fantastic post Lyndon now if only I really understood code or had patience to follow directions! Hey that’s what people like you are here for
nice post. thanks.
Lyndon – Here is some sample code for you to try out
Room It up
Room It up
window.fbAsyncInit = function() {
FB.init({appId: ‘117030351648133′, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(’script’);
e.type = ‘text/javascript’;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
Sorry try this link…
http://www.ruhanirabin.com/easy-steps-to-facebook-connect-comment-box-how-to/
wonderful article.
hope to implement it in my blog and site.
Thanks once again.
You can grab the HTML markup at the following page, please don’t forget to click the like button and leave a comment.
http://www.wachusettwebdesign.com/test/how-to-add-fb-like-button-with-comments.html
Keep posting stuff like this i really like it
Definately a much simplified explanation. I will be implement this for my site.
I’m not a web developer or coder by any means, but have used dreamweaver to set up a site. I followed the directions from FB and have the “like” button on my webpage but it only shows my picture as “liking” the page and says “7 others” how can I get the “others” photos to appear? Also, how do I get it to show up on that persons profile when they “like” my site?? I’m very confused about this php something?? Can you give it to me in plain english please
Great information! I’ve been looking for something like this for a while now. Thanks!
I’m starting to think this isn’t enough though. Most of us would be doing this in the hopes that the “like” will show up in people’s news feeds, but I’m not really seeing that happen much; it’s just showing up on profile pages.
From what I can understand, we might need to also use the open graph protocol if we also want it to be featured in other people’s streams. From the like documentation page:
“If your web pages represent profiles of real-world things — things like movies, sports teams, celebrities, and restaurants, you can optionally use the Open Graph protocol to enable users to establish lasting connections to your pages. Your pages show up in more places on Facebook and you gain the ability to publish stream stories to connected users.”
Have I read that right?
Hi Matt,
I hope to give everything a good read and post some slick ideas this weekend
.
I’ll be back with more info
Lyndon
Actually, the “like” button doesn’t work so well…. I am always getting an error (for all my sites). Same error the button on this very page returns lol (error is “page X could not be reached”). But it works on plenty of other sites.
This is a symptom of some FB bug (#9923 on facebook bug tracker). Still I spent about 5 hours numbing myself with it.
But thanks for the nice article anyway
hello,
I have added code of iFrame to display the Like Button but if i click on Like button, nothing will happen. After clicking on link button it show error. Any solutions?
Thanks and Regards,
Renu
Hy, I have a very simple webpage, with just an embedded vimeo link with a short film i made. I want to post the new facebook like button so that my film gets more popular. This is the code that i embed using the facebook tool but i get an error. Can you please help find where am i wrong with this. Thanks a lot.
my link : http://www.arpanjolly.com/bestideaever
the facebook like code is as follows:
Thanks in advance.
Is it important to make pages in facebook for like button?
Thanks, i looks fine, but i have the next js error:
Error: FB.provide is not a function
Source File: http://connect.facebook.net/es_LA/all.js
Line: 10
I Tried to get it work at my localhost machine
Regards
Hi.
I am a beginner. Build my own website with antenna. Where must I copy and paste the fb like button code. I have tried with the Iframe, but i cant copy. What am i doing wrong
Exactly WHERE do I add this code????? what do I do after I have the code…..where do I click it onto my page at?? the post box, the link box wont take it
WHERE do I do it at???
Hi, great article. Does anyone know how to add like buttons to individual elements on the same page? I’m building a website for a band and want to display their videos on the same page and allow visitors to “like” individual videos.
This is a fantastic site. Is there a way to create a custom FB like button? I have a graphic I’ve built that I would like to use. Any information would be great. thank you.
Greg
Thanks for the great post. I found just the right place to show me how to add the FB like button. Now I will get started on placing it on my page.
Just a amazing idea to promoto ur website through facebook .
A+ for this amaizng post.
The site above is a new WordPress blog. I have not made any comments on it nor
has anyone else. I’m a newbie at this that is why I’m asking.
There are two things I’d like to accomplish.
Add a LIKE button to the blog above and secondly,
I like to add a LIKE button to my icontact newsletter. ( It has not been sent out yet)
Frank
Is it possible to add a like button to a facebook page? I’m trying to find out how to do it but with little success.
Thanks
Works great, added this at the beginning of the page:
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);
}());
Then added this for button:
<fb:like href="” layout=”standard” show_faces=”true” width=”450″ action=”like” colorscheme=”light” />
Thank you ad Merry Christmas,
Milos
I followed your suggestion to generate the Like Button code from the tool and pasted the code on my test page http://www.matiasmasso.es/test
It woks Ok on Safari, but I get following errors on ie8:
1) it does not recognize I am logged into facebook
2) when I click the like button it pops up a blank page with a Facebook title on blue background from http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?social_plugin=like&external_page_url=http%3A%2F%2Fwww.matiasmasso.es
I’ve seen other pages with the like button working on ie8. I’ve pasted their codes on my page and they don’t work there on ie8 either.
My webserver is Windows 2003 with IIS 6.0
Any ideas?
I also added like button to site http://www.storymybaby.com/, but unfortunately in IE8 the button “like” doesn’t show. There is some errors in all.js code, but I’m not 100% sure if my code is properly defined. On the other side in Firefox and Chrome “like” button is visible.
What’s wrong?
Please tell me why people’s pictures are not showing up underneath my like button:
http://www.captainjackskeywestcharters.com
Here is the code:
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);
}());
Thanks.
i use facebook XFBML like box but w3c validator shows error on it, is there way to clean it too.
my site is
http://www.cricketal.com
like box is the only thing that shows the error
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.
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