How to add Facebook 'Like' Buttons
April 23, 2010 Author: Adam Lee
Facebook announced at the F8 conference their vision to take on Google in social search game.
The concept is to add Facebook ‘like’ buttons to your site and then your visitors ‘like’ your site and share it with their friends. This isn’t too different to the general concept and how social bookmarking works but Facebook also stores the site so they know how many people like it, offering the ability to make your site more like a Facebook Page.
It is early days just yet but its a handy addition to have on your site so we’ve added it to No Pork Pies using dynamic implementation and I’d thought a quick post to show others how to do it might be useful.
There are two ways to add the like button to your site – an iframe and Javascript. We’ve done it with an iframe so the following explanation will show you how to do it. This is a wordpress site so should be easy for other wordpress blogs to dynamically add this to their site. If you want to do it in Javascript then read up on it here
There are two parts that need to be added to get your Facebook ‘Like’ button to work properly – The meta data and the button code.
The Meta Data
This looks something like this:
<meta property=”og:title” content=”Digital Marketing Agency”/>
<meta property=”og:site_name” content=”No Pork Pies”/>
<meta property=”og:image” content=”http://www.noporkpies.com/logo.gif”/>
The ‘Title’ meta will display the page title within the Facebook profiles that ‘like’ the page. The site name will also be displayed after the title and look something like:
No Pork Pies likes (title) on (site name)
The first issue here is that it is static data so will display the same information on every page. We want this to show the page title for each page dynamically. To do this in WordPress rewrite the meta to look like this:
<meta property=”og:title” content=”<?php the_title(); ?>”/>
<meta property=”og:site_name” content=”No Pork Pies”/>
<meta property=”og:image” content=”http://www.noporkpies.com/logo.gif”/>
This will automatically pull in your page title.
The iframe
Next up is the iframe, you can create an iframe on Facebook here – http://developers.facebook.com/docs/reference/plugins/like
This will give you a code something like this:
<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.noporkpies.com&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>
Again this is a static page – in this case the homepage identified as:
src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.noporkpies.com&
We want to dynamically change this. To do this in WordPress we change the link to the following:
src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&
Notice the URL http://www.noporkpies.com has now become <?php the_permalink() ?> in WordPress this will automatically replace it with the URL of the page you are currently on.
You now need to add these two bits of code to the template on WordPress. The easiest way to do this is to add the meta data to the ‘header.php’ file – this will then be implemented on every page. The iframe should be added to every page so this code needs to be added to your ‘index.php’, ‘pages.php’ and ‘single.php’ files. This will add it to all pages and posts of your site.
If you don’t use WordPress then this post might help you implement it across other PHP sites.
Hope that makes it easy to set up and remember to ‘like’ this post 
10 Responses to “How to add Facebook 'Like' Buttons”
Leave a comment
April 24th, 2010 at 1:40 pm
Hi- I’ve used your guide to implement the like button into wordpress, but the metadata doesn’t seem to be working. In Facebook, the blog title is showing instead of the page title. E.g: ‘Mark likes No Added Sugar’ instead of ‘Mark likes Article X’. Any idea why this might be happening? Cheers.
April 24th, 2010 at 3:09 pm
Hi Mark,
Your site is down for maintenance so can’t see the implementation but <meta property="og:title" content="” /> should pull in the article heading and
should pull in the site name.
It might be that the title tag isn’t working probably – try loading a page and looking at the page source to see if it is generating the title information correctly on the page. If that isn’t pulling in properly then its a coding issue.
Let me know when the site is live and I’ll have a look if you still have a problem
April 24th, 2010 at 5:34 pm
Thanks for the response Adam. I’ve check thed source. The title tag is returning the correct title. The meta property tags are also returning the correct data. The issue appears to be that the facebook like button code either isn’t recognising the meta data or is being over-ridden by something else.
I’m inclined to think it’s the latter, because when I try ‘sharing’ an article using the older facebook system, the correct article title briefly appears and then is replaced by the blog title, in a similar way as described in the above comment. Any thoughts?
April 25th, 2010 at 4:43 pm
What WordPress Add-ons are you using?
All-in-one SEO rewrites the page titles so that might cause some issues or might be another plugin.
April 26th, 2010 at 6:00 pm
[...] written a post on how to implement the Facebook ‘like’ button if you want more [...]
April 27th, 2010 at 10:03 am
Here’s the WordPress plugin:
http://wordpress.org/extend/plugins/like
April 27th, 2010 at 10:32 am
Hi Mark,
I’ve been playing with it and if you don’t use the Facebook meta details above then it will use your page title in Facebook. Hopefully that sorts out your issue?
April 27th, 2010 at 10:39 am
The wordpress plugin above makes it a lot easier to implement on your site. However, it currently doesn’t have the Facebook Meta implemented within it – this means the page title will be what is shown in Facebook eg Adam likes How to add Facebook ‘Like’ Buttons | No Pork Pies
I prefer mine to show the page headings so the Facebook Meta gives me this functionality using the implementation process above – you can use the wordpress plugin to implement the buttons and then add
<meta property=”og:title” content=””/>
to your header.php to implement the meta functionality.
April 28th, 2010 at 10:35 am
Just found a really good plugin to do this. Still doesn’t seem to add the meta data but has a lot more features
http://www.sociable.es/facebook-connect/
April 29th, 2010 at 8:00 pm
Thanks for all your help Adam. I think I’ve found the problem- sort of. In fact, ALL sharing services that scrape the site for metadata- Google Buzz, Facebook, Stumbleupon- are having the same problem. The site’s base domain and tagline- – are overriding any metadata I might place in the header.
It’s very frustrating, and I can’t identify why this is happening. Presumably it’s something in the header.