Advanced WordPress Like Button Integration

March 10th, 2011 | Tags: , , , | Links: github

The Facebook Like Button has become one of the easiest and most prolific ways of publishing content to a Facebook users friend feed.  This form of publication creates value in three ways:

  • It generates traffic back to the publisher of the content
  • It generates brand awareness from the text and images in the feed
  • It enables rich demographic analytics

I’m going to walk you through how I’ve implemented the Like Button on the popular fashion blog Honestly WTF so that you can publish something like the following to a users feed:

The Like Button interacts with Facebook’s graph based API using a protocol they call the Open Graph Protocol.  The quickest integration is to use their little code generator widget that spits out a snippet of javascript.  However this approach doesn’t allow for the second and third values listed above.

We’re going to use the second approach which requires that you register a Facebook Application.  Once you’ve registered your application and gotten an appid you can load Facebook’s Javascript SDK into the page and turn on Facebook’s markup language XFBML.  Let’s go ahead and walk through how that’s done.

Facebook XFBML Setup

First let’s start with a little theme organization.  I put all of my javascript in a theme subdirectory called /js so if your theme doesn’t already have this directory, I suggest you add it now.  Once you’ve added the js directory, create a file in it called init.facebook.js and just leave it empty for now.  In order to get the Like Button working we’re going to need to load the following three scripts:

  • jquery.js
  • /js/init.facebook.js

WordPress provides two useful methods for loading scripts called wp_register_script() and wp_enque_script(). Add the following code to the functions.php file in your theme to get these scripts loaded:

Now let’s walk through what’s going on here.  First we load the jQuery script which is often already loaded anyway since a lot of plugins use it.  Then we check to make sure we’re not in the admin screen because chances are we won’t need to add Like Buttons there. We then register and enqueue our Facebook scripts.  Finally we add our facebook_sdk_init() method to the WordPress init() callback.

The Facebook SDK requires that you add namespaces and an anchor in every page you want to use it.  I’m going to add them using WordPress callbacks which requires that your theme calls both the language_attributes() function and the wp_footer() callback. If your theme doesn’t call these functions I would highly recommend adding them. With those in place, here’s what we add to our functions.php file.

Now that we’ve got these functions added we’re ready to move on to initializing the app itself. We have to wait until the document is ready to call the FB.init() function to ensure the script dependencies have been loaded and the anchor markup has been added. So open up the init.facebook.js file that we created earlier and add the code below. Make sure to add your appId to the script, otherwise it won’t work.

Once you’ve done that, you can start adding XFBML tags into your theme.  In order to add the like button, try adding this within the loop on the index page:

<!-- Add to any loop in your theme -->

<fb:like href="<?php the_permalink() ?>"></fb:like>

You can find all of the attributes to customize the button on the Like Button page.  Now that we’ve got XFBML parsing working, it’s time for Facebook Open Graph optimization.

Facebook Open Graph Setup

When a user clicks a like button on a page, Facebook needs to determine what it is that the user is “Liking” in order to build the feed entry they publish to the users feed.  You provide Facebook with this information by adding special meta tags to the header of your html document.  Information on these meta tags can be found on the Open Graph Protocol page.

There are probably a lot of ways to configure these meta tags for blogs, and I don’t know if there’s a right way.  That being said, here were the things that I wanted to accomplish:

  • Add individual like buttons to every article (post) on every page
  • Include a thumbnail image, the article title, the blog url, and a short excerpt when posting to a users feed
  • Use default metadata for pages that don’t represent a specific article (post)

Post thumbnails have only been supported since WordPress 2.9 and need to be explicitly turned on in your theme (see next code snippet). In order to generate thumbnail images for every post on the blog, I used a great WordPress plugin called Auto Post Thumbnail.  There are other plugins that also generate thumbnails, and you can always add them manually to your posts from the create/edit post screen.  You do this by setting the featured image:

I decided to write a function that would create the Facebook graph meta tags for me.  That way I could automatically add them to all of the pages on the blog.  So here are the last two functions and callbacks we need to add to functions.php:

This function first defines the default attributes for your blog.  It then overwrites the page specific attributes if it detects that you’re on a single post page.  Finally it generates all of the meta tags and echos them into the page. We attach it to the wp_head() callback function to insert it into our documents.

And that’s it folks, you’ve essentially built yourself a WordPress plugin that does a proper integration of the Facebook Like Button.  Hopefully you’ve found this tutorial useful.  If you have any questions or feedback, please feel free to post in the comments.  If you want to download the test theme click on the github link below.

1 trackbacks

  1. Honestly WTF | ABRAHM COFFMAN Pingback | 2011/03/10