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:

Isn’t it ironic that we have a bit of a double-sided coin going on the Internet at the moment.  There’s a huge debate going on between Apple and Google, Flash and HTML5, over proprietary software.  People are clamoring for Apple to open up their platforms to allow all types of programming (Flash, specifically) instead of closing their boxes.  So, what do people do?  They tweet about it.

On the flip side, those tweets you’re sending out can now be used (and monetized) by twitter for any purpose whatsoever.  What’s more, is that if you post a tweet on your site, and it causes you to get ad revenue, Twitter is legally entitled to a share of that, because you are re-purposing their content:

In cases where Twitter content is the basis (in whole or in part) of the
advertising sale, we require you to compensate us (recoupable against
any fees payable to Twitter for data licensing).

Scary stuff, eh? Your tweets, open to the free world, can now be used by Twitter for anything, including making money.  Makes you want to read those TOS clauses more closely.

So, I want to know what you think.  Where do you stand on either front?  Sure, Apple makes more money locking it’s hardware down… or does it?  Or, should Twitter really have as much power as it seems to with it’s latest Terms of Use update?