LATEST BLOG
Add Facebook ‘Like’ Button on Your Website
The Like Button is one of Facebook’s social plug-ins that you can add to your website. This tutorial will guide you step-by-step into getting it working for yours. Get the low down on the Open Graph protocol and find out how to add the button into your WordPress blog.
Recommended Reading
There’s been a huge buzz on Facebook’s move from the ‘Be a Fan’ button to ‘Like’ buttons. Facebook believes that this change offers their users a more light-weight and standard way to connect with people, things and topics in which they are interested.
There are two types of Like buttons. The iframe version is the easiest to implement. The second version is via the <fb:like> XFBML tag which requires the use of JavaScript SDK. The second version allows users to add a comment to their like as it is posted back to Facebook.
This tutorial will demonstrate the iframe implementation utilizing the Open Graph protocol. This tutorial assumes you have basic HTML knowledge and administrative access to your web page.
STEP 1
Add the following code within your <html> tag.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://developers.facebook.com/schema/">
STEP 2
Next add the following Open Graph META tags in between the <head> and </head> tags. The following example below is taken from Australia’s Wedding Celebrant website. Make sure to change what is inside the content to your own.
<meta property="og:title" content="Australia's Wedding Celebrant" />
<meta property="og:type" content="website" />
<meta property="og:url"
content="http://australiasweddingcelebrant.com.au" />
<meta property="og:image"
content="http://australiasweddingcelebrant.com.au
/img/assets/video_preview.jpg" />
<meta property="fb:admins" content="angelobeltran001" />
<meta property="og:site_name"
content="australiasweddingcelebrant" />
<meta property="og:description" content="Your wedding day is
your special day. It is an honour and my pleasure to be part of
something special. Let's make it a day to remember." />
For the fb:admins property enter your Facebook username. You can enter more than one admin just make sure to separate each entry with a comma.
For the og:image property it must be an image on your web page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
For the og:type property, put ‘movie’ if you’re promoting a movie or ‘song’ if it’s a soundtrack. View the complete list of types here.
STEP 3
Next we need to get the iframe snippet using a tool from Facebook’s website. As you will see from the screenshot below you can tweak your Like button by changing properties like its width, font and style.
A live preview gets updated on the right as you make the changes. Once you’re happy go ahead and click on the button Get Code.
Your snippet should look something like this.
<iframe src="http://www.facebook.com/plugins/like.php?href= http%3A%2F%2Faustraliasweddingcelebrant.com.au& layout=standard&show_faces=true&width=450& action=like&font=verdana&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>
To install this snippet in your WordPress blog just replace the url to <?php the_permalink(); ?> and paste inside index.php, single.php and archive.php.
<iframe src="http://www.facebook.com/plugins/like.php?href= <?php the_permalink(); ?>& layout=standard&show_faces=true&width=450& action=like&font=verdana&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>
To fix the 2″ bottom margin bug that some people are reporting, all you need to do is tweak your iframe code by entering a value for the height in px (pixels).
You could try wrapping your iframe tag with a div tag like this.
<div id="iframe-wrap"> <iframe ... > </iframe> </div>
Then in your stylesheet put this new id.
#iframe-wrap {
width: 300px;
height: 100px;
}
STEP 4
Now paste your iframe snippet into your web page. Your Like button should be similar to the screenshot below.
That’s it you’re all done!
The Like button will know if your website visitor is currently logged in to their Facebook account or not. Otherwise it will ask the user to login. If the user is currently logged in to their account when they visit your website, your Like button will be personalized for them by showing a list of their friends that’s already liked your web page.
When a visitor Likes your page, their Current Activity Stream will get updated with that activity. These entries will contain a link back to your website. If you’re using og:type such as movie, tv_show, song or book it will also update their INFO tab under their respective types. Facebook’s Like Button plug-in will rock the social networking cloud.
For those who’s not interested in utilizing the power of Open Graph protocol and just want the plain Facebook Like button. Then all you have to do is go to Facebook’s Like Button tool found at the bottom of that page. Make sure to enter your website address. Change the iframe settings like the width, style and font. Grab the code snippet and paste it into your web page.
Hope this helps if you have any questions I will try my best to answer them or you can always head to Facebook’s Help Center and for the tech savvy to Facebook Developer Forum.
Written by Angelo Beltran
Angelo Beltran is a freelance designer who recognizes that design and marketing are one and the same. He's passionate about branding and corporate identity. Follow his tweets over at Twitter.
34 Comments
Karen said...
Can’t get this to work – in Firefox I get an error message “You failed to provide a valid list of administrators. You need to supply the administrators using either a “fb:app_id” meta tag or a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.” and in IE it takes me to a login page for Facebook, then recursively calls IE until I kill the process.
Angelo said...
@Karen I believe it’s looking for this meta tag in your header:
<meta property=”fb:admins” content=”FACEBOOK_USER_ID” />
where FACEBOOK_USER_ID is your Facebook username.
Karen said...
Yes, I agree – but I have that tag:
and still get that error message.
(my actual ID is removed for this post …
So I suspect the error is triggered by something close to this line.
Karen said...
All of a sudden, it’s started working, with no code changes from me!
Karen said...
After a few more hours, it’s stopped working again … maybe I’ll give up for today & check again in the morning
Angelo said...
@Karen If you’re still struggling to get the Open Graph protocol to work consistently read STEP 4 again in this tutorial to get the Like button to work without Open Graph. Good luck!
Angelo said...
If you want to show any code snippet in a comment box make sure you don’t type the “< " or ">“. Otherwise it will not show up. Instead replace “< " with & lt; (without the space between & and lt;). Likewise replace ">” with & gt; (without the space between & and gt;). I will write a tutorial on this for my next blog post.
Graham said...
I installed the plugin but now I just have the word ‘false’ appearing on my site (as well as my other content).
Then I went to the Facebook developer forum to post a thread about it but their user registration process is broken.
(Facebook really is poorly run! The advertising features haven’t worked on FF/Mac for at least a year, for example. I have to switch browsers just to see my advertising charts. And to make it worse, they make it impossible for users to report bugs – the height of arrogance!)
Karen said...
OK, it’s definitely not step 4 – when I test the snippet on the FB site I still get the error! So it’s clearly at step 1 or 2. I note that others are experiencing the same fb:admins error message too. My site is at http://dobbris.angelfire.com/ and the relevant code is lines 104 through line 117
It’s as if the admin name is not working somehow – yet it was working briefly last night for a few hours.
Angelo said...
@Karen I did enter your site name in the tool and it comes up with the error after pressing Like. I checked your html code and your meta tags should be between the <head> and </head> tags.
Quick tip: Set your Facebook username by logging into your account. Go to Account > Account Settings > Settings > Username
Then use that for your fb:admins content.
Angelo said...
@Graham I’m not sure where you’re putting your snippet. If you’ve installed it on your homepage where it’s flash heavy it won’t work unless it’s inside your ActionScript. Have you tried putting it on your blog?
Graham said...
Angelo, it works fine with my WordPress blog. Integrating it with the Flash site is another matter. I will try and embed it in the Flash movie next, as you suggest.
gravyjunkie said...
Thank you for sharing. Not too keen on the OG Protocol but it works.
Graham said...
Angelo, I have to correct my previous post – the plugin LOOKS fine on my blog but when friends test it and clik on ‘like’ it doesn’t register on Facebook and the like count stays on ’0′.
Angelo said...
@Graham I tested your Like button on your latest post while I was logged in my FB account and it did show me as the first person to like it with 1 count. It also updated my Recent Activity Stream on my FB profile with your post name of Radical Cup Sponsorship linking back to http://www.graham-mitchell.com/blog/?p=199. As soon as I logged out then went back to your post it says 0 Likes. This may be a cookie/authentication issue.
mukti said...
Can we have more than one like button on a page?
If so how does this work?
I have anchor links on my portfolio page and would like to link to each individual one.
Thanks
Angelo Beltran said...
@mukti Yes you can have multiple Like buttons on a single page. However they must refer or link to a different page. Facebook currently doesn’t have any way of differentiating the parent page from its siblings such as your anchor links.
Drew said...
Hi Angelo,
wondering if you could help out. I have added a like button to my page, but can’t access any of the admin functions. I do not get the admin button when I scroll over the like button, and don’t get any admin info on http://www.facebook.com/insights/ when I try to add my domain.
One issue I may have is that I originally put in the address http://www.miraclefishmovie.com and not http://www.miraclefishmovie.com/Home.html
I have changed all of the coding to include the /Home.html tag but, it still doesn’t give me any admin information.
Any help you could give would be really appreciated.
Angelo Beltran said...
@Drew The admin link should show up after you click on your own Like button. Clicking on the Admin link will bring you to your “pseudo-Fan-Page” where only admins are allowed to access. This is where you can manage fans and publish stories to their News Feeds. On this same page is a link to your Insights on the left sidebar.
Drew said...
So weird, earlier there was me plus 13 others. Now there is me and one other (I did change some of the coding around earlier today), but it still won’t bring up the Admin link when I click on the “Like” button. Wow, I just tried it again and IT WORKED! Thanks Angelo
Drew said...
However, one small hitch. It doesn’t show up in people’s newsfeed when they add it. I thought it was meant to show up in their profile, but it doesn’t seem too…
mukti said...
ok great thanks for all the info…
m
Angelo Beltran said...
@Drew Glad to hear your admin link is working! When visitors who has Facebook accounts click on your Like button it will update their Recent Activity Stream which is on their Profile Page, not on the News Feed. Also since you’re using the og:type movie it will also show up under their INFO under MOVIES. It shows up in mine -_^
Drew said...
Angelo you are right, but on the http://developers.facebook.com/docs/opengraph page it shows a picture and how many other people like it. On your page (and others) it only seems to show the picture of the first movie listed, and doesn’t say how many others like it. Is that right? Thanks for all of your help…
Angelo Beltran said...
@Drew At the moment the thumbnail only shows up under the INFO tab if the object is listed as the first item as you described. The pop up window (ie. tool tip) feature is also yet to be seen. I will update this post when further developments come in.
andrea said...
I clicked on your “Like” button but all it does is to keep asking for Facebook login. After trying logging 3 times I gave up.
I say this because that’s exactly what happens to my website.
andrea said...
It looks like it’s a Firefox problem, because in IE it works.
Angelo Beltran said...
@andrea It could be an addon like Multifox (handles multiple accounts) that’s causing the issue. Try disabling one addon at a time. May I also suggest resetting your cookies.
Drew said...
Hey Angelo,
Quick question (as you seem to be the master). On my page it says 64 people have liked it, but when I go to the admin page it only has 14 people as liking it. Any thoughts?
Angelo Beltran said...
@Drew My apologies for the late response. This issue has been brought up with Facebook and has yet to be resolved. They say it may have something to do with each user’s privacy settings. For further developments on this topic please refer to http://forum.developers.facebook.com/
Cass said...
Hi Angelo,
Thanks this was a great help!
I’m just having a couple of problems, when I ‘like’ my own page the ‘Admin’ link doesn’t appear. Also, I made the og:type ‘activity’ and it’s not appearing in the ‘Info’ tab.
Any ideas?
Thank you again! This is very appreciated!!
Cass
Renu said...
im facing a problem here….
i’ve added the same iframe code lyk u’ve showed in ur post in my wordpress blog….
but instead of showing post/page title ..wht i get is
for example :
‘Renu likes angelobeltran.com on angelobeltran.com’
please help
Angelo Beltran said...
@Renu Did you replace the URL (href) to <?php the_permalink(); ?>
Roshith Kaniyamchalil said...
I am getting the error “You failed to provide a valid list of administators. You need to supply the administors using either a “fb:app_id” meta tag, or using a “fb:admins” meta tag to specify a comma-delimited list of Facebook users.” .
Leave a Comment