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.