I don’t think I’ve ever claimed to be super technical. To my mom, I’m beyond technical. To my friends, I’m super technical. To programmers, I know enough to be dangerous to myself and their code. ;-)

Thumbs upWhen I first started using the Thesis theme years ago, hooks scared me.

But I got Pearson to show me the ropes and wrote Hooks for Dummies so that other folks like me could learn as well.

Yesterday I read a great article by Greg Finn over at Search Engine Land that discussed how the “like feature” has changed and how site owners can essentially “pimp” the like button to show your links on Facebook with the information you specify.

However, the title – How to Put the Facebook Like Button on a Site was a wee bit misleading. In that it told me what meta tags could be added TO my site to influence the button and recommended a plugin to do it for WordPress sites automatically. However, if did not say anything about actually putting a “like” button on your site, aside from linking to Facebook’s how to add a like button page. (That said, the post rocked, read it… now. I can wait.)

Now, when the “like” button first came out and was hailed as the newest developer of explosive traffic, I looked at it. And I remember trying to install it and seeing that the official Facebook instructions only told me how to add a like button for my SITE as a whole and not my individual posts. Short on time (and frankly interest) I moved on.

But the article yesterday reminded me that not only has this feature not gone away, but it’s now becoming more of a “staple” and it’s time to sit down and learn it. So I start with the awesome plugin recommended by Greg’s article, WP-ODG. Downloaded it, installed it and was instantly met with a screen that asked for the following two details:

1. A Facebook Platform application ID that administers this site
2. A comma-separated list of Facebook user IDs that administers this site.

[blank stare]

What the hell are those? Now, next to the second request was the following: “You can find your user id by visiting http://apps.facebook.com/what-is-my-user-id/” which worked exactly as promised. A click or two and I had my user id. But what the hell was a platform application id? (All you Facebook developers can control your laughter now please.) Frankly, I’m a “normal person” and not a Facebook developer. I had no idea what the hell a platform application id was OR that it was even something related to being a Facebook developer.

But I needed it. DAMN IT.

So I went searching and found, quite honestly, mainly posts saying “add the like button” which linked back to the (useless to me) Facebook instruction page. But after a while, I finally stumbled across this post which while explaining a lot of technical shit that was over my head, made one thing crystal clear:

The Web page or blog post to which you will add Facebook’s social plugins or other features that interact with Facebook’s Graph API will be viewed by Facebook as an “application,” which allows the page or post to use the JavaScript SDK. Here is the drill… While logged in to Facebook, go to Create an Application page.

Glory be. So I clicked the link and filled out the (incredibly short list of) requested information and Facebook spit back the following information to me:

Sugarrae is now registered with Facebook. You can edit your app settings at any time in your Developer Dashboard.
App Name: Sugarrae
App URL: http://www.sugarrae.com/
App ID: [numbers here]
App Secret: [numbers here]

Back to the plugin. So I filled out the requested fields and that was it. It added the meta information to each individual post on my site (yay!) but it didn’t add a damn button anywhere (WTF) nor did it provide code for me to do so manually (sigh.)

Back to searching for how to add a Facebook like button to individual site pages. I see some recommendations for plugins and most of them have multiple issues cited by users (or attempted users.) I immediately decided “screw this” and altered the code on my own, created a function (hook) to call it in Thesis and BOOM. Done. No bullshit. Long story short (if I’m going to save you frustration, I’m damn sure venting mine first):

How to add a Facebook Like button to individual posts with meta data using Thesis

A. Download and install WP-ODG
B. While logged into Facebook, fill out the form to make your site an application
C. Also while logged into Facebook, get your user id by clicking here
D. Add the numbers you got from steps B and C into the WP-ODG setup page form and click save
E. Go the Facebook “Like” button page and generate a button that fits your styling desires (make the URL to like your main page for now) – you only need to complete step 1 of this process, step 2 is handled automatically site wide by the plugin you installed in step A above
F. Copy and paste the XFBML code, which should look something like this:

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”http://www.sugarrae.com” layout=”box_count” show_faces=”false” width=”450″ font=”tahoma”></fb:like>

G: Alter the code to change the URL being called (in this case http://www.sugarrae.com) to code that will dynamically generate a URL for each individual post using the WordPress Template Tag for an individual post URL:

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”<?php get_post_permalink(); ?>” layout=”box_count” show_faces=”false” width=”450″ font=”tahoma”></fb:like>

H: Create a function in your custom_functions file that looks like this with the code you made in step G above replacing the code referenced in the below function (note, the function below is written so the “like” button will only qappear on single post pages):

function facebook_like() {
if (is_single()) {
?>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”<?php get_post_permalink(); ?>” layout=”box_count” show_faces=”false” width=”450″ font=”tahoma”></fb:like>
<?php
}
}

I: Call the function so it appears with whatever Thesis hook you’d like it to appear (on my own blog, it appears after the byline for each post). For the sake of this example, we’re going to tell Thesis to put the “like button” AFTER the post content:

add_action(‘thesis_hook_after_post’, ‘facebook_like’);

J: This last step isn’t “required” but it is highly recommended. The plugin automatically calls a default thumbnail image to appear next to your posts when someone “likes” it. The image is located at:

http://www.YOURDOMAINHERE.com/wp-content/plugins/wp-ogp/default.jpg

The default image dimensions are 152X152. I’d recommend creating a default image you’d like to appear next to your posts (your site logo maybe?) and uploading it to the aforementioned folder with the name “default.jpg” so it replaces the generic one used by the plugin (easiest method to achieve the desired results).

That’s it.

Your final code will look something like this:

function facebook_like() {
if (is_single()) {
?>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”<?php get_post_permalink(); ?>” layout=”box_count” show_faces=”false” width=”450″ font=”tahoma”></fb:like>
<?php
}
}
add_action(‘thesis_hook_after_post’, ‘facebook_like’);

Hopefully this helps some other non techies out there add the like button to their site. If this information was already published in “plain speak” elsewhere on the web, I damn sure was unable to find it.