Facebook Twitter Gplus Pinterest LinkedIn YouTube E-mail RSS
Home Tip Jar How-To: Add Google +1 To WordPress
formats

How-To: Add Google +1 To WordPress

Published on June 3, 2011 by

Google Plus 1Back in January 2011, Google unveiled their new +1 button. The button is meant to get people sharing things with their friends, contacts, and whoever else they communicate with on the Web.

The push is all part of Larry Page’s social strategy (the one that determines 25% of Google employees’ annual bonus). Make no mistake, Google is trying their hardest to compete with the likes of Reddit, Digg, StumbleUpon, Facebook, and even Twitter. Their latest creation may do just that. But how do you get in on the action? Well, if you’re a self-hosted WordPress blogger I’ve got your answer.

First, you’re gonna need a plugin called sharebar (link). Once installed head over to its settings and click “Add New Button”

Sharebar add new button

Next, go out to Google’s Webmaster page and get the buttons you need. I created small and large sized buttons since Sharebar can handle both.

google Plus 1 button configuration

Copy the second line of code <g:plusone size=”"></g:plusone> for each button and paste it into Sharebar’s settings. Give the button a name, a position on the Sharebar, and check the enabled box.

 

Sharebar add button settings

The last step has two options. You can add Google’s auto-generated <script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”> </script> to the <head> of your theme’s header or before the </body> in the footer. Or, you can use an alternate code snippet only in the footer. The alternative was written by Aaron Peters, a web performance optimization consultant, who says Google’s auto-code is not optimal because scripts block rendering when placed in the <head>, redirect from HTTP to HTTPS, browser caching issues, and the JS file is not minified. I’ve opted to use his code (below) and it works perfectly. If you don’t feel like heeding his advice you should stick with the Google generated one.

<!-- via Aaron Peters. Place this just before your close </body> tag -->
<script>
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

Google +1 JavaScript code per Aaron Peters

That’s it. You’re all set. Now when people visit your blog they can click +1 to publicly give it their stamp of approval. Google thinks that +1′s will help people find the best stuff when they search, and that stuff with then be linked to their Google profile. There’s no telling how the whole +1 thing will play out seeing how I replaced the Google Buzz button with the +1 button, but Google has a way of eventually getting things right. We’ll just have to wait and see. In the meantime, feel free to +1 this post so your friends can check it out.

 

To learn more about how Google +1 works check out Google’s intro video:

 


Some people have put the script in with the button size code, bypassing the footer/header altogether. If you try that and you run into problems then stick with the advice above. I’m not using the Sharebar currently as my theme mucked with their settings which conflict with the plugin. If you have any questions feel free to leave ‘em below or send me an e-mail at TiTy@y2kemo.com. There’s an updated version of Sharebar called Cevhershare that comes preloaded with Google+.


Related posts:

  1. How-To: Fix WordPress Missed Schedule Error
  2. Top 10 WordPress Plugins for 2011
  3. WordPress App Kinda Sucks
  4. What happens if you google Google?
  5. WordPress Unknown Search Terms
 
  • http://www.blogtechnical.com Bradley Wint

    Are there any other floaty bars? Sharebar is honestly a pack of crap… I’ve had issues with Facebook and the XFMBL code, as well as Tumblr share. Ended up writing my own HTML floaty bar but it doesn’t fold in when the page is displayed on smaller resolutions like Sharebar does.

    • http://y2kemo.com y2kemo

      You can try simple  social bar, get social, digg digg or tbk Creative Social Float. They’re all floating social sharing bars. Though I think only simple social bar has a compact view like Sharebar.

      • http://www.blogtechnical.com Bradley Wint

        Hmm tried it but it does not allow you to add custom buttons. Guess it’s a CSS win for me.

      • http://y2kemo.com y2kemo

        Take a look at GetSocial and the author’s page. He explains how to add buttons in the FAQ section at the bottom. If that doesn’t work, then I guess it will indeed be a CSS win for you.

  • http://twitter.com/El_PackerRD Alberto perez

    When adding this to sharebar, it will conflict with embedded YouTube videos.

    • http://y2kemo.com y2kemo

      Good to know. I’ve been using Smart YouTube and didn’t notice that.

  • http://twitter.com/El_PackerRD Alberto perez

    Thanks ,an, I 1+’ed you.

  • Florin

    Do you know how to add the custom code if the language is set to something else than English?

    Original Google code has something else below importing the script (for Romanian language): {lang: ‘ro’}

    • http://y2kemo.com y2kemo

      It shouldn’t matter as long as you’ve called that language in your header. Have a look at: http://code.google.com/apis/+1button/#languages

    • Florin

      Found it on the original link:

      Must add this after getting the script: g.innerHTML = ‘{lang:”ro”}’;

      • http://y2kemo.com y2kemo

        Good to know. Thanks.

  • http://twitter.com/digisheets Digital Sheets Blog

    not working for me. Only worked when I added the script to sharebar itself. Has it got something to do with my theme?

    • http://y2kemo.com y2kemo

      Shouldn’t be theme specific. What other plugins are you running?

      Chris

  • Joe

    I had to disable JetPack to get it to work.

    • http://y2kemo.com y2kemo

      Strange. I have Jetpack enabled and Google+ is working fine. The only Jetpack tool I’m not using is Sharedaddy because I’m using Sharebar.

  • Dilin Anand

    Thanks y2kemo. I implemented this at my Technology News Weblog.

    • http://y2kemo.com y2kemo

      Glad to hear it, and thanks!

  • Charles david web

    Obrigado muito bom o artigo

    • http://y2kemo.com y2kemo

      De nada.

  • http://www.foreclosurephilippines.com Jay Castillo

    Worked like a charm on my blog, thanks! By the way, I tried to put the script in with the button size code and I experienced no problems so far. I also noticed the code from Google already has an option to be asynchronous, which is the default setting. 

    • http://www.foreclosurephilippines.com Jay Castillo

      I spoke too soon. It turns out it messed up the content preview when I share a blogpost in facebook.I removed the google plus one button from sharebar for now until I figure out a fix.

  • http://net-follower.myopenid.com/ dotNetFollower

    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!

  • http://www.letsbewild.com/ Nick

    worked like a charm – thanks!

  • Guest

    Sharebar is alive and well. WTF with your comment that it’s not available as of 4/20/12?

    • http://y2kemo.com y2kemo

      It was pulled from the directory on 4/20. Looks like it was put back on 4/24. Post updated. Thanks.