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 http://www.google.com/intl/en/webmasters/+1/button/index.html. 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="www.toptip.ca"></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="www.toptip.ca" 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.