How to Add the Google +1 Button to Blog Posts

As you read in the tutorial How to Stumble Like and Google +1 Effectively about the importance of utilizing these tools together.  This tutorial will tell you the why’s and the hows.  

What is this fancy new button appearing everywhere on blogs and sites alike these days?  Basically the Google +1 button is similar to the Facebook “I Like it” button you see at the end of posts.  It’s a way to tell people publicly that you like a specific post and where a person can find it. Posts that have been considered +1 worthy by readers show up in search engines more often and increase traffic for relevant content.  To read more about Google +1, go here.

There are a few ways to add this button to your blog posts.  The easiest one is to add the individual Google +1 button to every blog post by doing the following:

1.  Log in to Blogger and go to your Design Tab. Click on the “Edit” tab below your “Blog Posts” box.

2.  Check the box beside the “Show Share Buttons” option.

3.  Scroll to the bottom where you will now see the Share Buttons underneath your blog post layout options.  You can click, hold and drag the Share Buttons box to wherever you would like your buttons to appear within the blog post. 

4.  Click on Save and then go view your blog.  You should now see your share buttons located either under or at the top of your blog post.  I prefer mine at the bottom where the comments link is, like you see in the picture below, but you can move all of these options around to your preference.

If this option does not work for you, you can manually install the button code for Google +1 to every blog post on your blog by following these steps:

1.Log in to Blogger, go to your Design tab then click on “Edit HTML”.  make sure to save your current template to your hard drive somewhere you will be able to find it, in case you make a mistake, you can always load the template before you made changes.  Click the check box for Expand Widget Templates.  Press Ctrl and F together to bring up the Find box; this should appear at the top or bottom of your browser.  Type in the tag to find the tag in your templates code.

2.  Directly above the tag, insert the following script:

3. Next using the find box, search for the tag data:post.body in your template, like in the picture below.

4.  Directly above that tag, paste the following script:

5.  You can replace the size with small or tall in place of medium in the piece of script in step 4, if you want a different size button.  Using the medium size as the instructions above suggest, here is what the button looks like under all of my blog posts, new and old.  You will not have to insert this script again, the button will automatically be inserted into every new blog post you create from here on.

To add the toolbars to your browser so that you can easily Google +1 any useful posts (blog or otherwise) you come along, you will need to add the extensions to your browser first.  These are extensions are available in Chrome (install Chrome here) and FireFox (install FireFox here):

Chrome:  Go here to install the Google +1 extension

FireFox:  Go here to install the Google +1 extension

Why would you want to add this toolbar extension?  Not all blogs and sites will have the Google +1 option directly on the posts; this is where the extension comes in handy.  The extension allows you to Google +1 any post, article or otherwise on the Internet, no matter if it does not have a button available.  Ultimately you can use the Google +1 button directly under each blog post to give it the credit it deserves (this is the same thing when you do this by itself). When using other share services, the toolbars work more effectively together, such as the I Like it! thumbs up button on the Stumble toolbar, as suggested in the How to Stumble Like and Google +1 Effectively tutorial.