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.

22 comments:

  1. The badge script works only in Chrome.

    ReplyDelete
  2. 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
  3. 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
  4. 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
  5. will it take some time for it show up? I signed up for the preview group only now..

    ReplyDelete
  6. 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
  7. 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
  8. Hi, is it not possible to add callback to google+ badge? Thanks

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

    ReplyDelete
  10. Hi, Alex!

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

    Thanks for sharing!

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

    ReplyDelete
  12. 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
  13. When adding link href="https://plus.google.com/PAGE_ID/" rel="publisher" /> code in head section it shows html related errors plz help

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

    ReplyDelete
  15. 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
  16. 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
  17. 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
  18. Changing the badge's width will hide off parts of it causing it to look bad. Here's another solution -
    Customisable Google+ badge

    ReplyDelete
  19. 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
  20. it is not working on my blog. tell me some other way.

    ReplyDelete

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