How to add Google + Page badge to your blog

Now that you’ve created a Google + page for your blog, grow your audience by adding a badge onto the blog. The badge lets users add your Google+ page to their circles without leaving your blog, similar to Facebook’s Like Box, but better. Google+ badge will not only promote your blog on Google+ (social network), but will help it rank in Google search results as well.

Below are some more reasons why you would want to put up Google+ badge on your blog:

  • It gives users more personal recommendations around the web, by connecting +1’s for your blog with +1’s on your Google+ page.
  • It may qualify your page for Google+ Direct Connect, which helps users find your Google+ page and lets them add it to their circles directly from within Google Search.
  • If you’re on Google Friend Connect, now is a good time to start bringing your GFC followers to your Google+ page because Google are retiring GFC (for all non-Blogger sites) on March 1, 2012.

 

I) Adding Google+ badge

  • Adding to Blogger
    1. Go to Layout (old interface: Design > Page Elements).
    2. Click Add A Gadget and select HTML/Javascript gadget.
    3. Copy the code below and paste it inside the content box.
      <!-- Google +1 script -->
      <script type="text/javascript">
        (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/plusone.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
      <!-- Link blog to Google+ page -->
      <a style='display: block; height: 0;' href="PUT YOUR G+ PAGE URL HERE" rel="publisher">&nbsp;</a>
      <!-- Google +1 Page badge -->
      <g:plus href="PUT YOUR G+ PAGE URL HERE" height="131" width="300" theme="light"></g:plus>
      
    • Omit the Google +1 script (line 1 to 8) if you already have a Google+1 button on your your blog.
    • Replace PUT YOUR G+ PAGE URL HERE with the URL of your Google+ page.
      To get the page URL: Login to Google+ > Switch to your page via the dropdown menu on top left corner of your screen right under your profile name > Get the URL from your browser’s address bar.
  • Adding to WordPress
    1. Go to Dashboard > Appearance > Widgets > Available Widgets.
    2. Drag Text widget into a sidebar.
    3. Paste in the code.
    4. Save.

II) Configuring badge (updated Feb 2012)

Currently you can only customize the size of the badge,  by setting the size attribute on the g:plus tag in line 12.

You can customize the badge by changing the values of attributes in the g:plus tag in line 12. Please refer to the table below for details.

  • To opt for small badge (i.e. standard badge minus the Google +1 button, thumbnails and circle count), change the height.
  • To set the background to black instead of white, change the theme.
  • To change the width of the badge, change the width.
    -The maximum value for the width is 1024(px).
    -The minimum is 160(px) for standard badge and 100(px) for small badge.

Size

Badge

Attribute

Value

Standard badge

google plus badge lightNote: For standard badge, the number of items being displayed on the badge depends on its width. Narrower widths will display less items.

height

131

Small badge

google plus small badge

height

69

Dark theme

google plus badge dark

theme

dark

Badge width

google plus page badge width

(pictured: width="200")

width

put width value here

Note: If your Google + page name is short enough, the “We’re on” phrase in front of the red G+ button will be replaced by  “[PageName] on”.

Enjoy!

52 comments to "How to add Google + Page badge to your blog"

hosting reviews November 28, 2011 at 7:11 PM    

All these ideas will really help me in the future to have a successful blog MORE!!

softechnogeek November 28, 2011 at 8:31 PM    

dude very thanks much but i didn't understand why my page name-softechnogeek is not displaying instead of this it displaying “We’re on” plze help me to change into my page name

hosting reviews November 28, 2011 at 9:42 PM    

I read this article. I was very impressed by its contents.))

gen November 29, 2011 at 1:08 AM    

Thanks for the code...
Its working.

Technology November 29, 2011 at 11:09 AM    

Thank for sharing this widget with us. Adding this badges on blog will really help to increase the number of people in circles.

Greenlava November 29, 2011 at 4:51 PM    

@softechnogeek
You page name is too long.
From what I've seen 7 characters is acceptable, and 9 characters is too long. So maybe the limit is set at 7 or 8 characters.
Oh you can change your page name, but only twice I think. So think hard before shortening your page name (if you choose to do so).

zulkbo November 29, 2011 at 6:56 PM    

Bro..

Memang terbaik dan membantu sekali entri nih..
Apa pun inilah satu-satunya entri yang saya jumpa
pasal letak gatget Google + jenuh dah saya Google
di internet tak jumpa :)

SOFTECHNOGEEK November 29, 2011 at 8:55 PM    

Thanks but I don't wan't to change my name

Greenlava November 30, 2011 at 10:22 AM    

@zulkbo
Kalau ada pun, kebanyakannya suruh tambah kot kat dua tempat, satu kat < head> dan satu lagi dalam widget.
Saya simplifykan supaya hanya perlu masuk kod dalan widget sahaja.

Rina As December 4, 2011 at 3:24 PM    

Blog saya belum sempat ditambahkan widget Google+ page
Terima kasih, tutorialnya sangat membantu..

saif afridi December 6, 2011 at 3:54 AM    

nice article.i think google plus pages will surely attract visitors.
and it will minimize the dependence on search engine for traffic with the passage of time.facebook is already rocking in social networks.

santhosh December 8, 2011 at 9:53 AM    

Valuable info. Lucky me I found your website by accident, and I’m shocked why this accident did not happened earlier! I bookmarked it.

Free Online Dating December 10, 2011 at 1:35 AM    

Great information! I’ve been looking for something like this for a while now. Thanks!

farey December 14, 2011 at 5:41 AM    

Does it work for G+ profiles too? I could not get this work on my google+ profile. Any suggestion please..?


