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!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

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

    How to Start Your Own Podcast (Step by Step)

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

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

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

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. Jimmy Olano says:
    Mar 12, 2016 at 4:25 am

    Quick and very simple, thanks!

    Reply
  2. Wesley Touchstone says:
    Jun 7, 2015 at 9:07 pm

    Why does Google plus 1 plugin for wordpress ad a plus 1 box to the start of each page under the title? can it be removed and leave the widget only in the footer?

    Reply
  3. Mohammed says:
    Dec 9, 2013 at 4:35 pm

    I think it is a must to add the author’s name after or before the post and display it to users to complete the verfication process.

    And you do this perfectly on your site and always end your post with : by syed balkhi.

    Do you agree with me ?

    Reply
  4. Elkees Media says:
    Nov 18, 2013 at 10:22 pm

    Hi there, I just want to know which plugin are you using for SHARE & COMMENT. Actually I like this plugins for my informative blog.

    Reply
    • WPBeginner Support says:
      Nov 19, 2013 at 11:02 pm

      We use a customized version of Floating Social Bar.

      Reply
  5. Stani says:
    Nov 5, 2013 at 6:40 am

    Hi, Can you please tell me why is my google plus counter not working on my site

    I’m using sociable plugin on my wordpress site.

    Reply
    • WPBeginner Support says:
      Nov 6, 2013 at 8:10 pm

      There could be many reasons for the counter to not work on your site. Try using Floating Social Bar and let us know if the problem still exists.

      Reply
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. wpbeginner says:
    Jul 26, 2011 at 8:04 am

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

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

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

    Reply
  15. 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
  16. mrahmadawais says:
    Jul 18, 2011 at 9:42 pm

    i also need this

    Reply
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. Kamil_ace says:
    Jun 21, 2011 at 2:16 am

    how do i add the button in smart sharing plugin?

    Reply
  23. 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
  24. 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
  25. 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
  26. 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
  27. wpbeginner says:
    Jun 7, 2011 at 3:30 am

    @michel.fortin @itsdaniel0 great find :)

    Reply
  28. 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
  29. georgetasioulis says:
    Jun 6, 2011 at 3:57 pm

    @wpbeginner thnx I will check it out ;)

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

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

    Reply
  31. 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
  32. coolcash4live says:
    Jun 6, 2011 at 5:50 am

    This is awesome post. Thanks for this information

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

    definitely …. i already add it to my wordpress blog

    Reply
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. wpbeginner says:
    Jun 4, 2011 at 10:37 am

    @capecalendar Try the code now.

    Reply
  43. 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
  44. 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
  45. dicarlod says:
    Jun 3, 2011 at 4:15 pm

    hey :)

    and how can we add it to the side bar ?

    Reply
  46. 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
  47. 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
  48. AzharKamar says:
    Jun 3, 2011 at 3:58 am

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

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

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

    Reply
  50. 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
« 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
PushEngage
PushEngage
Increase your website traffic & revenue with push notifications. 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)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
Beaver Builder Coupon Code
Beaver Builder Coupon
Get the best possible price on this easy drag-and-drop page builder plugin. From just $99 in 2020.
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.