How to Add a Facebook Like Button to Tumblr


We’ve received many questions wondering how to add the most popular button on the internet, the facebook Like Button on Tumblr, this could easily increase traffic to your Tumblr Blog through Facebook visitors. Don’t forget that you ca also add a Facebook Status Box on Tumblr.  Read the tutorial.



UPDATE: We’ve remade this tutorial to add a facebook like button to Tumblr since the old one was just outdated and didn’t work properly on most Tumblr Themes. With this new method, you will be able to control what’s shown and what not when someone presses the like button in any of your Tumblr posts.


How to Put a Facebook Like Button on your Tumblr Theme.

  1. Sign in both to your Tumblr Account and your Facebook Profile before you do this.
  2. Go to Customize Theme >> Edit HTML and find the following chunk of code

  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


  4. Replace the code above with the following code, that allows the facebook like button to display correctly. After that, Update Preview (don’t close it yet, we still need to paste some more code)

  5. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">


  6. Now, right before the tag, paste the following Facebook button code, that controls which parameters to send when someone clicks on the button (image, description, url, etc). Update Preview, but don’t close it yet.

  7. <!-- START For Facebook Open Graph -->
    {block:PostSummary}
    <meta property="og:title" content="{PostSummary} - {Name}" />
    {/block:PostSummary}
    <meta property="og:url" content="{Permalink}" />
    <meta property="og:type" content="article" />
    {block:Posts}
    {block:Photo}<meta property="og:image" content="{PhotoURL-250}" />    {/block:Photo}
    {block:Text}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Text}
    {block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}
    {block:Quote}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Quote}
    {block:Link}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Link}
    {block:Chat}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Chat}
    {block:Audio}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Audio}
    {block:Video}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Video}
    {block:Answer}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Answer}
    {/block:Posts}
    <meta property="og:description" content="{MetaDescription}" />
    <!-- For Facebook Open Graph END -->


  8. Now, where you should insert the Facebook like button exactly?. As we said several times each time that you need to embed a button, it depends on the Tumblr Theme, but basically, the code should go always before each post type closing tag (they are listed below). Go to customize Theme >> Edit HTML, look for each one of them and always paste the FB button before the tag. This doesn’t mean that it should go right before, since there could be more code, like the ones for notes and tags, that could make the button position look horrible.

  9. {/Block:Photo}
    {/Block:Photoset}
    {/Block:Text}
    {/Block:Quote}
    {/Block:Link}
    {/Block:Chat}
    {/Block:Audio}
    {/Block:Video}
    {/Block:Answer}


  10. Once you find these tags, it’s time to put the button where you consider it more convenient, here is the Facebook Like Button with HTML5, almost all major browsers accept this code.

  11. <div id="fb-root"></div>
    <script>(function(d){
      var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js#appId=236186013100076&xfbml=1";
      d.getElementsByTagName('head')[0].appendChild(js);
    }(document));</script>
    <div class="fb-like" data-href="{permalink}" data-send="true" data-width="450" data-show-faces="true"></div>


  12. Update Preview >> Save >> Close. Always check your tumblr posts if the facebook like button is correctly displayed.

You can also add a facebook fan box to Tumblr in case you already have a Facebook Fan Page.

24 Responses to "How to Add a Facebook Like Button to Tumblr"

