Yesterday, Google announced the launch of their much waited +1 button. This is a huge step towards adding the social aspects to the search results. In this article, we will discuss everything you need to know about Google +1 button including the step by step guide to adding it in your WordPress blog or site.
What is the Google +1 Button?
Google’s +1 button is a huge step toward adding social aspect to search results. It is a similar concept as Facebook Like button except it is for search results. In google’s word, it is your friend’s way of saying “this is pretty cool” or “you should check this out”. In another words, it is a public way of stamping something with your approval, so your friends, contacts, and others on the web find the best results when they search. This +1 button is currently available on English searches for Google.com.
Similar to the Facebook Like Button, Google +1 button will also show faces of your contacts (Gmail, Buzz, and Reader).
Why use Google +1 Button?
While Google has stated that this will not affect search ranking, in the interview with Mashable, Google rep Jim Prosser said this is something that the company is “very interested” in incorporating in some form at some point in the future. It is already true that when you are logged in to Google, you see different results than when you are logged out. We believe that this +1 button will certainly have a significant impact on search results in the near future even if the public announcement is not made. So it is best that you start using it right away and take full advantage of it.
We could only imagine this is something that will be added into the Google Banner ads and potentially in other social networks in the future.
How to Add Google +1 in WordPress
Google has created an official page for publishers which contains numerous sizes however there are some customizations that you may need to make if you are using WordPress. So follow the steps below:
Open your theme’s footer.php file and paste the following code above the closing of your body tag:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
If you are using a theme framework in which case you will not have the footer.php file, then paste the following code in your functions.php file or custom functions area:
function add_googleplusone() {
echo '<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>';
}
add_action('wp_footer', 'add_googleplusone');
Once you have pasted the JavaScript, now open your theme file where you want to add the Google +1 Button. Most likely it will be your single.php file. Before you go ahead with this, there are numerous size options. Below is a reference guide:
The code to paste in your template for each size is below. Just copy the one that you like and paste it inside your post’s loop.
//Code to paste for the Tall Button <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone> //Code to paste for the Standard button <g:plusone href="<?php the_permalink(); ?>"></g:plusone> //Code to paste for the Medium Button <g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone> //Code to paste for the Small Button <g:plusone size="small" href="<?php the_permalink(); ?>"></g:plusone>
If you want to show the button without count, then you can add the parameter count=”false” in the code above. An example of the code should look like this (Note this does not work with the Tall size because it must have the count):
<g:plusone size="small" count="false" href="<?php the_permalink(); ?>"></g:plusone>
Yoast shared a very interesting tip yesterday by showing how you can track Google +1 interaction in Google Analytics. If you want to track the interaction of your Google +1 button, then change the Google +1 code to look like this:
<g:plusone size="tall" callback="plusone_vote"></g:plusone>
And then add the following code in your site’s footer below the script that we added in step 1. Example code should look like this:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
function plusone_vote( obj ) {
_gaq.push(['_trackEvent','plusone',obj.state]);
}
</script>
We have already added the button on our site. Will you be adding / using it?
@wpbeginner why i still get +1 button errors when i tried to click this button ?
@arionarian Not sure why you are getting that error.
Dear, how to add Google + button in every post automatically of my wp site?
@farid999 hmm read the article….
I wonder if it also has a dislike feature which is frequently abused for example on YouTube. I understand that any rating counts for more than no rating but rating with the intention to do harm rather than good to someone is pathetic.
We will try to get as much as +1 we can because we know the benefit of it with seo prespective (and soon we will see many people started to sell +1 as well) but a normal user do not know about it and where facebook like button is one step ahead from it. @arabsciences
@JonathanDanielKeck you can wrap it around a div and add custom inline-styling… style=”padding: 0 0 0 25px;” play around with the padding until you get it right.
@wpbeginner I see what you are saying. The Google+ is off to the left. How do I shift it to the center?
@adrianaephotography @wpbeginner @merrittsgret We just added a div with extra padding.
@wpbeginner @merrittsgret I meant to say “mine shows” not “my shows”
@wpbeginner @merrittsgret How did you leave that little space in between the separating line and the button? My shows centered and everything, but with no space from the separating line. I tried adding a <br> but the space it too much. Thanks,
i also need this
@merrittsgret You would need to align the div that google+ button is in. Look through our site’s CSS to see how we have the G+ button aligned in the floating bar…
Any way yet to format the placement of the Google Plus button using CSS? I can’t get it to line up with the rest of my share buttons (example http://ylcf.org/2011/07/faith-blind/).
@AlexShalmanI used the <center> tag and it got it pretty close (although slightly different from the rest of the icons).
I added the smart share plugin, and followed your instructions on adding google plus to it on AlexShalman.com – if you look at a single post page, you will see that the GooglePlus icon is off to the left side of the box, instead of centered. Would you be so kind as to tell me how to center it?
@Kamil_ace Copy the code and paste it in the custom code area. Might have to tweak the styling…
how do i add the button in smart sharing plugin?
@wpbeginner @georgetasioulis I was just about to download your floating social tool bar, has the google +1 been added to it?
Thanks
@IPodsIPhones To clarify on that, Google +1 button is only showing in the U.S search engines. It is however shown to all users we believe.
No doubt awesome plugin and i have added it on my site but I am not confirm that if I am not in U.S, then Google +1 button would not work. Please tell me about this.
@wpbeginner @michel.fortin I placed CloudFlare in development mode, it worked, turned development mode off, and it still seems to be working!
@michel.fortin @itsdaniel0 great find
@wpbeginner @itsdaniel0 Found the culprit. It was the Bad Behavior plugin. Once deactivated, the +1 worked.
@wpbeginner thnx I will check it out
@georgetasioulis We are using a variation of Smart Sharing Plugin.
Which plugin do you use for your floating sharing bar on the left of the posts?
This is awesome post. Thanks for this information
definitely …. i already add it to my wordpress blog
@arabsciences I use the floater on my site: http://www.coolgizmotoys.com. Is there an easy way to add +1 to the floater? Thanks!
@itsdaniel0 @michel.fortin Just did a quick research. It seems that a lot of users are having this issue. Don’t know the cause of it yet. Will stay on top of it.
@itsdaniel0 @michel.fortin Don’t know this issue of red exclamation mark. But as many resources suggests: This is only open for U.S audience.
@michel.fortin @wpbeginner I’m having the same issue here, red exclamation mark on my site, works fine on yours
@wpbeginner @michel.fortin You mean if my site is not in the US? Because it does add others I click (like this page, for example) to my profile (and I’m Canadian).
@michel.fortin If you are not in U.S, then it wouldn’t work. Other than that, don’t know why it wouldn’t work for you.
Seems like I keep getting the red exclamation mark button from Google. But their explanation doesn’t make sense. They say my internet connection is slow… but it works on other sites. Why not mine? I’m at a loss…
@wpbeginner
Fantastic > Working > Just need to move things around a bit. on whatsupcapetown.com > Thanks a mill >>
@capecalendar Try the code now.
I am using the Genesis framework and using your code in the functions.php file gives me an error when loading the site. The error is:
Parse error: syntax error, unexpected ‘{‘, expecting ‘ >>>>etc.
Can someone please help me fix this.
@dicarlod Open the Widgets area and drop the code there
But remember to put your site’s url there.
hey
and how can we add it to the side bar ?
I added it to my blog a few days ago but I wish I had read your tutorial first, it took me forever to figure it out. This is so much easier!
Thanks for sharing. <3
Try this:
http://wordpress.org/extend/plugins/google-plus1-button/
released yesterday, suggestion for better development is appreciated
@NemeshSingh nah, this is already very easy.
Awesome tutorial! Now I have the button in my site. ;D
Use this wordpress plugin instead http://wordpress.org/extend/plugins/google-plus-one-google1/
I hope this helps 
@SallyE@ericksonweb Ah yea… the floater is a bit crazy right now. We have added the +1 button right next to the big like button as well above post content. Thanks for the suggestion. We will fix the floater as well.
@wpbeginner@ericksonweb You missed the point on the plug in I was talking about. I mean the one this website is using on my left, which I can only see 1/4 ” I understood the rest of your post fine and it’s very clear.
@SallyE@ericksonweb I suppose the above method is not clear enough for non coders. Unfortunately, at the moment that is the only way. We will keep an eye out for plugins.
Hi Guys,
Thanks for all the great info on Google’s +1 Button! I hoped one of you in the know would take the time to let us not-so-talented peops in on the steps and the use.
I can almost see where you added the button here on the left. I’m in Safari on the Mac and can see about a 1/4″ of its right side. Hardly recognizable and a very small click area. Think this plugin/code might need some work. @EricksonWeb
I have added it.
@Eat Stop Eat You see where it says the_permalink in the href tag. Replace that php code with your site’s URL.