Information and advice for healthcare consumers.

Marketing toolkit

How To Add A Facebook Like Button (The Basic Version)

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.

8 Responses to “How To Add A Facebook Like Button (The Basic Version)”

  1. Mick says:

    HI Philip
    We decided to go one step further and add the “Recommend” Button, replacing the “like” button we had initially. These were on every business page on http://www.whoseview.ie and http://www.whoseview.co.uk. The recommend button serves the exact same function as “like” unless you allow for comments within the recommend button.

    Take Wagamama for example
    http://www.whoseview.ie/business/Wagamama-South-Dublin-City-Centre-Dublin-2603.html

    If you click “recommend” this will be pushed to your profile page ONLY and NOT your wall. Similar for the “like” button. However post a comment in the space that appears when you click “recommend” and the page url and link will NOW appear in your wall, giving you significantly more exposure.

    Does FB explain this anywhere? Not really. We discovered through trial and error as other blog posts were not very clear. Hope this helps.

    • Philip Boyle says:

      Hi Mick,

      Thanks for the reply. I have to agree that there are large gaps in Facebook’s own documentation about the like / recommend button, and trial and error seems to be how most people are figuring it out. Hopefully Facebook will get their act together on this soon, otherwise people are going to give up on trying to implement them, or just do it really badly.

      How long have you had them on your pages, and have you found them to be useful?

  2. Fiona says:

    Good post (as are most here). I was just thinking though. Instead of making a facebook account belonging to “a person”, seeing as how you own your mail servers, wouldn’t the easiest thing to do be setup a “FBAdmin@whatclinic.com” mail account, and set up the Facebook page from there? That way you could give multiple people in the office rights to the FBAdmin mail account.

    • Philip Boyle says:

      Hi Fiona. Unfortunately Facebook pages can only be setup from a Facebook account, and Facebook accounts have to represent one real person, not a group, so you’ve no choice other than to use your personal account really. Otherwise, as I mentioned, you run the risk of Facebook deciding that the account you used to create the page breaks its terms and conditions and having it deleted.

      You can make other people you work with adminstrators too, but again using their personal Facebook accounts. It’s a less than ideal situation in my opinion, one that I’m sure Facebook are going to have to address if they want more businesses to use their platform.

  3. kevin says:

    I’m sorry, I am not seeing how to add the like button. I see how to get the code, and I have a group page set up. How to I post the code to the group page?
    thanks!

    • Philip Boyle says:

      Hi Kevin, you don’t post the code to a group page – they already have a like button on them (until you click it to join the group, at which point it disappears).

      The post is about adding like buttons to your own website or blog for instance.

  4. Ailish says:

    Please , need help big time , beginning to pull out my hair . We have a community facebook page , which is the general request to be friend type, i have been trying to change this to a like button so that people automaticaly become friends of the page….. it seems so complex to do this simple step can’t seem to find a simple process to achieve this , can you help. Thank you.

Comment

[Read More Marketing toolkit Posts]