How to Add the Tumblr Share button in Blogger

Advertisements
Similar to Facebook’s Like button, Twitter’s tweet button, Google’s +1 button, Tumblr is a niche blogging service providing users to blog straight from their home without spending any money on hosting or domains. Tumblr also has their custom share button that allows more than 18 million Tumblr bloggers to share their content across their blogs in a single click. This sharing button is also useful for Tumblr users to “Reblog” the content they found anywhere on the internet not just on Tumblr. In this article, we will be showing you How to Add the Tumblr Share Button in Blogger.

The huge social impact of Tumblr is due to this “Reblog” feature that allows the users to share the same piece of content on their own blog. This helps and makes a micro-niche community stronger and work together. Though, Blogger also provides a flexible enough Reblog button to its users but today we will add a Tumblr Reblog share button to facilitate Tumblr users.

The very first thing you need to do is to login into blogger account, now go to Blogger >> Template >> Edit HTML. Add the following code above the </body> tag:

<script src="http://platform.tumblr.com/v1/share.js"></script>

Depending upon your needs you can now paste the following code anywhere in your template or HTML area to display the Tumblr share button. Most people recommend adding it just after the post title, for that you have to paste the following code below <data:post.body/> tag.

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:61px; height:20px; background:url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent;">Share on Tumblr</a>

Tumblr offers various types of share buttons that can be accessed from their share button inventory. You can also select the type of your use like Vidoes, Content, images and etc. However, you can also put your own custom image by replacing the image URL from the above code.

Will you be adding this button in your Blogger site? We hope this tutorial has helped in learning how to add the Tumblr share button in blogger. To read more about Customizations refer to the Official Tumblr Button Page.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

11 comments

February 3, 2014 at 9:20 PM

hey, i added tumblr & pinterest button manually on your flat mag template, and it's floating around. i want it more organize. can you take a look at my blog?.

http://www.svnserendipity.com/2014/01/love-in-time-of-advertising-by-david.html

thanx.

February 4, 2014 at 3:19 AM

Good beru

Editorial Team MOD
February 4, 2014 at 4:35 AM

Hi Add this to the CSS

.tumblr {
float: right;
border-right: 1px solid #ddd;
margin-left: 10px;
margin-right: 30px;
padding-right: 30px;
height: 22px;
}

#browsermore {
display: none;
}

That will solve your problem :)

-Syed

February 7, 2014 at 5:37 AM

good live this .

February 26, 2014 at 3:55 AM

yes really . Sharing button is also useful.

March 3, 2014 at 5:15 PM

Hi! There is no < /body > in the blogger template. Looking around I only found others having the same problem, but no working answer anywhere. Help?

Editorial Team MOD
March 6, 2014 at 9:51 AM

Hi, it is located at very end of your template. You need to use Blogger's Custom Search Box. Go to Blogger >> Template >> EDIT HTML >> Click Anywhere in the HTML Editor then Press CTRL+F now search for </body>

If you can't find it then search for </head>

March 6, 2014 at 3:02 PM

I was doing the CTRL+F without first clicking in the editor and got 0 results on the search because of that. I pasted the code where it should be now and the button does not show up for me anyway, but at least I learned something. Thank you for helping!

Editorial Team MOD
March 6, 2014 at 11:05 PM

You also need to paste the second code right above <data:post.body/> tag.

Anonymous
November 23, 2014 at 9:55 AM

I am not getting body tag with () after entering in Edit HTML.

Editorial Team MOD
November 25, 2014 at 11:14 PM

Search for this </body>

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.