How to Add a Facebook Like Button to Thesis Theme

by Nate Devore · 0 comments

The Facebook Like Button is one of the most powerful tools we have for sharing content with Social Media. But installing it on your blog can be tricky.

With The Thesis Theme (affiliate) we can easily place information where we want via the hook system. Alternatively we can use the custom_functions.php file to add the code as well.

The Goal

We want our blog readers to like each post we create. So we are first going to generate the code for our blog URL and then tell Thesis to display the code before and after our posts. Let’s get started!

Get The Code

1. Go to the Facebook Developers page to generate the code.

2. Copy your blog url and paste it inside of the “URL to Like” box. Then click “Get Code”. You can edit the other settings but not necessary.

3. Copy the iframe src code. It will look like this but with your URL:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmyblog.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Adding The Code to Thesis Using custom_functions.php

4. Login to WordPress and locate custom file editor on the left panel under Thesis. Then click the drop down menu to locate custom_functions.php. Alternatively you can download the file via FTP.

5. In the custom_functions.php file add the following code by copying and pasting it:

/* Facebook Like */
/*** In Single Post ***/
add_action('thesis_hook_before_post','facebook_like_single');
function facebook_like_single() {
if(is_single()): ?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=button_count&show_faces=true&width=250&height=20px
&action=like&font=trebuchet+ms&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:20px"></iframe>
<?php
endif;
}

6. Replace the iframe code with your code from step 3.

7. Click the save button when finished.

You should now see a Facebook Like Button before each single blog post. You won’t see it on the home page.

Other Options

DiggDigg Plugin

If you don’t feel comfortable with the manul option of adding the code, I highly suggest you download Digg Digg. This plugin is by far the most robust social media sharing plugin I have used.

It adds more than just FB share buttons. You can easily add numerous services like Digg, Stumbleupon, and Twitter with compact and normal sized buttons. You also have the ability to place these buttons with a floating social bar next to your posts which maximizes the chances of visitors sharing your content.

Facebook Like Box in Sidebar

This plugin allows you to take your Facebook Page ID and create a Facebook Like Box in the sidebar of your blog.

You can add this to your sidebar by going to widgets panel. Simply drag the widget to the desired sidebar.

Final Thoughts

If you have questions about this, please leave them in the comments below. I would be happy to answer them and help you!

Please re-tweet and FB Share if you found this useful!

Nate is a 24-year-old Internet Marketer & WordPress Guru who helps businesses and individuals understand how to market online with The Social Web. Find Nate on Google Plus

Subscribe to Nate's RSS feed or contact Nate Devore.

Leave a Comment

Leave a Comment

Previous post:

Next post: