Backburner Theme

With the release of Backburner 1.1.2 I changed the Facebook share functionality to the new Like button that lets visitors share any Tumblr post to their friends on Facebook with one click. The $19 premium theme, Backburner comes with support for Facebook Like and Twitter retweet (through TweetMeme) as well as additional updates down the road.

If you’re looking to add the like button into your own custom theme the process is pretty straight forward.

Customize Your Button

Go to Facebook’s Developers site and customize the appearance and functionality options for the Like button.

• URL to Like - This is the URL of you post’s permalink.  Tumblr recently added variable that returns the URL encode version of the permalink - {URLEncodedPermalink}
• Layout Style - Backburner uses the button count style because of the limited space in the share this overlay, but if your theme has the room you can use the standard style that shows additional information.
• Show Faces - This option shows several of the profile pictures of the other people who liked this post.
• Width - If you’re using the button count style you can get away with a width in the 75-100px range.
• Verb to display: Give you the option to label the Like button as “like” or “recommend”.
• Font - Allows you to select the font you want to use for the Like button.
• Color Scheme - Depending where the button will be placed you can choose a light or dark scheme that better suits your design.

For reference here’s Backburner’s Like button HTML code:

<iframe src="http://www.facebook.com/plugins/like.php?href=
{URLEncodedPermalink}&amp;layout=button_count&amp;
show_faces=false&amp;width=98&amp;action=like&amp;
colorscheme=light" scrolling="no" frameborder="0" 
allowTransparency="true" style="border:none; 
overflow:hidden; width:98px; height:px"></iframe>

Insert IFrame Into Your Theme

After you have your customized HTML code for the Like button you will just need to place the code within Tumblr’s Post loop.  For example…

{block:Post}
...
<!-- Insert HTML code from Facebook -->
{/block:Posts} 

When you are adding in the HTML code make sure you place it outside of the Text, Photo, Audio, etc post blocks so that you only have to add it once for it to show up on the index page as well as the permalink pages.