Facebook has announced its Facebook for Websites service the their f8 developers conference. Along with a bunch of other services is a fairly simple little button you can add to any site called the Like Button. It works in exactly the same way as liking something on your Facebook newsfeed, but it’s for any page on the internet.
This is what the button looks like when it’s put onto a page:
It shows the profile picture of the person who’s viewing the page (if they’re logged into Facebook) and how many other people have liked that page. You can see an example of this on my wife’s site Pea Pilly Bean *.
If you click the Like lutton on any page, it will add a like to that page & post a message on your newsfeed that you liked that page, it looks like this:
On the Like button page on the Facebook developers site there’s a handy too that will allow you to generate the code for the button to put on your site. You can put any url in there & it will spit out code that looks like this:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblog.slaven.net.au%2F&layout=standard&show_faces=true& amp;width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>
You can stick this on your site & it will work. The only problem is that it’s a fixed url. So if you use your site’s homepage url when people click it, no matter what page or post they’re actually looking at, it will always post the link to your homepage. This is fine, but it would be way more useful if it posted that they were liking the actual post they’re on.
Fortunately this is really easy to do. You just need to change the code to this:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']) ?>&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>
This will then generate a link button for the page you’re looking at, rather than for a fixed URL. To install this either paste this code into your WordPress template somewhere, or to make it even easier install the PHP Code Widget plugin which allows you to add a widget to your sidebar that you can put PHP code into. Then just drag the ‘PHP Code’ widget onto your sidebar in the Widgets admin section & paste the above code into it
Click ‘Save’ and you’re done. The Like button will now show on every page, with the button referencing this page the person is looking at.
The only thing you may have to change is the ’450′ value for the width in the code. If you want it to be narrower or wider you’ll need to change this value
I’m sure a more sophisticated solution to this will come out fairly soon, but for now this works just fine. Update: There’s now a bunch of plugins that will replicate this functionality, check the comments of this post for some examples