Tutorial, WordPress

Adding a Facebook “Like” Button to WordPress – the (Somewhat) Easy Way

UPDATE: I managed to write this into a plugin – Facebook Like Button

Since Facebook announced a few days ago that you would be able to use its OpenGraph technology to “like” pretty much anything on the Internet, I took it upon myself to test out a few solutions for adding a “Like” button on the site.

It turned out to be fairly easy, but not as easy as just adding a plugin and doing forth (at least, it’s not yet, anyway).

Our Plan of Action:

  1. Download and Install the plugin
  2. Editing the core file to allow for correct width and color scheme

Step 1: Downoading the Plugin

I looked through quite a bit of plugins to find this one, and I had to get it from his website because it’s an alpha release, but the Facebook Like Widget does it cleanly and with little fuss.

Step 2: Customizing the Plugin

OK.  Editors note: normally I do not advocate editing the core of a plugin.  Why? Because when you update (and you should!) it will over-write what you did.  However, since this is an alpha release, and I’m almost positive the next changes will allow you easily do these changes, I think once or twice is ok.

You’re going to want to click into Plugins > Editor, and choose the “Facebook Like Widget” plugin from the list.

There’s literally about 20 lines of code:

<?php
/*
Plugin Name: Facebook Like Widget
Plugin URI:
http://allanjosephbatac.com
Description: Add a Facebook ‘Like’ Button Widget to your post pages. Increase visitors!
Author: AJ Batac
Version: 0.1
Author URI:
http://allanjosephbatac.com
*/

function add_facebook_like($the_iframe = ”)
{
    $the_perma    = rawurlencode(get_permalink());
    $the_iframe    .= ‘<div id=”facebook_like”><iframe src=”
http://www.facebook.com/plugins/like.php?href=’.$the_perma.’&amp;layout=standard&amp;show-faces=true&amp;width=600&amp;action=like&amp;font=arial&amp;colorscheme=dark” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:600px; height:auto;”></iframe></div>’;
    return $the_iframe;
}

add_action(‘the_content’, ‘add_facebook_like’);
?>

The bold, color coded areas above show the areas you can change. The width corresponds to how wide your blog is.  if you don’t know, then just leave it at the default (450px) and you should be OK.  However, your friend’s “faces” won’t go to the edge of your content.  In yellow is the “color scheme”.  If you have a light background, choose “light”.  If you have a darker background, like my site, choose “dark”. 

That’s it – the like badge will show up at the bottom:

image

And will also show up on your friend’s “Recent Activity” stream:

Capture

Keep in mind, this is not the most elegant solution, but until others come, this is a great way to get it on your site quickly and with very little editing.