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 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:

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.