How to Add a Facebook Like Button to TumblrTumblring

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.

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

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

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)

<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">

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.

<!-- 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 -->

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.

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

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.

<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>

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.