Nigel Whiteoak

Posts tagged Tumblr

Adding Facebook Like Buttons to Tumblr

A friend asked me how to add Facebook Like buttons to their Tumblr blog. Thinking others might ask the same question, I thought I’d just write it up here.

[Updated: Since writing this post I’ve updated my Tumblr theme to an off-the-shelf design with integrated Facebook Like buttons … but did use the method below to add Facebook Like buttons (and Twitter buttons) to my other blog, Best Practice eCommerce]

Hot to add Facebook Like Buttons in 5 Simple Steps

It’s pretty straightforward to add Facebook Like Buttons to your Tumblr blog. Just follow these steps:

  1. Go to http://www.tumblr.com/dashboard and log in to Tumblr
  2. Click on ‘Customize’ - in the right hand menu, with the spanner logo by it
  3. Click on ‘Theme’ in the top menu bar
  4. If you’re not already, click on ‘Use Custom HTML’
  5. Copy and paste the following into the HTML, just before {/block:Posts} 

<iframe src=”http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink};layout=standard&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:450px; height:75px”></iframe>

This adds Facebook Like buttons at the bottom of all your Tumblr posts, no matter what form they take. If you want to change the appearance of the Like button, there’s a tool on the Facebook site that helps you do it here. All you need to remember is that the subject of the ‘Like’, which follows the href= text needs to be {URLEncodedPermalink}: this just automatically makes the subject of the ‘Like’ the URL of that particular post. Clear? If not, just post a comment and I’ll try to clarify.

If you’re interested in this, you might also be interested in my other posts about Facebook Like buttons:


Posts I Liked on Tumblr