www.fareyferrai.com

Greenlava December 14, 2011 at 3:38 PM    

@Farey Ferrai
As far as I know the badge doesn't work on profiles.

Technology December 15, 2011 at 12:26 AM    

Wow, it's working on mine blog, Thanks!

Software Crack January 6, 2012 at 7:44 PM    

not working. :(

Greenlava January 7, 2012 at 3:10 AM    

@Software Crack
Care to elaborate?

Aditya Samitinjay January 7, 2012 at 4:58 PM    

Woah, It's not working on my blog, Replaced the PUT YOUR UEL HERE with my page links, this https://plus.google.com/u/0/b/116755032082969392653 and I put it up and it isn't showing up. Please help?

Greenlava January 7, 2012 at 11:26 PM    

@Aditya Samitinjay
Add a slash (/) at the end of the URL, like so:
https://plus.google.com/u/0/b/116755032082969392653/

Hope that helps.

Lok Bahadur Thapa January 14, 2012 at 4:58 PM    

thanks for providing this tips :)

Unknown January 31, 2012 at 10:40 AM    

This is awesome. The only thing missing is the ability to change the width. Right now, it's too wide for my right hand colum of my site.

Greenlava February 2, 2012 at 9:14 PM    

@Patrick
You'll be able to change the width soon. Read about it here: More options for Google+ badges

Greenlava February 3, 2012 at 6:52 PM    

Update: We can now change the width of the badge. Please refer to "Configuring badge".

shahblogger February 4, 2012 at 9:39 PM    

1 soalan bro : Boleh tak kalo aku nak buat badge n button add tu tp connect ngan google plus PROFILE? bukan google pages? :) thanks thanks

Robert andrew,  February 4, 2012 at 10:38 PM    

The bad part is it is only available to Google+ pages. For individual bloggers, profiles work out better. Google+ should allow badges for profiles as well. Wordpress has many plugins to show badges for profiles -
http://wordpress.org/extend/plugins/gplus-badge/

Greenlava February 5, 2012 at 12:24 AM    

@shahblogger
Tak boleh, badge ini untuk page sahaja. Untuk profile boleh cuba yang ini Installing “Add me on Google Plus” widget

Ajnabii February 12, 2012 at 6:17 AM    

Hello Dear, its really wonderfull post, helped me out for adding Google+ Page on my blog, i have added! its working all credit goes to you. nice informated Blog keep posting.

Thank you so much.

Vic February 13, 2012 at 1:46 AM    

Very helpful tutorial. I've been looking for this. I want to put the clean Google+ button add to circles on my blog. Thanks.

amit February 15, 2012 at 6:05 PM    

Can you tell me how to change we're word with site name in google plus badge

Greenlava February 15, 2012 at 7:11 PM    

@amit
Your page name is too long. But I tested it, the name showed up when I set the width to 350.

sunil February 23, 2012 at 9:53 PM    

wow nice tutorial bro.....u r gr888888

It wrks for me :-)

Saurabh Hooda March 28, 2012 at 5:38 PM    

thanks for the article.
i guess you are using old layout of Blogger hence you mentioned Design > Page Elements but in new blogger the HTML/CSS widget is under Layout section.

Anonymous,  April 10, 2012 at 5:30 AM    

Now a days search engines become social. That's why it's really necessary for bloggers to use Google Plus Button on blog. It's really get more visitor cause your Google plus friend get your site easily in 1st at Google if any topic related to his search.

Project Management Class April 23, 2012 at 12:00 PM    

Another interesting feature inside of Google Plus is Sparks. This basically allows you to receive information related to your personal interests.

கவிதை வானம் June 30, 2012 at 10:59 PM    

THANKS FOR SUPER TUTORIAL GOOD FRIEND

Unknown July 2, 2012 at 5:22 PM    

Add widget to design much easy than the first one....

Uthpala Dilhan July 31, 2012 at 2:16 PM    

Thanks a lot for your valuable support.. =)

Honeybee August 6, 2012 at 3:31 PM    

Looking everywhere on the internet ways to install google plus badge, and at last my search ends here. tengkiu =)

Ramadan Kareem August 14, 2012 at 8:04 PM    

Wow, it's working on mine blog, Thanks!

Efoghor Joseph Ezie September 14, 2012 at 3:22 AM    

Thanks for this tutorial. I just followed your steps to add a Google+ badge on my blog and it worked perfectly.

Gordon Robinson September 20, 2012 at 12:16 AM    

Hey excellent G+ note ...thanks for that ..added to my blog ... learn something new everyday ...many thanks!!

Unknown October 1, 2012 at 9:57 AM    

Can we edit Google Page name to make it short enough to appear? How?

Unknown October 1, 2012 at 9:58 AM    

Can we edit our Gogle + page name afterwards to make it short enough to appear or are we stuck with it once its done?

Greenlava October 3, 2012 at 5:05 PM    

@Chris Burpee
I don't think you can :)

Unknown November 13, 2012 at 1:39 AM    

thanks for posted this one i have blog now to look good and nice with this

Ajay November 25, 2012 at 4:56 AM    

very nice page

ZOPRAN MOBILE BLOG December 6, 2012 at 10:32 AM    

great tutorial..

thanks for share with us..

Unknown February 4, 2013 at 12:34 PM    

Do you know how I can remove the border around this widget?

Thanks!!!

Greenlava February 7, 2013 at 2:05 AM    

@Monica
Unfortunately you can't :(

Unknown July 1, 2013 at 11:24 AM    

Thanks for sharing.worked well.

d August 4, 2013 at 2:18 PM    

thanks!!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.