How to Include a "Like" Button on a Tumblr Theme

By Alan Sembera

Collect likes on your popular posts.
i Jupiterimages/Stockbyte/Getty Images

Make it easier for others to promote your blog by adding "Like" buttons to each of your posts. You can add the regular heart-shaped "Like" buttons for use by other Tumblr users, or you can add Facebook "Like" buttons so people can share your posts on their Timelines. To add the buttons, you need to edit your Tumblr theme. You can also add a Facebook "Like" button on your sidebar so that people can like your blog in general.

Add "Like" Button to Posts

Go to your Tumblr dashboard, click "Customize," and then select "Edit HTML" at the top of the Customize pane.

Press "Ctrl-F" to bring up the search tool, and then type in "{/block:Posts}" to find the end of the code section that controls your post layouts.

Insert a new line just before "{/block:Posts}".

Paste "{LikeButton}" (without quotes) into the blank line to add a Tumblr "Like" button to the bottom of your posts. Alternatively, to add a Facebook "Like" button, copy and paste the following code:

<div><iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp; action=like&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:75px"></iframe></div>

Click "Update Preview" to see how the "Like" button displays on your posts in the preview pane. If you don't like its positioning, move the inserted code up a few lines until it displays to your liking. You may need to try several different times, but be sure to keep it somewhere between "{block:Posts}" and "{/block:Posts}".

Click "Save," and then select "Exit" when you are satisfied with the placement.

Add Facebook "Like" Button to Sidebar

Navigate to the Like Button plugin page on the Facebook for Developers website (link in Resources).

Enter your blog's URL in the "URL to Like" field using the format "http://yourblogname.tumblr.com".

Enter your sidebar width (in pixels) in the Width field.

Click the "Get Code" button, and then click the "IFRAME" tab at the top of the pop-up window. Copy the code displayed in the window.

Go to your Tumblr dashboard, and then click "Customize."

Paste the code into the Description field at the place where you want the "Like" button to appear in your sidebar. Click "Save," and then select "Exit."

×