studionashvegas | design and social media

Well, I’ve gone and done it – I wrote my first WordPress plugin.  I’m super stoaked on how easy it was, and I may end up doing some more work in the future.

And, for my first number, I tackled the same problem I did in my last post: the new Facebook “like” button.

The way I had inserted was too complicated, and required editing of the core plugin.

Not anymore.

Introducing the “Facebook Like Button” plugin.

Basically, it does one thing, and one thing well: It lets you insert the new Facebook like button either under the content of your blog post, above your comments and other social plugins (bookmarks, etc) or insert it manually via a function/template tag.

Simply activate the plugin and head over to the options menu to control the various options (color scheme, width, height, etc) of the plugin, then sit back and watch as your friends “like” your content.

When a person likes a post, by the way, it ends up in their Recent Activity Stream.

Download Version 1.6 of the Facebook Like Plugin

And, as always, feedback is much, much appreciated

Version 1.6 adds a whole host of options, from height, width, margin, the verbiage, and more.  It makes the process so much easier than just filling in option menus.  Please enjoy!

Changelog:

0.1a – initial release.
0.2a – fixed spacing issue both above and below
1.0: first stable release – added function to add to a template manually (thanks Amber Weinberg!)
1.5 – added the rest of the options FB gives you (minus the button type – I like the faces, and that’s specifically what I designed this plugin to do).
1.6 – for some reason 1.5 couldn’t be downloaded so 1.6 is just a clone to resync the plugin repository.

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:

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

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.

Normally I’m not one to recycle information on the net (I think that we’ve already become a big enough echo chamber without one other voice being added) but I do like this PDF put out by 14 of the best minds in Social Media.  It’s a great read!

Social Media 2009