Add Comment
  1. toonmonk

    January 16, 2011 at 2:40 am

    This is a handy quick solution!
    Thanks!

    [Reply]

  2. Holly

    October 22, 2011 at 8:58 pm

    Got the facebook like button, but get an error when I use it. Dang it.

    Note, the tag {/blocks:Posts} was not in my HTML (theme minimalist). Closet thing is {block:Posts} so I pasted line of code above it. Replaced the copied/pasted quotation marks with keystroke quotation marks, too.

    Never edited HTML before. Can you tell? Please help with this one thing. Thanks.

    [Reply]

  3. Kimberlyy

    November 11, 2011 at 1:14 am

    how to add like a “Facebook” & “Twitter” thing on Tumblr, & people can just click it, & it would take you to your Facebook/Twitter.

    [Reply]

  4. ej

    November 25, 2011 at 11:21 am

    Is this still valid? I can’t find {/blocks:Posts}

    [Reply]

  5. Hellana

    November 26, 2011 at 1:38 pm

    This doesn’t work on my blog,
    I made every step you described and paid attention where I copied the codes but it doesn’t work.
    I am using the solstice theme, made by Jake Paul.
    Could you help me please ?

    [Reply]

  6. petra marton

    March 13, 2012 at 6:21 am

    Hi, it seems like i can’t find the chunk of code

    Is it possible that it has to do something with my theme?
    Any suggestion or assistance is much appreciated.

    [Reply]

  7. Mimi

    March 31, 2012 at 10:58 pm

    i cant find this code anywhere. i cut and pasted all the code from my page onto a word doc and searched and still couldnt find it. is there another way? or something i am missing?

    [Reply]

  8. Aline

    April 19, 2012 at 12:56 pm

    i can’t find this tag:

    ???

    i only have this one before my head:

    do i replace this to be able to insert facebook like buttons???

    i really hope you can help me … the google plus button worked fine! :-)

    [Reply]

  9. David

    May 19, 2012 at 5:04 am

    Thank you for the tutorial! What part of the code do I have to change to use the “button_count” version verses the “standard”. I’m just trying to avoid having the “Be the first of your friends to like this.” next to the button. :)

    [Reply]

  10. David

    May 19, 2012 at 5:26 am

    nevermind figured it out…

    added “data-layout=”button_count” between data-send=”true” (…HERE…) data-width=”450″

    …It doesn’t change it to box buttons but it removes the phrase next to the button.

    [Reply]

  11. Thomas

    June 28, 2012 at 10:58 pm

    Hi there,

    i have tried your solution and it worked fine exept with infinite scrolling. same problem if you use the addthis widget. I am searching for days to solve that problem but couldnt find a solution yet. Some posts i found via google say you must add an code to reload the .api file and that that code has to be placed in the ajax section of your HTML Code, but there is no ajax section in the HTML code of my blog. Only a link to the infinite scroll javascript by Cody Sherman. Maybe you can help me out with this problem. Thank you!

    [Reply]

  12. shitcray

    July 4, 2012 at 3:10 am

    I can’t find the code? even when i crtl+f to search for it. Is it the Theme I’m using?

    [Reply]

  13. Alex

    July 10, 2012 at 4:41 pm

    Maybe I don’t know what i’m talking about here.. but

    Is there any way that we don’t have to add it to every post?

    [Reply]

  14. snappyface

    July 27, 2012 at 3:14 pm

    What do you mean ‘before the tag’? in step 4? Could you please be more specific! Thankyou.

    [Reply]

  15. lifepreneur

    August 2, 2012 at 7:13 pm

    I love the tutorials, I followed this tutorial all the way through, but nothing is showing up on my blog. Also, I followed your ‘add twitter buttion’ instructions and it worked! The only problem is that when ever I click on one status, it tweets all status’. Pease help me!

    [Reply]

  16. Guy Manchester

    August 17, 2012 at 10:15 am

    there is no line of code like: in my sites HTML.

    [Reply]

  17. redeft7

    September 2, 2012 at 1:38 pm

    In your second step you say put the following code before the tag. What tag? The tag? I’ve done all the steps and the button isn’t showing up, and I’ve been very meticulous. I didn’t delete anything by mistake. I went back and checked against the original html.

    [Reply]

  18. KikiT

    November 8, 2012 at 2:26 am

    Hi. Just had a question as a complete HTML noob: in point 4, you say “Now, right before the tag, paste the following Facebook button code” – to which tag are you referring?

    [Reply]

  19. Christen

    January 6, 2013 at 11:23 pm

    I cannot find the original code to replace with the other code in my HTML, are there any more recent instructions?

    [Reply]

  20. Katja

    January 31, 2013 at 12:01 am

    Hi, Can you please explain how can I remove the “Be the first one to like…” text and the Send button? I know there is a way of reducing the width of the Like container so that only “Like” is shown but I have no idea how to do it.

    Thank you.

    [Reply]

    Mr. Tumblr Reply:

    Try this solution. http://stackoverflow.com/questions/4348235/how-can-i-make-the-facebook-like-buttons-width-automatically-resize
    Also, if you are creating the code directly from facebook official like plugin page, make sure you choose a shorter width in the check box
    http://developers.facebook.com/docs/reference/plugins/like/

    [Reply]

  21. Paulina Platkowska

    February 10, 2013 at 1:12 pm

    How do I make it so that my posts are the ones liked on facebook?

    [Reply]

  22. AMoD

    February 21, 2013 at 9:06 am

    Sorry but I don’t get step 4, “right before the tag”…. which tag? Sorry I’m totally new to programming

    [Reply]

  23. caro brown

    April 9, 2013 at 7:08 pm

    This has been the only tutorial that worked for each post! (the result of the other tutorials was that every facebook button displayed the same information!)

    thank you so much!

    [Reply]

Submit a comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>