Manually Add the Google +1 Button to Your WordPress Site

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Recently Google introduced a new sharing button called Google Plus +1 and now you can add a +1 button to your WordPress site. The Google  +1  was designed so that you can give your “public stamp of approval” on articles that you find helpful. Now, your friends, family, and contacts can find the best content when they do a search.

Its important that you have this button on you site, because it might influence Google search engine ranks. If it does help give our articles and sites a little extra boost of influence, then its a good thing to have on your site. – We can all use the extra help when it comes to search engine rankings.

The best part is, installing this plugin is quick and easy. All you have to do is generate the code for the Google +1 button and add the code to your theme. If coding isn’t your thing, then you could use a social sharing WordPress plugin that will let you manually add code to add the button to your site for you.

Since the button is so new, there isn’t a plugin available for the button. The only way to get the button on your site is manually adding the code to your site. If manually coding isn’t your thing, then you can add the code to the Sharebar social sharing WordPress plugin.

How to Manually Install Google +1 on a WordPress site

Generating the Google +1 Button Code

To manually add the Google +1 button to your site you will first need to go to generate the code for the button. The first thing you will need to do is select what size and type of button you want to use. Then select the language. There is an option for advanced features you can use with your button. I have not had time to figure out what these do and how it would benefit me to use these. So unless you understand what these features,  ignore them.

How to Install the Google +1 Button Code on Your WordPress Site

Adding JavaScript code to a Standard Free Theme

Now that you have your code generated, you will need to navigate to the editor via the admin dashboard (appearance >>> editor>>> select the correct file.)

Once in the editor you will need to select the file where the end of the body tag is. For my theme, its called footer.php. This is were you would add the JavaScript code to. After adding the code it, looks like this.

NOTE: Making changes to this file could be overwritten the next time you update your theme, the code you added will no longer be in the file and you will have to add the code again.

Next, you will need need to add the button code to your post pages. To do this you would add this code to the single.php file. The image below shows the code and where I placed it.

I placed the code so the button will appear before the content, but after the StumbleUpon and Twitter buttons. The image below, shows what it should look like.

Adding JavaScript To StudioPress

If you are using a Framework such as StudioPress or Thesis, you may not be able to access these files or there will be a plugin that adds a way to modify these files without worry about loosing these changes after a theme upgrade.  If you are using StudioPress, you can use the simple hooks and add the JavaScript. Just add to the section called wp-footer Hook. This hook executes immediately before the closing </body> tag. It should look something like this.

Adding Google +1 Button to StudioPress

To add the Google +1 button to StudioPress, use the Simple hooks. Look for a the hook called Genesis Before Post Content HOOK. Then just add the code for the button and save it. The box and code should look like this.

Below, is what the Google Button will look like using StudioPress Genesis with a modified sample child theme. As you can see, the Google button is on top, the other social buttons. The other set of buttons were added by using the social sharing plugin DiggDigg. To line these plugins, I will have to modify the DiggDigg code or wait until the creator of DiggDigg adds Google +1 button or manually add the sharing buttons.

Final Thoughts

After adding the code, I realized how easy it was and almost anyone can add it themselves. The guestion is, will work for your theme? For me, my main theme and my StudioPress theme did not look good after adding the code  manually and it caused other social media to display incorrectly. But if I remove the plugins and manually add the code it works fine. In the future, I will be removing the social sharing buttons and adding the code manually. So this isn’t an issue. But for now, I will use the Sharebar on my current theme until their is an actual office plugin created for it.

Image source: Google Experimental Search