How to Add Google +1 Button to Your Blog

As we know, there are many buttons on many websites, such as Facebook button, Twitter button, etc. And Today Google has begun to allow integration of its “+1” button into 3rd party social media platforms, and the “+1 “ button appears on more and more websites and blogs.

Well, I have a Google+ account ( glad to " +1" to me ^_^), but I have no “+1” button on my blog. So I want to add “+1” button to blogger in every post pages, but I do not know how.

Adding a ”+1” code directly into the Blog theme looks great! But where is the HTML code.So I search it on the Internet. Finally I found that Google Webmasters can get the +1 button code right now. 

The implementation is very simple. So I get started instantly by using the following default code where I want the Google +1 button to appear.

<!-- Place this tag where you want the +1 button to render -->

<g:plusone size="medium"></g:plusone>

<!-- Place this render call where appropriate -->

<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>

But it seems to be a mistake, for there are two “+1”buttons on my blog. 

Why? I delete the first two lines of the code, and try again, at this time it works well! Luckily!^_^

<!-- Place this render call where appropriate -->

<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>

It look prefect! isn't it ? lol