An unofficial blog that watches Google's attempts to move your operating system online since 2005. Not affiliated with Google.

Send your tips to gostips@gmail.com.

November 9, 2011

Google+ Badges

Now that you've created a Google+ page for your company, product or blog, how do you get people to follow the page? The answer is the Google+ badge, a customizable widget that helps you connect your site to a Google+ page. "The Google+ badge helps you grow your audience on Google+ and show more recommendations in Google search by letting people add you to their circles and +1 your page, all without leaving your site," explains Google.

Right now, the badge is only available if you sign up for the Google+ Platform Preview, but it will soon be publicly available. If you already have a Google +1 button on your site, you only need to add two lines of code.

1. connect your site with the Google+ page by adding this code to the <head> section of the HTML document:
<link href="https://plus.google.com/PAGE_ID/" rel="publisher" />

(where PAGE_ID is the long number from the URL of your Google+ page).

This has the added benefit that the page may qualify for Direct Connect and people can visit the page by typing +PAGE_NAME in Google's search box. "In addition to helping us better index your Google+ page, this snippet will help you show more personal recommendations around the web by linking your +1's on sites, your Google+ page, search and display ads," mentions Google.

2. add this code where you want to place the badge:
<g:plus href="https://plus.google.com/PAGE_ID/" size="badge"></g:plus>


You can also add static badges that only include an icon and a short text, although it's probably easier to manually add the icon and link to the Google+ page.

Use this page to generate the code, but make sure that you subscribe to the Platform Preview group to see the badge. Please note that only those who subscribe to the group can see the badges and try other new features that aren't publicly available.
Posted by at
Labels:

22 comments:

  1. codyNovember 9, 2011 at 3:21 PM

    thank you for this

    ReplyDelete
  2. Andrea PerniciNovember 9, 2011 at 4:14 PM

    The badge script works only in Chrome.

    ReplyDelete
  3. Alex ChituNovember 9, 2011 at 4:39 PM

    It should work in most browsers (I tested the badge in Firefox 7, IE9). Make sure that you are logged in and you use the same account.

    ReplyDelete
  4. ReinerNovember 10, 2011 at 1:02 AM

    The badge script works in all browsers. But you can only create a Google+ badge with the preview link right now which needs that a person needs to be a member of the preview group to see the badge.

    ReplyDelete
  5. UnknownNovember 10, 2011 at 9:35 AM

    Hi
    Is any way to activate direct connect on a website created with Google Sites?

    The problem is, I have no acces to HEADER

    ReplyDelete
  6. DinuNovember 11, 2011 at 10:00 AM

    will it take some time for it show up? I signed up for the preview group only now..

    ReplyDelete
  7. SuzieNovember 17, 2011 at 2:04 AM

    Any ideas how to customise the look? I've used size smallbadge, which gets rid of the followers, but it is still too bulky.

    ReplyDelete
  8. Karl CaillouetNovember 17, 2011 at 10:49 AM

    Putting Google generated code snippets for G+ Badge on my old Web 0.0 website, www.ewoodshop.com, for pointing to eWoodShop G+ Page:

    https://plus.google.com/b/114902129577517371552/114902129577517371552/about

    As you can see, I want the link to go to the "about" page, but it looks like Google's java script is changing that to the "posts" page:

    https://plus.google.com/114902129577517371552?prsrc=1

    Until Google released the new Badge code with the +1 and circling feature, the href worked as intended in both locations (head and badge location ... see page source on website).

    Anything I can do on my end to get the link to actually go to the About page?

    (Yeah, I know, I'll yank that old website into the 21st century one of these days, but it is not a priority at the moment)

    Thanks!

    ReplyDelete
  9. AnonymousNovember 21, 2011 at 8:46 PM

    Hi, is it not possible to add callback to google+ badge? Thanks

    ReplyDelete
  10. eKoderNovember 23, 2011 at 3:57 AM

    Why there is too much padding in the badge.
    Waste of space.

    ReplyDelete
  11. Adelson (Gerenciando Blog)December 10, 2011 at 6:53 AM

    Hi, Alex!

    It worked like a charm for me! It's very nice seeing my blog now integrated with Google+.

    Thanks for sharing!

    ReplyDelete
  12. Michael TiemannJanuary 5, 2012 at 3:35 AM

    Nice, but it's horrible that we cannot change the background color to match our css. Maybe I'm missing something?

    ReplyDelete
  13. AnonymousJanuary 8, 2012 at 8:23 AM

    Does Google support the functionality to add a button to a company home page that allows consumers to add the company brand to their circles on Google+.

    ReplyDelete
  14. Rahul RoyJanuary 12, 2012 at 11:10 AM

    When adding link href="https://plus.google.com/PAGE_ID/" rel="publisher" /> code in head section it shows html related errors plz help

    ReplyDelete
  15. Shailesh TripathiJanuary 16, 2012 at 2:26 PM

    I love google badges and looking for more quality badges, can anyone provide.

    ReplyDelete
  16. iTechingJanuary 18, 2012 at 8:15 PM

    most of us would like to fchange the width of the badge
    here is the solution.
    http://iteching.blogspot.com/2012/01/how-to-change-width-of-google-badge.html

    ReplyDelete
  17. JohnJanuary 18, 2012 at 9:22 PM

    You can use CSS to adjust the height and width of the Google+ badge to match the layout of your blog or website. Here is a typical example of how to use CSS to change the dimensions of Google+ badge: http://www.zlobber.com/resources/10049-How-customize-Google-badge-adjust-width.aspx

    ReplyDelete
  18. Peter G McDermottJanuary 22, 2012 at 12:48 AM

    Google,

    I've kind of built my brand around my name, so I would like to have a badge on my website to point to my profile. Is there a reason you have limited this to pages?

    ReplyDelete
  19. SkipserJanuary 22, 2012 at 9:49 PM

    Changing the badge's width will hide off parts of it causing it to look bad. Here's another solution -
    Customisable Google+ badge

    ReplyDelete
  20. GaryFebruary 19, 2012 at 1:36 AM

    Skipser: Thanks for the tip!

    ReplyDelete
  21. Urban PinayMarch 15, 2012 at 12:11 AM

    I like the fact that we can add Google badge to websites. But I hope Google+ can give use vanity URL's pretty soon too.

    ReplyDelete
  22. Phone ManiaAugust 14, 2012 at 5:13 AM

    it is not working on my blog. tell me some other way.

    ReplyDelete

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)