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!

16 thoughts on “How to Add a Facebook Like Button to your Tumblr Posts”

  1. OMG. I have been trying to add the f-ing utobtn “Share” to my posts for about 2 hours now. I have tried every possible html code I could find and somehow it would never work as I wanted. Until now.In addition, I could even move it from the left side to the right side, something I could not do with other codes.THANK YOU.

  2. thank you so much for this tutorial! i followed your instructions and it worked!!! but SOMEHOW the buttons ONLY appear on the first few posts!!! i have an endless-scroll blog design, PLEASE help me solve this problem! (heelchorus.tumblr.com) thanks a million!

  3. ditto ^
    thank you soo much!
    maybe you could help me with something else also.
    is there any way i could be notified when my posts get liked?

    1. It will not work with all themes. So you can either Change your theme, or tweak your code until it works. I would suggest just changing your theme, because, you could break your theme if you try to change the wrong part of the code

Leave a Reply

Your email address will not be published. Required fields are marked *