thumbs up facebook like button

Add A Facebook Like Button To Your Thesis Theme

The Facebook like button is here and is potentially going to be huge.  Do you want to add one to your website?

If you already have the awesome Thesis theme framework, this will be easy to do without having to touch any .php template files directly. If you do have Thesis, I also recommend using the Thesis Openhook plugin, it make working with hooks simpler and “safer” than ever.

Note: I see there are now a ton of Like Button plugins on, in fact there are tons of them. So if you want another way to add this on your blog or if you don’t have the remarkable Thesis theme (you don’t!?), it might be another way to go. However, the main downside to plugins, in general, is plugin-bloat and overhead during page access. It may impact page speed and also depending on how well the code was written may inject some extra CSS into the document head, bulking up your pages. So the tutorial below is still a viable method for adding a Like button.

I have replaced my old post subscription footer with a new footer where I include the Facebook Like button. As shown here:

facebook footer


You can go to the Facebook site and generate your own customized code here, or you can just cut and post this snippet below:

<iframe src="<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=lucida+grande&amp;colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Note the bolded section is *not* created by the Facebook widget generator, this is an addition that will enhance the specific link to point directly to your post. So if you generated code from Facebook, replace the url with the bold text above.  [Thanks to Andreas Jacob for this idea.]

Assuming you want to add this just to your posts (not pages or the home page), then add the following snippet into the OpenHook plugin section named “After Post” (or the thesis_hook_after_post if you are editing the custom_functions.php).

<?php if (is_single()) { ?>
<div id="fb">
<iframe src="<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>
<?php } ?>

Note: Be sure to select the checkbox to “Execute PHP on this Hook”.   Don’t forget to save the changes.

The div section will allow us to style this into a eye-catching box, which we’ll do next.


Go to the Thesis Custom File Editor and work on the custom.css file.  I presume you’ll want to customize this, be original. This is just for reference to get you started.

Add the following section somewhere in the custom.css file:

  .custom #fb {
  background:#CFE7FF url('images/facebook_32.png') no-repeat 5px 7px;
  border:2px solid #3b5998;
  margin: 0 auto 20px auto;
 -moz-border-radius: 5px; -webkit-border-radius: 5px;
.custom #fb iframe { height: 25px; margin:5px 0 0 45px;}

You can see there is a background image for the Facebook logo specified. If you want to make it easy, right click on the one on this post and save it to your machine and upload it to your Thesis custom images directory.

Save your changes to the custom.css file.

Go to any post page on your site and it will be displayed simiarly.  Now go write amazing articles that everyone will like and you will be loved by all.

Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

29 thoughts on “Add A Facebook Like Button To Your Thesis Theme

  1. Pingback: How to add a Facebook “Like” button to your Wordpress blog?

  2. Manny Hernandez

    Thank you so much for writing this post, Jim! I just shared it on my blog. Do you know how we can add the button to our Thesis theme, so that it can appear on blog posts at the home page level?

    1. Jim Post author

      Glad it helped. There are a lot of variations to get this on the front page. I would take a look at this hook map at to figure out where you want it to go. It may depend on if you display full posts on the front page or just teasers, etc. Playing around and experimentation always help too. :) Good luck!

  3. Thomas

    Thank you for the informative post. If I may: how do you make the like button appear on the posts on your home page, without first opening a specific post?

    1. Jim Post author

      The easiest thing you can do is just remove the conditional statement block

      if (is_single())

      from around the code I provided. It will then display in any full posts on the home page as well. If you want it in the teasers too, just add the code (without the conditional statement) to the hook After Teaser [thesis_hook_after_teaser] section.

  4. Nate

    Cool stuff! I added mine to the top under the post title. For whatever reason it sits way too low and is hard to see if i add it below the post. We’ll see how it works in that position.

  5. Nate

    its showing up basic, even though I copied your code for the “box” around it and uploaded a FB .png too. hrmmmph!

  6. Manny Hernandez

    Sorry to bug you. I can’t figure out what is causing my entire right side bar to be pushed below the entire blog, as a result of introducing the Like button. Any pointers?

    1. Jim Post author

      Not really sure without digging into the code, but I would guess maybe the width of the default like button’s iframe (plus padding etc.) could be too wide for the content area? Check your widths and/or go create a new button on Facebook, specifying a shorter width for the iframe. If that doesn’t fix it, feel free to shoot me an email from the contact form.

  7. Pingback: Is Facebook Like Button the New SEO?

  8. Neicole

    Hi, Jim. This is great, thanks! I’m having some problems, though. I’ve got a Like button in a sidebar widget, and I’ve used your code to put one above each post. But when I use the Like button above a post, it’s not taking the individual post ID. It’s liking the blog.

    Now, I’m using Open Graph and have added the appropriate meta tags to my head area. It seems to be picking those up, instead of the post name. I really want to have both items–Like an individual post and Like the blog as a whole. Any suggestions? (I’m using the iFrame.)


    1. Jim Post author

      Ah, you are using a more complex method. I haven’t looked much into the full implementation, but I plan to check it out soon. I’ll update this post if I find a better method. Thanks for pointing out this issue!


Leave a Reply

Your email address will not be published. Required fields are marked *