Tag Archives: tumblr development

How to Add a Facebook Like Button to your Tumblr Posts

Here’s how to add a facebook like/send button to your tumblr in three simple steps. This will create a unique “like” button for every post on your tumblr. It’s really cool to do this because you’ll be able to share your own posts on your facebook wall really easily.

  1. Log in to tumblr, go to Customize Appearance > Edit HTML
  2. Paste this code immediately before the </head> tag:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=271140516272162";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  3. Paste this code just before the end of the post content. This is not the same for all themes, but usually it is between the tagsĀ {/block:PostNotes} and {/block:Posts}. Just try pasting it in different places within the code and hitting “update preview” until it looks right.
    <div class="facebook-button"><div class="fb-like" data-href="{Permalink}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div></div>

Make sure to click “update preview” before saving to make sure you don’t break your theme. If you did something wrong or this doesn’t work with your theme you should just refresh the page or close your browser so you don’t save the changes (otherwise you’ll have to install a new theme/reinstall your theme).


Good luck!