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.
The exact code you need to add is:
- In the WordPress Admin area, under the ‘Appearance’ menu select ‘Editor’
- 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.
- 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.
- Scan through the file (it’s probably at the end) and locate the line containing the following text: </body>
- 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.
- Click the button at the bottm to ‘Update File’
Confirm the changes are now live on your site
You should confirm that your code is being loaded when your users load your site.
- Make sure you clear any caches if you’re using any cache plugins.
- Load your home page.
- Right-click and ‘View Page Source’ (on Firefox)
- 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.
- 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:
- 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.