Adding Google +1 Button on the blogger

As I was blogging about the new Google +1 button, I thought that I should add this feature in my blog. Since I was using a customized template, I would think that I have to add the code snippet manually. I copied the +1 button code snippet and paste it into the desired location. Out of my surprise that it created two +1 button. I am very sure I only have one snippet of the +1 code right above the Facebook like. Have no idea how the second next to the Google buzz share button come from. Check out the screen shot below.

I suspect that probably the share button designer have included the Google +1 button. The weird thing is it wasn't there before I add the new +1 button code. And once I remove the +1 code. The second +1 button disappear too!

To make sure that the +1 button came from the default share button. I create a test website and use the default blogger template with detail widget templates and inspected its HTML code. And I found this code.


<b:if cond='data:top.showDummy'>
     <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
   </b:if>


Dummy tag huh.. nice one. So now that it is confirmed that the share button has included the +1 button, why doesn't it show up on my customized template? After some thought, I figure that probably it is due to the lack of the javascript source.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>


I include the javascript source in my customized template without the +1 tag. And wa-lah.. the +1 button next to the share button appear!

Summary. The share button designer has included the Google +1 button (should have thought about it since blogger is Google's Product). However, if you are using your own customized template or template designer from the blogger, you may need to include the javascript source to make it appear.