How to add Google +1 (Plus One) share button in my website / blog?

If you liked this article, you may also like:

Read this post to learn how to place Google+ profile (Add to circles button) on WordPress blog sidebar

Finally Google publicly announced +1 (Plus One) share button and few details about their partners. +1 may become a game changer as it may alter your Google result page link positions according to your Gmail Contacts’ share preferences.

If you’re a webmaster, you can get the +1 button code and learn more about implementation on Google’s +1 webmaster site. I thought I would share the same code with you and give you some more options to play with.

How to add Google +1 in any website (non-specific link)

1 2	<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

1 2	<!-- Place this tag where you want the +1 button to render --> <g:plusone></g:plusone>

How to add Google +1 in any website (specific link)

To place the +1 share button with a specific link, you will need to share the Advanced Options. Just replace the YOUR_WEBPAGE_LINK variable with the page link.

1 2	<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

1 2	<!-- Place this tag where you want the +1 button to render --> <g:plusone href="YOUR_WEBPAGE_LINK"></g:plusone>

How to add Google +1 in your WordPress blog

I’ve not found any plugin to place the share button for WordPress yet. Until any plugin is available, you can always manually edit your WordPress source code and place the button code.

1 2	<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

1 2	<!-- Place this tag where you want the +1 button to render --> <g:plusone href="<?php echo get_permalink(); ?>"></g:plusone>

Finally…

Backup the file before you try to change your source code. Google said they will allow webmasters to see the sharing statistics soon.

Let me know if you have any problem in placing the +1 share button.

Thank you

Regards,
Jinnat Ul Hasan

By Jinnat Ul Hasan | On Thursday, June 2nd, 2011 | Under How To's | 27 Comments »

DO YOU NEED OUR HELP?

Contact our experts, most of the time we assist our readers free of charge.

Those who found this page were searching for:

how to add a google plus one button on a webpage
how to share my page in google+#sclient=psy
add google link to our website
share content on google plus
share website on google plus
plusone.js google
google plus one share
adding google plus one to my website
how to share a google plus one
share button plus one

{ 26 comments… read them below or add one }

Toolinfy January 31, 2012 at 5:25 pm

The Google + button only appears online.
I had the same problem when I tested it offline, so
you have to move it on a page which is online!

Eli October 24, 2011 at 7:36 am

How to add Google +1 in any website (specific link)

Thanks!

webmasternic October 16, 2011 at 2:33 pm

Hi,

I pushed the Google +1 button on my website. The code is valid HTML 5. But I have the problem because when the text is strong Google +1 doesnt apply the style and remove the space. I use singlepic from the plugin nextgen gallery and when I share a page, Google +1 push the altenative text or title text from image.

Can you help me please.

Jinnat Ul Hasan October 17, 2011 at 1:19 pm: Please contact WordPress experts, and they will help you.

Thanks.

Reply

sam October 14, 2011 at 6:19 pm

how to auto share my blog post on google plus ??

envy September 29, 2011 at 8:50 pm

Hello. I tried all possible solutions but the +1 button is not visible. I am using Adobe Dreamweaver and my site is still “offline”. The +1 button won’t show. Fb and Tweet button are visible.

Jinnat Ul Hasan September 12, 2011 at 2:29 am: Please contact our support team, they may give you some useful suggestions.

Reply

Marco September 17, 2011 at 10:38 am

The Google +1 button is similar to the facebook like button. However, I think the +1 button will dominate as the Google+ network grows.

Also, I found out that you can even buy +1 now on sites like http://plussem.com and http://plusonefans.com

What do you think about this?

Jinnat Ul Hasan September 17, 2011 at 2:04 pm: I not really into buying links, +1 or Links. Thanks for sharing anyway.

Reply

Joshua August 1, 2011 at 7:22 am

Ok this one might be a bit too crazy for me! LOL I actually added the +1 to my site using a plugin which made it very easy.

Jinnat Ul Hasan August 1, 2011 at 12:01 pm: Hi Joshua,

I published the post when +1 just released and there was no plugin for WordPress. I’m quite sure there are many plugins available for WordPress now. I tried a plugin by @wpmudev, that didn’t work for me. I asked for assistance via Twitter, didn’t receive any response

Thanks anyway.

Reply

Rit July 29, 2011 at 9:52 am

Hi
I did what they said step by step. Do it over and over again. I cannot see Plus 1 button on my page when I test it.
I cannot figure out how as I did follow what the google said.

Could you help to explain the possibility why it won’t show on my actual page.

Thank you so much

Mohir July 17, 2011 at 11:44 am

Thanks for this,
it was very easy to follow and implement,
i have one problem, in the +1 page of google+
there is no thumbnail.
can you please explain how can i change this
the page with the button:
http://www.mohir-art.cpm/potd.php

thanks

Jinnat Ul Hasan July 17, 2011 at 4:51 pm: You need to change the +1 code on potdisp.php file.

Reply

Billy July 14, 2011 at 6:02 pm

Hi… thanks for posting this information… not good with the code yet, created my website… cheated i suppose one could say… with… MyobAtlas.

Tried this code many times, save it and nothing happens, same as with trying to add paypal logo ?
Maybe i am simply doing something really wrong ? … obviously or can not do on my site ?

Any help would be really nice !
Kind Regards… Billy.

Jay July 12, 2011 at 8:56 pm

How about if you want to use a custom icon for the +1?
eg:
[img]http://dl.dropbox.com/u/1220621/ico-google_plus.png[/img]

Jinnat Ul Hasan July 13, 2011 at 2:36 pm: I was checking Google +1 API documentation, but didn’t find any parameter to change the default image at the moment.

Sorry mate

Reply

Rob Abdul June 28, 2011 at 4:18 pm

This is great tutorial, I shall bookmark it for future reference.

Jinnat Ul Hasan July 1, 2011 at 4:01 pm: Thank you Rob

Reply

Zachary Meiu June 14, 2011 at 6:20 pm

How much of a “game changer” do you all feel this will be, and can people only click on the +1 when they have a Gmail account?

Jinnat Ul Hasan June 25, 2011 at 6:43 pm: It’s too early to predict, but the way searcing is becoming a major factor in SERP, we can hope this will have great influence.

Yes, people logged in their Google account can only use +1 buttton and those links will be displayed in their Google Profile.

Thanks for your comment.

Reply

Sarah June 5, 2011 at 9:29 am

Thank you. I have seen this in few websites recently and I wish to have that also.

dwarde June 3, 2011 at 3:30 pm

Can i place it on my Sidebar?

Jinnat Ul Hasan June 4, 2011 at 3:42 pm: Yes, you can place +1 button in sidebar. But you can’t place with php (#3) code.

Thanks for your comment.

Reply

vishnu June 3, 2011 at 6:22 am

Where should i paste the code in my wordpress blog?

Jinnat Ul Hasan June 4, 2011 at 3:49 pm: You need to change your source code by going to Dashboard > Appearances > Editor and place the code in either index.php or single.php depending on your theme.

Let me know if you need further assistance.

Thank you.

Reply