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.