How to Add Facebook’s Like Button To Any Page On Your Site

Written by Mike on April 22, 2010

This week, Facebook changed their fan pages to, um, like pages. Is that how we’re going to say that? It’s weird. Anyways, now you can say you “like” things instead of being a “fan” of them, including our higher ed institutions.

One other social feature they’ve rolled out is the Like Button, a little widget you can put on any web page and allow your site visitors to interact and say they like it. This action will appear on their news feeds and profile pages, and spread the word about content they find interesting around the web.

What’s interesting to me is the fact that this is much easier for users than using any of the various “share this” type actions, that opens in a new window. Now, it just takes users one click to share that content.

Here’s what it looks like in action. I’ve added a new Like Button to my blog. It looks like this:

It’s blue because I’ve clicked on it already, but as you can see, you will also see if any of your friends have clicked on an item. On your wall in Facebook, the following appears in your activity stream:

It’s an interesting new way to share content – it’s almost like these are little bite-sized interactions, ones that I think will definitely appeal to the more casual user. We hardcore users have been using regular share forever, right?

Here’s how to add it to your site. You can use Facebook’s Like widget builder to set some features up and it will give you either a bit of iframe code or XFBML that you can integrate into your site.

The challenge is that this widget only allows you to create a Like Widget for one page. If you are using PHP or WordPress, Andreas Jacob has come up with an easy way to dynamically have this widget get the current page URL. It’s really a simple bit of code to replace.

If you’re using WordPress, replace the URL string in the code Facebook gives you with this:

[…]like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>

Regular PHP can be done this way. You have to do a quick URL build first, hence the two lines.

<?php $url = “http” . ((!empty($_SERVER['HTTPS'])) ? “s” : “”) . “://”.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>

Once you have the current URL in a variable, edit your Facebook code, replacing the URL string just as you did above with this:


[…]like.php?href=<?php echo urlencode($url); ?>

I’m sure it would easy to get the current page URL from ASP, Ruby or any CMS platform. Try it out and let me know what you find.

One more thing…why not try it out by liking this post right below this paragraph? Thanks in advance.

Posted Under: facebook, Social Networks

19 replies to “How to Add Facebook’s Like Button To Any Page On Your Site

  1. Todd

    I logged into facebook and “liked” this post. The button turned dark blue and said “Todd Sanders likes this blah, blah, blah.” However, when I logged out of facebook and refreshed the page the button went back to the lighter blue and said “Be the first to blah, blah, blah.” I did this process twice with the same outcome. Guessing it has to do with my privacy settings. My facebook profile shows that I do indeed like this post. :)

  2. robinteractive

    Meebo Bar has already incorporated the Facebook like feature, and I suspect it won’t be long before Wibiya, Apture, gigya, Skysa, etc., add a similar feature if they haven’t already.

    That said, if a (college) Web site isn’t willing to jump on the social bar bandwagon site-wide, the individual buttons can be a more acceptable, and targetable, approach. Some “set-it-and-forget-it” effort can definitely give a news article, blog post, etc., additional exposure.

  3. Georgy

    Hah, I beat my head against the wall this morning trying to figure out how to do this. Thanks for the post!

    The blog I maintain is run in Movable Type, so the MT solution is:

    like.php?href=[open bracket]<$MTEntryPermalink$[close bracket]

  4. Tony Whittaker

    it’s confusing now we have ‘like’ regarding posts and ‘like’ on a fan page, meaning ‘become a fan’. What I want to have is a ‘become a fan of our fanpage’ button on my main website. Is there any way to achieve this I wonder?

    best wishes and thanks

    Tony

  5. Robert

    I like this feature – but as fan pages / public profiles like pages now also use the word “like”, I half-assumed that any click on such a button automatically translates into becoming a fan / connecting with I mean liking a Facebook page / profile THINGIE.

    Erm.

    If you know what I mean.

    It has two effects:

    1) I become reluctant to click the button when I see it outside FB, assuming it will automatically subscribe me to something inside Facebook
    2) if I do click on a button and am not automatically subscribed to something in Facebook, I end up wondering what was the point, for me? Do I really want to be the person doing word-of-mouth marketing for someone else at the risk of alienating friends? I’m already at the point where I want my Facebook news feed to contain only status updates and photos, and nothing else, due to too many application messages and uses of the FB Notes feature.

  6. Robert

    Postscript: Thanks for the post, though! Much appreciated!

    I am merely commenting about Facebook’s decision above, not about this very useful blog post.

  7. Tony Whittaker

    I experimented with adding a Like button on my own website. But I see a big flaw. If you visit a fan page you have already become a fan of, the fan button is missing, obviously. But if you visit a site with a Like button on it, and you are already a member, clicking it removes you. I had set up a test that also showed the number of fans. Clicking it changed its colour, and I could see the number of fans toggling up and down by one, as I repeatedly clicked it. I double checked and yes, I was unfanning myself.

    So I did not proceed with using it, because I think it highly likely that some people may forget if they are fans or not, will click again to make sure, and be removing themselves.

    Until this issue can be fixed, I’ll not be using it!

    best wishes

    Tony

  8. Irina

    Hello

    Do you know if there’s a way to know who else cliked on the like button, besides your facebook friends?

    Thanks

  9. sanjay

    hi! i am ussing this tool on addthis.com, however i want to know how can i monitor who clicked the like button on my website?how can i know if someone clicked it the unclicked it again..thanks again for posting! hope to receive an answer from you guys!

  10. Tony Whittaker

    The way FB have it now, if the button is dark blue, someone already likes the item. If they click on it again, they unlike it.

    So you could if you wished include a short note to say this.

    Tony

  11. sanjay

    Well, what i wanted to know is how will i know who clicked the like buttion, is there any records or reports for that? all i want is to monitor the people who clicked it thanks!

  12. Gerard

    Hello. I don’t know how to put the code for the box count. It works for me for the button count, but I want put the box count near to tweetmeme button with counter.

Comments are closed.