Add +1 and other social buttons to your blog

Adding the new +1 button is incredibly simple. And since it serves a clear social / marketing / SEO role, we’re looking at the other options for Blogger or Blogspot blogs as well.

If you are using the Blogger Share buttons, the +1 options is automagically added for you – no effort on your part is needed. It makes sense to look first at enabling the said buttons. If using a Blogger / Blogspot blog, you go into your Dashboard –> Design –> Page Elements –> Blog Posts –> Edit

There, just check the “Show Share Buttons” checkbox, then position the buttons as you wish by clicking, holding and dragging in the Arrange Items section. If, however, you are using a custom template the buttons might not appear, because the code that reveals them does not exist. To add it, go into your template code (Edit HTML) and identify where you want them to show up. A good place is underneath <p class='post-footer-line … (you might have div instead of p). Paste there

<b:if cond='data:post.sharePostUrl'>
     <b:include data='post' name='shareButtons'/>
</b:if>

You may further customize the Share Buttons by selectively hiding specific buttons. For instance, to hide the “B” (Blogger) button, you would paste in your template above ]]></b:skin> this code: .sb-blog{display:none}

You may hide other buttons with sb-email , sb-twitter, sb-facebook and sb-buzz, respectively.

Sadly, you may discover that your +1 buttons still does not show up.

LE: From Blogger Known issues: For blogs which are using the embedded comment form, the +1 Button only displays on the home page and not on individual post pages. We are working on a fix to make the button display on all blog pages, and will update this thread when we have more info to share.

Here’s a fix (though Blogger may fix it automatically later on). To add it, you just

1. go to Blogger –> Design –> Edit HTML
2. search for </head> in your template
3. paste <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script> right above it

All your buttons are belong to Google now and your +1 should be proudly showing.

The above .js loading statement is how you enable +1 on any site. You can then display the button all by itself using <g:plusone></g:plusone>  It can further be styled with a size (small, medium, standard, tall) and count (true, false) attribute:

<g:plusone size="standard" count="true"></g:plusone>

Here’s why and how the +1 button helps you, in Google’s own words:

By adding the +1 button to your blog, you’re providing an easy way for your visitors to recommend your posts to their friends right from your blog. Here’s how it works: Let’s say you blog about biking. One of your readers, Tom, finds your recent post about mountain biking interesting, and clicks on the +1 button. Now, when Tom’s friends and contacts search for biking or mountain bikes and your post appears in Google search results, they might see an annotation showing that Tom +1’d your post, helping your content stand out.

[Example of how a blog post +1’d by visitors appears on the Google search results page]

We hope +1’s will help your blog stand out better in search results, which could increase both the quality and quantity of traffic to your blog. Now, that’s indeed a big +1, isn’t it?

All in all, this is a brilliant move by Google to leverage their search engine domination for social sharing, where they haven’t been too successful in the past – remember Wave?

Sources / More info: gw+1, buzz+1, buzz-share, g+1, ad+1, +1api

BlogIdol, add, blogger, blogspot, social, networking, promotion, promote, seo, gadget, widget (Tags)