Thesis Tutorial: Adding the Facebook Like Button to Individual Posts for Dummies

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.

About Rae Hoffman

Rae Hoffman aka "Sugarrae" is an affiliate marketing veteran and the CEO of PushFire, a search marketing agency specializing in SEO audits and link building strategies. She is also the author of the often controversial Sugarrae blog. You can connect with Rae via Twitter, Google+ and Facebook.

Sugarrae runs on the Genesis Framework

Genesis Framework

If you’re someone who doesn’t understand a lot of PHP, Genesis will give a ton of functionality that you wouldn’t be able to obtain otherwise with a simple control panel instead of having to alter code. For the advanced, Genesis has incredible customization possibilities via Genesis hooks.

The theme is not only highly customizable, but it has allowed me to run Sugarrae more professionally, with a much more targeted focus on monetization than it ever has been able to achieve before.

You can find out more about Genesis below:

Comments

  1. Meg Geddes says:

    This is great – and this post was actually the first one I tested after Facebook made the changes. I particularly like the fact that you can now specify the image you want associated with the post (with various services I would have ad images show up in my FB shares if I didn’t turn off thumbnails entirely)

    So you’ve got this, and your tutorial on adding the official Tweet button with Thesis hooks; what else do we really need as far as social media buttons?

    BTW, for what it’s worth, I’ve been testing Facebook Like Boxes; as much as I really don’t like the one that displays the faces, I can’t argue with the results. The ‘likes’ jumped through the roof everywhere I added it.

  2. Hi Rae,
    Great tutorial, looks great. One issue – and I’m having it with all the various FB & twitter buttons on Thesis – how do you make the buttons which show on the homepage (on excerpts) share the post they are attached too and not just the homepage url.

    Here’s an example of where this is happening – http://www.beautifulyoubyjulie.com/

    I can get the sharing buttons to work fine on teasers, but not excerpts, can’t find anything over the the thesis forums either, so was hoping you’d know.

    Thanks :)

  3. Actually the link I gave has now switched them off on the HP..

  4. Sorry, not real sure of the question without being able to see an example. That said, I also don’t show buttons on my homepage, so I wouldn’t know without spending time to check it out, figure out how it works and write a custom hook which I wish I could do for everyone who wants to do something more than what I’ve shared, but I can’t. If anyone else knows though, they’re welcome to post the code.

  5. Thank you so much for the very clear step by step instructions. I was at a loss as to how to get it to work till I came on your site :)

  6. Oh p/s while the coding worked like a charm, it played havoc with my stats. I had a sudden influx of entries from facebook and additional code was being appended to my url so nothing shows. I’ve tried reverting to the old iframe code but the problem persists. Guess I might have to remove the Facebook Like button for now.

  7. Definitely one of the better “Like” button tutorials I’ve seen around. Just tested that plugin using a slightly modified version of this method on a different theme and it’s worked a charm. Thanks for sharing!

  8. Rae, thanks for the post. It’s clearly written but for some reason, the Like button isn’t appearing on my site. I don’t expect you to troubleshoot but am curious to know if you have any thoughts about what might prevent the button from appearing. I have quadruple checked the custom function and of course followed the process of registering with FB. Still, nada…

  9. For the record, I did end up taking a quick look at Wesley’s problem via email and the issue was that the single quotes contained a formatting that was messing with the programming. If the code looks exactly right yet it doesn’t work? Always ensure that all double ” and single ‘ quotes don’t contain any accidental formatting. To do this, delete and replace them directly in the custom functions file. #annoyingbuttrue

  10. Thanks for the post, Rae. I messed with several Facebook “like” plugins, and found this solution to be the best for those of us using Thesis.

    I noticed a few days later in Google Analytics that the URLs of my posts that had been liked were showing up a second time, with a “?fb_xd_fragment=…” query string tacked onto the end. This is a known issue with XFBML implementation of the FB “like” button. I went into GA and Google Webmaster tools to keep the 2nd URLs from being tracked and indexed (to avoid duplicate content).

    The issue and solution are described at http://www.searchmarketingman.com/2010/09/how-to-fix-like-button-bug.html. Hope this helps someone!

  11. First off Rae, thanks for the detailed instructions…
    @Brian, the link you gave out to fix the Facebook “like” fragment in Google analytics isn’t working anymore? I’m trying to fix this problem myself and can’t find a good resource?

  12. Thank you for doing this! I’m an absolute idiot with hooks, so hopefully this will work. I just upgraded to thesis 2 and it’s like learning all over again, so I’m crossing my fingers.

Speak Your Mind

*