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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
11 comments
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.
Good beru
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
good live this .
yes really . Sharing button is also useful.
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?
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>
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!
You also need to paste the second code right above <data:post.body/> tag.
I am not getting body tag with () after entering in Edit HTML.
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.