Thursday, December 8, 2011

Add the Google +1 button to your website

Google has made it very convenient to add the Google +1 button to your website.

What is shown above is the default style of the Google +1 button you can get from Just make a couple of clicks and you can get the code to copy to your website.

Tip 1:
If you want to add multiple Google +1 buttons that +1 different URLs, you need to use the href attribute of the <g:plusone> tag, e.g. <g:plusone annotation="inline" href=""></g:plusone>

Tip 2:
If you want to add the Google +1 button to your Blogger's template, you can do this:
  1. In the Blogger's dashboard, go to Design->Edit HTML.
  2. Check the checkbox of Expand Widget Templates.
  3. Search for <div class="post-footer">.
  4. Add the Google +1 button code right below it.
  5. To specify the href of the button, you should write: <g:plusone annotation="inline" expr:href="data:post.url"></g:plusone>
Tip 3:
To let the Google +1 button float on the right side, you need to wrap the button in a frame, e.g.

<div style="float: right;"> <g:plusone annotation="inline" href="" width="200"></g:plusone> </div> You may notice that I have set the width attribute of the button, because its default is 450 which place the icon in the middle of the article.

No comments:

Get This <