Adding a Facebook like button to my WordPress blog
In case you haven’t heard the news yet, Facebook wants to take over the world. Well, eventually. For now, they’ll settle for just taking over the internet. At the keynote for this year’s f8 conference (Facebook’s developer conference), Zuckerberg announced a few changes to Facebook that will essentially allow users to carry their social networks wherever they go, and have the interactions they take part in around the web logged back to their Facebook profiles. One of the key parts of this is the new ‘like’ button. The like button is an iframe that can be added to any page, pure html, that will allow a user to like content on that page. The key thing here is that the user doesn’t need to connect to the site, and and the site will not need any of the user’s personal information. As long as the user is logged into facebook on that browser, the ‘like’ just works. No extra steps. No permissions needed. *In theory* more likes, since it’s a single quick click.
A fundamental part of this change is that it’s supposed to be much easier for developers to work with the facebook platform, so I thought I’d put that to the test and add a like button to this blog (It should be visible on that left column). Hit the read link for details of this endeavour.
To get the iframe code for the like button see the plugin page on Facebook’s developer site. There, you can use the widget creator at the bottom to generate the code you need for a given style (there’s a few customizable options). Once you have that, you can add it to your single.php and index.php in the place you want it to appear. The problem with that code is that it refers to the developer site, which gives you a false count, like this:
The likes count is wrong
The count being wrong isn’t the worst of your problems. When it’s set up like this, any viewer clicking that ‘like’ is actually liking the developer page. You’re losing likes from your readers!
This happens because the URL that is referred to here:
… like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2F& …
is pointing to the developer site. Facebook uses the link to check how many likes that page has. To have a count of how many likes -your- page has, you need it’s permalink. This article details how to do it, but in short, you need to use php to add in the URL of that post to the href parameter. This can be done like this:
… like.php?href=<?php echo rawurlencode(the_permalink()); ?>& …
Now the URL will be the URL for that permalink. Some other CMS’s may have the URL of the current page as a get_permalink function. So this should be easy to convert to whatever you’re using.
The one thing I haven’t been able to do, is have the count to the left of the button, which would fit better (stylistically) on some themes. Hopefully a way to do that will become available (or become apparent to me, if it is already available). Want to try the feature? Like this article :)
9 Responses to “Adding a Facebook like button to my WordPress blog”
Leave a Reply
ftw on April 22nd, 2010
Hi: How long does it take for the number beside the “like” button to change?
I’ve implemented the button on our site, but I’m only seeing my own likes–nobody else’s.
admin on April 22nd, 2010
As far as I know, it’s supposed to be real time. I only see 1 like on my posts (which is from me). That said, I don’t know if it’s just me who’s liked it or if there’s a problem. I’ll test it with a friend’s facebook account as soon as I can and post back.
ftw on April 22nd, 2010
I liked this article, and it shows only my (1) like.
admin on April 22nd, 2010
I also just tested with a friend’s account and the likes are staying at 1 for me … hmm, i wonder what the problem is here? have you had any luck so far?
ftw on April 22nd, 2010
Not yet. I’ve tested my site with multiple Facebook accounts, and they’re all showing only 1 like, even though two of us have liked the post.
And here on your blog, I’ve liked your post, and you’ve liked your post, and it’s showing as only 1 like.
I don’t know. I’ve been searching all morning for a solution to this. If I find anything, I’ll post back here.
Frank
Alan From LearningTheLight.com on April 26th, 2010
Hi all. I’m also having the same problem with the ‘like’ button only showing “one person likes this when I know for 100% sure that more than 1 person have ‘liked’ my various content. I’ve been searching in vain for an answer for a while. Maybe it’s just teething problems with Facebook, as the feature is still so new…? If you find a solution, I’d be really appreciative if you could let me know – will do the same for you if I find out a fix. Cheers.
admin on April 26th, 2010
Hi Adam,
no solution so far, but as far as I understand, the like button only shows your friend’s likes while the like count is low. When it gets big (who knows what ‘big’ is), it starts showing everyone’s. But this seems to only apply to the standard layout one. The button count version only shows 1 like, even when I can see >6 people liked this story when I switch to the standard version with faces. I’m guessing it’s teething problems but I really hope someone at facebook notices and advises us on what’s happening.
If I find out more, I’ll definitely let you know.
Cheers,
Ritwik
Alan From LearningTheLight.com on April 27th, 2010
Hi Adam, thanks for your thoughts and input in this. Still showing as ‘one person likes this’ for me. But I’m seeing other like buttons on other sites where it seems to be working – for example one page on a different photography site shows ’13 people like this’. That doesn’t seem too ‘big’ – but maybe you’re right, maybe anything more than 10 will trigger the count….?
Christian Louboutin on June 4th, 2010
This is an interesting article. Thanks for sharing.