WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add the Google +1 Button to your WordPress

How to Add the Google +1 Button to your WordPress

Last updated on June 22nd, 2012 by Editorial Staff
160 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add the Google +1 Button to your WordPress

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:

Google Plus One Size Display

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?

160 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

61 Comments

Leave a Reply
  1. Tammy Doiel says:
    May 31, 2013 at 5:47 pm

    I have tried several tutorials to try and add a google+ widget–using the text widget. it won’t work, and I’m ready to pull my hair out! I have put these codes in, and inserted my own number, etc., but it doesn’t work. Is their an easy tutuorial that is idiot-proof?

    Reply
  2. Tammy Doiel says:
    May 31, 2013 at 1:12 am

    Can I add the +1 button as a wordpress.com user? I can’t figure out how to do it! http://www.creativekkids.com Thanks!

    Reply
    • Editorial Staff says:
      May 31, 2013 at 10:10 am

      Yes you can, but you have to use their built-in sharing feature.

      Reply
  3. arionarian says:
    Mar 28, 2012 at 7:51 pm

     @wpbeginner  why i still get +1 button errors when i tried to click this button ?

    Reply
    • wpbeginner says:
      Apr 2, 2012 at 8:19 am

       @arionarian Not sure why you are getting that error.

      Reply
  4. farid999 says:
    Oct 25, 2011 at 2:31 am

    Dear, how to add Google + button in every post automatically of my wp site?

    Reply
    • wpbeginner says:
      Oct 25, 2011 at 7:57 am

      @farid999 hmm read the article….

      Reply
  5. gokhanzburnu says:
    Aug 15, 2011 at 7:54 pm

    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

    Reply
  6. wpbeginner says:
    Aug 1, 2011 at 3:46 pm

    @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.

    Reply
  7. JonathanDanielKeck says:
    Aug 1, 2011 at 11:29 am

    @wpbeginner I see what you are saying. The Google+ is off to the left. How do I shift it to the center?

    Reply
  8. wpbeginner says:
    Jul 26, 2011 at 8:04 am

    @adrianaephotography @wpbeginner @merrittsgret We just added a div with extra padding.

    Reply
  9. adrianaephotography says:
    Jul 25, 2011 at 3:55 pm

    @wpbeginner @merrittsgret I meant to say “mine shows” not “my shows”

    Reply
  10. adrianaephotography says:
    Jul 25, 2011 at 3:54 pm

    @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,

    Reply
  11. mrahmadawais says:
    Jul 18, 2011 at 9:42 pm

    i also need this

    Reply
  12. wpbeginner says:
    Jul 16, 2011 at 4:12 am

    @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…

    Reply
  13. merrittsgret says:
    Jul 15, 2011 at 3:46 pm

    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/).

    Reply
  14. AlexShalman says:
    Jul 6, 2011 at 9:40 am

    @AlexShalmanI used the <center> tag and it got it pretty close (although slightly different from the rest of the icons).

    Reply
  15. AlexShalman says:
    Jul 6, 2011 at 9:37 am

    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?

    Reply
  16. wpbeginner says:
    Jun 21, 2011 at 3:19 am

    @Kamil_ace Copy the code and paste it in the custom code area. Might have to tweak the styling…

    Reply
  17. Kamil_ace says:
    Jun 21, 2011 at 2:16 am

    how do i add the button in smart sharing plugin?

    Reply
  18. TimRSMartin says:
    Jun 18, 2011 at 1:43 am

    @wpbeginner @georgetasioulis I was just about to download your floating social tool bar, has the google +1 been added to it?

    Thanks

    Reply
  19. wpbeginner says:
    Jun 9, 2011 at 8:14 am

    @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.

    Reply
  20. IPodsIPhones says:
    Jun 9, 2011 at 8:05 am

    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.

    Reply
  21. itsdaniel0 says:
    Jun 7, 2011 at 12:47 pm

    @wpbeginner @michel.fortin I placed CloudFlare in development mode, it worked, turned development mode off, and it still seems to be working!

    Reply
  22. wpbeginner says:
    Jun 7, 2011 at 3:30 am

    @michel.fortin @itsdaniel0 great find :)

    Reply
  23. michel.fortin says:
    Jun 6, 2011 at 4:22 pm

    @wpbeginner @itsdaniel0 Found the culprit. It was the Bad Behavior plugin. Once deactivated, the +1 worked.

    Reply
  24. georgetasioulis says:
    Jun 6, 2011 at 3:57 pm

    @wpbeginner thnx I will check it out ;)

    Reply
  25. wpbeginner says:
    Jun 6, 2011 at 2:31 pm

    @georgetasioulis We are using a variation of Smart Sharing Plugin.

    Reply
  26. georgetasioulis says:
    Jun 6, 2011 at 10:37 am

    Which plugin do you use for your floating sharing bar on the left of the posts?

    Reply
  27. coolcash4live says:
    Jun 6, 2011 at 5:50 am

    This is awesome post. Thanks for this information

    Reply
  28. abdelhafidcom says:
    Jun 5, 2011 at 9:31 am

    definitely …. i already add it to my wordpress blog

    Reply
  29. coolgizmotoys says:
    Jun 5, 2011 at 7:50 am

    @arabsciences I use the floater on my site: http://www.coolgizmotoys.com. Is there an easy way to add +1 to the floater? Thanks!

    Reply
  30. wpbeginner says:
    Jun 4, 2011 at 2:20 pm

    @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.

    Reply
  31. wpbeginner says:
    Jun 4, 2011 at 2:17 pm

    @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.

    Reply
  32. itsdaniel0 says:
    Jun 4, 2011 at 2:12 pm

    @michel.fortin @wpbeginner I’m having the same issue here, red exclamation mark on my site, works fine on yours

    Reply
  33. michel.fortin says:
    Jun 4, 2011 at 2:03 pm

    @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).

    Reply
  34. wpbeginner says:
    Jun 4, 2011 at 1:55 pm

    @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.

    Reply
  35. michel.fortin says:
    Jun 4, 2011 at 1:53 pm

    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…

    Reply
  36. capecalendar says:
    Jun 4, 2011 at 10:43 am

    @wpbeginner

    Fantastic > Working > Just need to move things around a bit. on whatsupcapetown.com > Thanks a mill >> :-)

    Reply
  37. wpbeginner says:
    Jun 4, 2011 at 10:37 am

    @capecalendar Try the code now.

    Reply
  38. capecalendar says:
    Jun 4, 2011 at 10:32 am

    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.

    Reply
  39. wpbeginner says:
    Jun 3, 2011 at 10:06 pm

    @dicarlod Open the Widgets area and drop the code there :) But remember to put your site’s url there.

    Reply
  40. dicarlod says:
    Jun 3, 2011 at 4:15 pm

    hey :)

    and how can we add it to the side bar ?

    Reply
  41. strawberrysingh says:
    Jun 3, 2011 at 4:07 pm

    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! :D Thanks for sharing. <3

    Reply
  42. webgrafia says:
    Jun 3, 2011 at 4:49 am

    Try this:

    http://wordpress.org/extend/plugins/google-plus1-button/

    released yesterday, suggestion for better development is appreciated

    Reply
  43. AzharKamar says:
    Jun 3, 2011 at 3:58 am

    @NemeshSingh nah, this is already very easy. ;)

    Reply
  44. AzharKamar says:
    Jun 3, 2011 at 3:56 am

    Awesome tutorial! Now I have the button in my site. ;D

    Reply
  45. NemeshSingh says:
    Jun 2, 2011 at 1:00 pm

    Use this wordpress plugin instead http://wordpress.org/extend/plugins/google-plus-one-google1/ :) I hope this helps :)

    Reply
  46. wpbeginner says:
    Jun 2, 2011 at 11:45 am

    @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.

    Reply
  47. SallyE says:
    Jun 2, 2011 at 11:43 am

    @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.

    Reply
  48. wpbeginner says:
    Jun 2, 2011 at 11:22 am

    @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.

    Reply
  49. SallyE says:
    Jun 2, 2011 at 11:10 am

    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

    Reply
  50. arabsciences says:
    Jun 2, 2011 at 10:49 am

    I have added it.

    Reply
1 2 »

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
Smash Balloon
Smash Balloon
Add Custom Social Media Feeds in WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
AWeber logo
AWeber Coupon
Get a completely FREE plan with AWeber, or 14.9% off the Pro plan. Start your email list today.
Elegant Themes
Elegant Themes Deal
Get the Divi theme with 194+ template packs from Elegant Themes for only $89. Extra, Bloom, and Monarch included free!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.