How To: Add a Facebook Share Button to your Thesis Blog

Thesis makes adding social integration to your template really simple through the provision of an abundance of “hooks” that allow you to attach custom functions to them. Using these hooks you are able to customize certain parts of your theme without digging around in the actual theme files. In this how to, I will show you how to add a Facebook Share button using the Facebook Share Widget. Best of all, there are no plug-ins involved anywhere — so only your own code to maintain.

Adding a Facebook Share Custom Function to Thesis

Using the Thesis Custom File Editor function, open and edit the file “custom_functions.php”. You have to be fairly careful when you are editing this file to ensure that you are not making any typos before you use the “Big Ass Save Button”, else you will receive a white screen of death for your blog (assuming your host has turned off sending PHP errors to the browser – if he has not, find a new host).

function custom_facebook_share_button_byline() {
<div class="fb_share_button">
    <a name="fb_share" type="button_count" share_url="<?php the_permalink() ?>"
      href="http://www.facebook.com/sharer.php">Share</a>
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
add_action('thesis_hook_byline_item','custom_facebook_share_button_byline');

If all is well, you should not have a Facebook share button appearing just below the byline of your Thesis blog. You will notice that I wrapped the button code in a <div> with the class fb_share_button. You can use this class to create CSS rules to position the button at a different place in your blog, or add or remove margins or padding. The CSS rules need to be added to custom.css, else you will break the layout when you upgrade thesis.

This why Thesis is such an incredibly useful framework to use for a blog, if you want to spend more time blogging and less time tinkering with the interrelated complexities of your blogs look at feel.

Customizing the Share Button

The Facebook share button that is provided by facebook has a number of different layout styles that you can control simply by changing the value of the type attribute of the anchor (<a>) tag in your custom_function.php file. For example, setting it to box-count will change the button to display in a way similar to the twitter button on this article.

Refer to the “Styling your Share Button” section on the Facebook Share wiki for a complete list of how to make this button appear in different ways.

If you liked this post, and found it useful (incidentally you can add other social buttons to Thesis in a similar way) then tweet and share this post please