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:

Plugin Name: Facebook Like Widget
Plugin URI:
Description: Add a Facebook ‘Like’ Button Widget to your post pages. Increase visitors!
Author: AJ Batac
Version: 0.1
Author URI:

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.

Our Specialities

Web Design & Development

From an idea and some notes to a fully functioning website, if you can dream it, Mitch can design and build it!

Twitch Marketing

We show you how to work with the most interesting content creators on the planet - Twitch streamers!

Social Media & Marketing

We give you the tools, training, and resources you need to get your story told on Twitter, Instagram, and more!

Brand Identity Design

A new logo, color palette, or even an entire style guide - we can help with a brand new brand (and the resources to keep your assets in line!)

Content Strategy & Creation

Want to start a podcast? A YouTube channel? A Twtich stream? Take it from an old pro - you've come to the right place!

eCommerce Consultation

Whether it's a digital service or a physical product, we can get you up and selling quickly and easily!

Community Management

Find your tribe and make them your rabid fans. Mitch can help with the technical ins-and-outs of it all!

Contact Greyhawk Digital