Wednesday, August 10, 2011

Adding Google Plus Share Button In Blogger


In the last post, I had written about what is Google Plus, read here. Actually, the new features like Google Plus will help blogger to connect closer to reader because you have another more alternative social network to share what had been posted your article recently. In this tutorial, i would like to show you with two ways of adding Google Plus. The screenshoot will look like below



The first way is to add on your sidebar as a widget, for this way is not so difficult just follow simple steps below:
  1. Visit Google plus button official site.
  2. To create a custom +1 button, you need to choose size in this case there have 4 size like small, standard, medium, tall as well as what language you want to use it. For button review you can see on the right side.
  3. Below custom attribute, there has a script just copy and paste the following code into your Blog.
  4. Log in to your blogger account, choose design> add HTML widget, paste here and save it.



The second way can be done by adding script in your HTML code, all you have to do is to follow guides below:
  1. Go to blogger Dashboard > choose Design > Edit HTML.
  2. Before add or change something make sure you back up your template.
  3. Next, you must tick the Expand Widget Templates checkbox on top right of the code window.
  4. Find the code below in your HTML:
<data:post.body/>

  1. After you find it, Paste the Google plus button code immediately below (after) it:

<!-- Google +1 button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p></p>
<div style='float:left;padding:10px;'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone expr:href="data:post.url" size="standard" count="true"></g:plusone>
</div>
</b:if>
<!-- Google +1 button End -->


  1. You can replace the size of by replacing the value of  size attribute. (change red color above with one of them : small, standard, tall or medium)
  2. For changing the button positioning if you wish, if you want to position it on top of post just place the button code before (instead of after) <data:post.body/>. And for Position on the right just change the float in line 4 from left to right.
  3. Save and look the result, the Google +1 button will appear on your Blog. Cool right. Watch Video here.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Subscribe via email

SIGN UP now if you feel useful information as well as receive other site updates!