Monday, August 1, 2011

Add Google Plus One Button to Blogspot (blogger)

This is short step by step guide how to add Google +1(plus one) share social button to every blogger post. To implement Google plus one button on blogger you need to copy Google code for button and paste copied code inside HTML Layout section in blogger interface.

This is how Google Plus one social link looks like:

To add Google plus one button to blogspot (blogger) first copy this Google plus one code:

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

You can replace value of attribute size (on example is standard) with one listed of values depending on appearance you want to get:

Button size (with count) Value
google plus one small  small
google plus one medium  medium
google plus one standard  standard
google plus one tall  tall

To add Google +1 (plus one) button on the beginning of every post or on the bottom of every post follow this steps. In HTML layout search for <data:post.body/> and paste the code just before if you want to have Google +1 button on the top of the post or after it for Google plus one button on the bottom of the post.

Here are steps:

  • Go to Layout in your blogspot blog

  • Click on Layout --> Edit HTML

  • it is recommended to backup template on local hard disk before doing any change in edit template box

  • check on Expand Widget Template checkbox

  • find <data:post.body/>

  • for Google +1 button counter on the top of post add Google plus one button code (for code check previous section of this article) before <data:post.body/>

    ...

    [GOOGLE +1 BUTTON CODE]
    <data:post.body/>
    ...

  • or you can want Google plus one button on the end of your posts, add Retweet button code just after the <data:post.body/>

    ...
    <data:post.body/>
    [GOOGLE +1 BUTTON CODE]
    ...


There is one problem. On my blog main page when more than one post appear, google plus one button is showed only on first post. When one post per page is showed everything is OK. I didn't find solution for this problem on the web. On the other side this problem is not so serious.


3 comments:

Farmer's City Wife said...

It's actually kind of an annoying problem if you want anybody to +1 a post on the first page of the blog that isn't the first post. To get it on every post, put the script through /script part before /head and the rest after /post :)

Mark said...

Thanks on the tip. I tried it on my blog but it didn't work. :(

Anonymous said...

Thanks for the tip, I'll be trying this out shortly. I know every seo agency and their mother has been using the +1 button on their clients blogs, since they seem to be everywhere. But it makes sense to use it since this is probably one of the most powerful seo tools available.