How to add the Google +1 button to WordPress and the Digg Digg plugin

by Paul Goodchild on June 5, 2011

Update 2011-06-07: The plugin developer has released an update that amongst other things adds Google +1 support. The information below is not needed. If you did implement this, I advise you remove the line of code you added to your theme in Step 1.

I use the Digg Digg plugin for WordPress to add the floating sharing bar on the left-side of this post.  Google has recently released their +1 button system and I wanted to manually add the Google +1 button to the floating bar while waiting for the developer to update the plugin.

This guide lays out a quick how-to add the Google +1 to the floating bar provided by the Digg Digg WordPress plugin.

Limitations & Disclaimer

I provide this quick how-to guide only to help those who want to add Google +1 to their site before the plugin is updated. Nothing more.

Once the developer updates the plugin, it will overwrite some of your changes and you can undo the other changes manually.

Please take all necessary precautions to backup your site and your data before making the changes outlined below. Seriously!  I cannot and will not take responsibility for toasted websites as a result of this.

This will only add the Google +1 button to your floating bar. If you want information on other options, let me know in the comments section below and I’ll update the post.

If you would like this done for you, please have a look at the page you can use to contact me about receiving technical assistance.

Step 1: Add the Google +1 Javascript to your site

You need to include the necessary Javascript before the button will even work.

According to Google’s +1 Webmaster guide you have to add the following line to either your <head> section or just before closing your </body> tag. The merits of either are up for discussion another time, but I placed mine just before the closing </body> tag to avoid a performance penalty in the case that Google is slow to serve up the Javascript file.

The exact code you need to add is:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Here goes…

  1. In the WordPress Admin area, under the ‘Appearance’ menu select ‘Editor’
  2. It should default to your active theme, but if it doesn’t, select your active WordPress theme from the drop-down box on the top-right.
  3. On the far-right menu locate “Footer” as represented by “footer.php” and click on it.  This should load the source code of your theme’s footer.php file.
  4. Scan through the file (it’s probably at the end) and locate the line containing the following text: </body>
  5. Once you’ve found it, on any line before that text, you need to copy and paste exactly the code indicated above.  See the screenshot for my addition to footer.php in the Mystique WordPress theme.
  6. Click the button at the bottm to ‘Update File’

Mystique theme footer.php Google +1

Confirm the changes are now live on your site

You should confirm that your code is being loaded when your users load your site.

  1. Make sure you clear any caches if you’re using any cache plugins.
  2. Load your home page.
  3. Right-click and ‘View Page Source’ (on Firefox)
  4. Do a search on this page for the cod you added and it should be right at the bottom before your </body> tag.  If not, go back to the beginning and retrace your steps very precisely.

Step 2: Add the Google +1 button code to Digg Digg floating bar

Once the first step is completed and confirmed, you’re ready to add the extra bit of code to the Digg Digg plugin. This will only update the floating bar, nothing else.  Since that is all I use at the moment from this plugin, this is all I have done and confirmed.

Here goes…

  • In the WordPress Admin area, under the ‘Plugins’ menu select ‘Editor’
  • In the drop-down box on the far-right select Digg Digg.
  • This should load the editing page for the main Digg Digg plugin code and at the top should read:
'Editing digg-digg/digg-digg.php'
  • Search for the line that reads:
$floatButtonsContainer = "<div id='dd_ajax_float'>" . $floatButtonsContainer . "</div>";
  • On the line immediately before this line, insert the following line of code exactly.
$floatButtonsContainer .= "<div class='dd_button_v'><g:plusone size="tall"></g:plusone></div><div style='clear:left'></div>";
  • Below is a screen shot of how my code looks:

  • Remember to click the “Update File” button when you’re done.
  • If you’re using any cache optimization plugins, ensure that you clear your caches before reloading your site.

Adding Google +1 to the Thesis Theme

This guide is for use with any theme.

I personally use the Thesis Framework and if you do too there are more efficient ways to do this than I’ve laid out here.  But thankfully someone has already gone to the effort to show the ways in which the code can be added to a site that runs on Thesis.

You can check out that guide here.

Let me know how you get on with this guide by commenting below.

{ 5 comments… read them below or add one }

Gregory C. June 6, 2011 at 02:24

Thanks for the article, you are great at outlining what to do and pretty much described the process perfectly.

Reply

Paul Goodchild June 6, 2011 at 07:02

Glad to hear you had success with it – I just looked on your site and see you’ve got it on. Good job!
P.

Reply

David Hawkins June 18, 2011 at 15:40

I wish you were around when I built my first site, great tutorial, thanks ^^

Reply

nochnoch August 18, 2011 at 09:49

gonna give it a shot. it’s much better explained than the plugin’s website :)
noch

nochnoch.com

Reply

dotNetFollower January 15, 2012 at 00:14

Hello!
Nice post!
In my blog I described how to add Google +1 Button to every WordPress blog post in respect to iNove theme. I added the +1 button manually editing php files. Probably, it could be useful for someone. The article is here – WordPress: How to add Google +1 Button to WordPress blog post.
Thanks!

Reply

Leave a Comment

{ 1 trackback }

← Previous Article:

→ Next Article: