I decided a couple of days ago to add Facebook’s like button to this blog and then to our website’s homepage. Seeing as how it’s part of Facebook’s vision of the future of the web I thought it’d be really straightforward to do. It turns out it is, but the documentation on Facebook itself is really unclear so I made a lot of mistakes along the way. Read on and learn from mine so you don’t waste your own time too.
Here are the steps you need to take to get ready to add a Facebook like button to one of your pages, be it a web application, a blog, or something else.
1. Decide who is going to administrate your page
You need a Facebook ID to get this working. Since Facebook’s terms and conditions mean you can only have one account yourself, you either need to use your existing account, or set up a new one for someone in your office who doesn’t have one already. Otherwise you run the risk of having the account with administrator privileges deleted unexpectedly.
Bear in mind that the person who administrates your page may not work for you forever, so be careful who you choose, and ideally you should have more than one administrator.
To get your Facebook ID go to your own profile and click on your Facebook profile picture. Your ID will be at the end of the URL in your browser’s address box.
2. Add Open Graph meta tags
If you want people to like a webpage that isn’t a Facebook page itself then you’ll need to add Open Graph meta tags to its <head> section. The tags you need can be found on the like button page on Facebook. Here are the tags for our blog’s homepage:
<meta property="og:title" content="WhatClinic.com Blog Homepage"/>
<meta property="og:type" content="blog"/>
<meta property="og:image" content="http://blog.whatclinic.com/wp-content/uploads/2010/08/facebook-logo.png"/>
<meta property="og:url" content="http://blog.whatclinic.com/"/>
<meta property="og:site_name" content="WhatClinic.com Blog"/>
<meta property="fb:admins" content="587106975"/>
Go back to the like button page and use their widget to generate the code you need to add the button to your page. There are a few basic choices for font, colour scheme, size and so on, but you’re probably best off sticking with the defaults (except for width, which you should adjust for the width of the page you’re adding the button to).
The iframe version of the code for our blog homepage looks like this:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblog.whatclinic.com%2F&layout=standard&show_faces=true&width=292&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:80px;" allowTransparency="true"></iframe>
There is also what is called the XFBML version of the code which is much simpler but requires you to use the Javascript SDK. The XFBML version would look like this:
<fb:like href="http://blog.whatclinic.com/" width="292"></fb:like>
Once you’ve added the meta tags (including the Facebook ID of your administrator), and added the iframe or XFBML code to your page you should be ready to go.
Adding like buttons to a WordPress blog
Getting the Facebook like button onto every page of your WordPress blog is easy – you could just paste the code you’ve created above into one of your template files or a sidebar widget. There are potential problems with this though, in that you need to specify the URL of the page to be liked, and if you include the like buttons for posts on the homepage that gets a little complicated.
What I’ve done is put the overall like button for the blog in a widget on the right hand side of the page and used a WordPress plugin called WP Facebook Like to add the like button to the bottom of the content on individual posts’ pages.
The only problem with this is that the plugin (and the other one I tested) only added two of the Open Graph meta tags needed. I added the missing (generic) meta tags using the All in One SEO plugin.
Problems
When I set about doing this I found a lot of the Facebook pages were unclear about what was needed to get started. I kept seeing references to having a Facebook App ID. This isn’t necessary to get started with Facebook like buttons. You just need your Facebook user ID as described above.
As an aside, if you are building an app go to the Facebook app setup page on developers.facebook.com and fill in your details. Every time I used it I ended up getting an error page, so I thought it hadn’t worked. By accident I ended up on another developers page at www.facebook.com/developers/ and it turned out that even though I’d received an error message each time I used the previous page, it had actually setup the apps and given them IDs and so on.
I had also just set up a Facebook page for WhatClinic.com just before I started looking into the like buttons. This added a certain amount of confusion to the process too. I added a like button to the website’s homepage, including adding the required meta tags, and without telling me anything Facebook created a new WhatClinic.com Homepage page, which I was the administrator of. I thought this would be confusing for people who had already liked WhatClinic.com, so I deleted this new page and pointed the like button at the original Facebook page for WhatClinic.com instead.
Nothing too difficult in that, but it leaves me with one unanswered question: seeing as I setup the like button for blog.whatclinic.com I should be the admin for it too, but I’m not. This might have something to do with trying to set it up with a Facebook app ID the first time I tried, but now I have no idea who is the administrator of that page (or even if a page exists for it!). I’ll be contacting Facebook support about this and asking them but I’m not holding out much hope for a fast response…
Have your say
Have you added Facebook like buttons to your own app or site? Did it all go smoothly or did you run into some of the same problems? Let us know in the comments below.
Most Recent Comments