{"id":2551,"date":"2011-06-05T14:35:37","date_gmt":"2011-06-05T13:35:37","guid":{"rendered":"http:\/\/paulgoodchild.net\/blog\/?p=2551"},"modified":"2011-07-29T15:41:24","modified_gmt":"2011-07-29T14:41:24","slug":"how-to-google-plus-1-wordpress-digg-digg-plugin","status":"publish","type":"post","link":"https:\/\/paulgoodchild.me\/blog\/how-to-google-plus-1-wordpress-digg-digg-plugin\/","title":{"rendered":"How to add the Google +1 button to WordPress and the Digg Digg plugin"},"content":{"rendered":"

[newsletter-sign-up-form]<\/code><\/p>\n

Update 2011-06-07<\/strong>: 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.<\/p>\n

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

This guide lays out a quick how-to add the Google +1 to the floating bar provided by the Digg Digg WordPress plugin.<\/p>\n

<\/p>\n

Limitations & Disclaimer<\/h2>\n

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.<\/p>\n

Once the developer updates the plugin, it will overwrite some of your changes and you can undo the other changes manually.<\/p>\n

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

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.<\/p>\n

If you would like this done for <\/em>you, please have a look at the page you can use to contact me about receiving technical assistance<\/a>.<\/p>\n

Step 1: Add the Google +1 Javascript to your site<\/h2>\n

You need to include the necessary Javascript before the button will even work.<\/p>\n

According to Google’s +1 Webmaster guide<\/a> 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.<\/p>\n

The exact code you need to add is:<\/p>\n

<script type=\"text\/javascript\" src=\"http:\/\/apis.google.com\/js\/plusone.js\"><\/script><\/pre>\n
Here goes…<\/p>\n
    \n
  1. In the WordPress Admin area, under the ‘Appearance’ menu select ‘Editor’<\/li>\n
  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.<\/li>\n
  3. On the far-right menu locate “Footer” as represented by “footer.php” and click on it.\u00a0 This should load the source code of your theme’s footer.php file.<\/li>\n
  4. Scan through the file (it’s probably at the end) and locate the line containing the following text: <\/body><\/li>\n
  5. Once you’ve found it, on any line before that text, you need to copy and paste exactly the code indicated above.\u00a0 See the screenshot for my addition to footer.php in the Mystique WordPress theme.<\/li>\n
  6. Click the button at the bottm to ‘Update File’<\/li>\n<\/ol>\n
    \"Mystique<\/a><\/p>\n
    Confirm the changes are now live on your site<\/h3>\n
    You should confirm that your code is being loaded when your users load your site.<\/p>\n
      \n
    1. Make sure you clear any caches if you’re using any cache plugins.<\/li>\n
    2. Load your home page.<\/li>\n
    3. Right-click and ‘View Page Source’ (on Firefox)<\/li>\n
    4. Do a search on this page for the cod you added and it should be right at the bottom before your <\/body> tag.\u00a0 If not, go back to the beginning and retrace your steps very precisely.<\/li>\n<\/ol>\n
      Step 2: Add the Google +1 button code to Digg Digg floating bar<\/h2>\n
      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.\u00a0 Since that is all I use at the moment from this plugin, this is all I have done and confirmed.<\/p>\n
      Here goes…<\/p>\n