Add A Facebook Like Button To Your Thesis Theme

thumbs up facebook like button

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 wordpress.org, 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

The HTML

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="http://www.facebook.com/plugins/like.php?href=<?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="http://www.facebook.com/plugins/like.php?href=<?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>
</div>
<?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.


The CSS

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 {
  padding:5px;
  background:#CFE7FF url('images/facebook_32.png') no-repeat 5px 7px;
  border:2px solid #3b5998;
  width:85%;
  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

Get The Next Article Sent to Your Inbox

Don’t miss the fun! Join the other awesome folks who subscribe to improve their website and content. No lame spam will be sent!

* indicates required

27 comments… add one

  • Manny Hernandez April 22, 7:55 pm

    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?

    • Jim April 22, 8:05 pm

      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 ThesisHacker.com 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!

  • Steve April 22, 8:08 pm

    Awesome stuff! Nicely explained and so simple thanks to Thesis! Cheers!

    • Jim April 22, 8:13 pm

      Thanks. Thesis rocks it again!

  • Thomas April 22, 11:05 pm

    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?

    • Jim April 23, 8:55 am

      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.

  • tiggsy April 23, 2:45 am

    I just turned this into a plugin. If you’d like it, drop me a line.

    • Jim April 23, 8:29 am

      Feel free to post a link and share it.

  • Nate April 23, 1:30 pm

    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.

    • Jim April 23, 1:36 pm

      Let me know how it works for you.

  • Manny Hernandez April 23, 1:48 pm

    Thanks so much for your help with this, Jim!

    It works like a charm: http://askmanny.com/

  • Nate April 23, 2:06 pm

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

  • Nate April 24, 4:39 am

    Thank you!!! Works great!

  • Manny Hernandez April 26, 9:36 am

    Jim,
    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?

    • Jim April 26, 9:56 am

      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.

  • Bottomless April 27, 12:44 pm

    Here’s the Wordpress plugin:
    http://wordpress.org/extend/plugins/like
    No coding necessary, you can customize the look and placement of the button in the settings interface.

    • Jim April 27, 7:36 pm

      Looks good! Thanks for the link. It seems to be a plethora of plugins for this now!

  • Neicole May 6, 2:45 pm

    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.)

    Neicole

    • Jim May 14, 11:54 am

      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!

  • Tanmoy May 6, 8:11 pm

    Great Job. Thanks for sharing with us.

  • Mike May 10, 3:15 pm

    How did you get the blue box around the like button?

    • Jim May 14, 11:53 am

      The magic of CSS! :) If it’s not working as copied above, let me know.

  • Shirley September 8, 9:05 pm

    using this in my blog now. Thanks for sharing!

    • Jim September 8, 9:15 pm

      Great, you’re welcome. Looks good!

  • Nasif April 26, 5:55 am

    Great way to add facebook like button without the use of plugin. Thanks for the tutorial :)

  • Dick December 29, 8:55 am

    Thank you very much for your post. It was very helpfull.

Leave a Comment