How to add Facebook like, Google plus and Twitter Tweet buttons to Tumblr blog

How to put Facebook like, Google plus and Twitter Tweet buttons in every post of your Tumblr blog...

Facebook Like Button for Tumblr

Go to the Facebook "Like button for the web" page and configure the button you need.
Then click on "Get code". A two-part code will be shown.
In my case:

Part 1:

<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/nl_NL/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Part 2:

<div class="fb-like" data-href="{Permalink}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

Note in part 2 that you manually have to change data-href to point to {Permalink}, which is Tumblr's way to refer to the current post.
Keep the window or tab open, or copy the code somewhere aside. Further down we'll see what to do with these codes in Tumblr.

Google Plus +1 button

Head over to Google's +1 Button page and configure the button of your choice. To the right appears the code for the button. In my case:

Part 1:

<script src="https://apis.google.com/js/platform.js" async defer></script>

Part 2: 

<div class="g-plusone" href=”{Permalink}></div>

Note I added manually the href=”{Permalink} part, so the button will refer to the Tumblr post.
Keep the window or tab open, or copy the code somewhere aside. Further down we'll see what to do with these codes in Tumblr.

Twitter Tweet button

Head over to the Twitter Button page and configure the button as you want it. To the right ("Preview and code") you'll find the code. There's only one part. In my case:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Note again the data-url="{Permalink} part.

Get it all into Tumblr

Log into Tumblr and go to the HTML editor. (See the beginning of Tumblr's Custom HTML manual on how to get there, if you don't know.)

Part 1

Now paste part 1 of Google's and Facebook's codes just before the </head> tag. (You can push Ctrl+F in the Tumblr's HTML editor and do a search), as follows:

<!-- begin Facebook like button part 1 -->
<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/nl_NL/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- end Facebook like button part 1 -->
<!-- begin Google Plus button part 1 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- end Google Plus button part 1-->

(In italic are comments added by me for readibility afterwards).

Part 2

Next, paste the parts 2 of Google's and Facebook's code, and the Twitter code, just before the {/block:PostNotes} tag. Put them in an unsorted list (<ul>) as follows:

<!-- begin facebook, google plus, twitter buttons --><ul class=”socialShare”>
<li class="socialShare">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li> 

<li class="socialShare">
<div class="g-plusone" href=”{Permalink}”></div>
</li> 

<li class="socialShare">
<div class="fb-like" data-href="{Permalink}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
</ul>
<!-- end facebook, google plus, twitter, linkedin buttons -->

CSS

Finally, to make them fit nicely one next to the other and on the same line, without bullets, add the following CSS lines just before the </style> tag:

<!-- begin CSS for social share buttons -->ul.socialShare {
      list-style-type: none;
      }
li.socialShare {
      display: inline;
      }
<!-- end CSS for social share buttons -->

Done!

Click on "Update preview" top right of Tumblr's HTML editor. If your blog doesn't seem broken, click "Save" (otherwise just close the browser window or tab so changes will not be saved) and give it a try on your blog's page.
Remember to refresh the browser window, and to actually click on an article and check there: the buttons are configured to appear in the posts itself, not on the home page.

Good luck!

Disclaimer: If smoke comes out of your ears or computer screen or your car is broken during or after trying this, I decline all responsibility.

If you appreciated this article for some reason or another, please share it (see the buttons below), and, of course, don't forget to Flattr! (Why?)


P.S Many thanks to the author of this article! If you want to learn CSS, HTML and many more web stuff, check out w3schools.com, it's awesome.

How to add a Facebook Like button to your Tumblr blog

Before you start, it might be a good idea to save a copy of your Tumblr theme as it is, just in case you mess up completely, because you'll be tinkering under the hood. If you don't know how to customize your Tumblr theme to begin with, you'll have to read up here: go to the Tumblr help page and search for "customize theme".

• Go to http://developers.facebook.com/docs/reference/plugins/like/
• Scroll a bit down and fill in the form
• fill in the home URL of your Tumblr (http://bartvanaudenhove.tumblr.com for instance, where you change "bartvanaudenhove" into your own username, otherwise you'll be directing people to my blog which is very kind but not the idea I guess)
• choose your settings, ticking and unticking the checkboxes (you can see the result immediately to the right)
• Press the "Get Code" button
• Copy the upper part (nr. 1, the "Javascript SDK") into your Tumblr theme HTML right after the <body blabla> statement (where "blabla" is of course some HTML code). To find this statement, click once inside the HTML code of your Tumblr theme (near the beginning), press Ctrl+f, and type in the search field "<body" (without the brackets). If it's not the right result, click after the highlighted result and repeat the search.
• Copy the lower part (nr. 2, the plugin) where you want it to appear on your blog. In my case I put it in my navigation bar. I found it easily because in my theme it was marked "<!-- NAVBAR -->". If you're not that lucky, you can try to do a search on some of the words in your Tumblr navigation bar (i.e. "about" or "ask me anything" etc.), or you can copy the plugin in various places and do "Update Preview" (on top) regularly and see what happens until you get it right.
• Save your theme ("save" button on top), go back to your blog, and have a look (don't forget to refresh your page in order to see the changes).

More info on the Tumblr theme details here: How to create a custom HTML theme.