ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Adding Google "+1" button to your Tumblr blog posts

Updated on March 7, 2013

After the last post I have been looking into implementing the Google Plus' "+1" button into Tumblr blog posts and I've been successful in implementing so here I am today writing this article to teach you how to implement the "+1" button in your Tumblr blog posts.

Implementing the +1 button:

Just like Pinterest "Pin it" and Twitter "Tweet" buttons you just have to generate the code and alter a tiny bit of code. Go to https://developers.google.com/+/web/+1button choose your settings I chose bubble for annotation then click advanced settings and write anything in the URL to +1 field. The generated code should look like the code below:

<div class="g-plusone" data-href="test"></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

So now this code needs just a slight changing you can see in the <div> attribute there is a property named data-href, you have to change it's value to {Permalink} so that its your blog post that people are gonna +1. So after changing the <div> attribute, the code should look something like this:

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

Now to implement this just make sure you're placing this code somewhere after {block:Posts} , {block:PermalinkPage} but before {/block:PermalinkPage} and {/block:Posts}.

and the JavaScript code is to placed right below the <div> attribute.

So that is the way to do it. Pretty easy right?. You can see a live demo at my Tumblr blog. Thanks for reading my article.


Generated Code:
<div class="g-plusone" data-href="test"></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Final <div> attribute:
<div class="g-plusone" data-href="{Permalink}"></div>

Comments

    0 of 8192 characters used
    Post Comment

    • sam.azgor profile image

      Sam Azgor 4 years ago from Bangladesh

      thanx for share. you might like my tumblr blog - http://samazgor.tumblr.com

    • Ali Darakhshaan profile image
      Author

      Ali Ahmed 4 years ago from Karachi, Pakistan

      Thank you for liking my tutorial. Your Tumblr blog is good, minimalist design which is a plus point but those ads are really ruining the experience.

    • sam.azgor profile image

      Sam Azgor 4 years ago from Bangladesh

      thanx for great suggestion, i m going to remove all the ads. Actually the ads was for testing purpose.

      have a nice day

    • Ali Darakhshaan profile image
      Author

      Ali Ahmed 4 years ago from Karachi, Pakistan

      You don't have to completely remove them just make sure they are not under or above each post just put them at the side of the page.

    • sam.azgor profile image

      Sam Azgor 4 years ago from Bangladesh

      oh man :) , thanx again for give me positive suggestion.

    Click to Rate This Article