5 Tips for Adding a Google+ Badge to your Blog

The blogosphere and the social media world in general is buzzing with news about Google’s new badge for promoting your Google+ page on your website. In case you’ve been living under a rock, you first need to create a Google+ Page for your blog. It’s easy and the only tough part is deciding which category to put it in to. The fourth option is called “Arts, Entertainment or Sports.”  Select that, and choose “Blog” from the drop down menu. (I got it wrong the first time, but it doesn’t seem to make too much of a difference.)

The Google+ badge is pretty cool and you can see how it looks on the right sidebar. You can customize the appearance and it rolled out to the public just today. Use this configuration tool to get the badge for your blog which is probably your pride and joy. But I had a few problems with it and so to save you time and effort, here are my tips for adding it.

1. Create a Google+ page name with 10 characters or less

I don’t know if this will be changed later on, but if your Google+ page’s name is more than 10 characters, the badge will read “We’re on” instead of the actual name which you’d like to use. Unfortunately, there’s no way I can make my Google+ blog page’s name less than 10 characters so I’m stuck with the unintuitive message.

I feel there should be a way to change the text to something simple like “I’m on” or “Follow me on” rather than whatever the page name is. As of now, your blog name will appear on the badge only if you can write it in less than 10 characters.

2. Expand your Sidebar to accommodate 300px

Even with all the badge customization options, there’s no way to get the standard badge functionality without having at least 300px width on your sidebar. I use a very customizable theme called Atahualpa which is also free so I was able to play around with the sidebar width, remove the padding for that one widget and keep the margins in tact. You can see that it sticks out ever so slightly on the right compared to the widgets above and below it.

3. Place the Javascript at the footer

You can do as Google says and place the javascript code in the header. But freaks like me like to squeeze as much speed out of my page as possible so I place it in the footer instead.

Note: The <link href=”…” rel=”publisher” /> has to to remain in the header. This will tell Google+ that you’re linking your Google+ page to your website. More on this later.

4. You can still keep your +1 buttons for individual pages

So the rule is this. The “+1″ functionality on your Google+ badge is for your home page only and for your blog overall. So no matter which page your users are on, when they “+1″ the Google+ badge, they’re voting for your blog and not that specific page. I recommend you keep +1 buttons above and below your individual posts to allow users to recommend stand alone posts.

Note: If you’re using the +1 button and the Google+ badge, you have to add the Javascript code only once

5. Link to your Website from your Google+ Page

To complete the circle, go to your Google+ page, click “About” and then “Edit Profile.” Hit the “Recommended Links” page and add your homepage URL to it. So now Google has links to (via the rel=”publisher” link in the header of the blog) and from your website and the Google+ page thus confirming your ownership of both. This will have trickle down benefits later on.

Of course, I have a hosted blog of my own so I can muck around with it as I please. Those using wordpress.com free hosting will be more restricted since I understand that they don’t allow custom javascript insertion (for good reason.) But I think wordpress.com users can already add the +1 button using the Settings->Sharing options in the dashboard. I hear they’re considering adding support for Google+ badges in the future as well, so good luck with that!

Blogger of course should have support for both +1 buttons and Google+ badges right out of the box. You can already mess around with your template and insert it manually.

Google is famous for iterating its products so a lot will probably change in the future and flaws will be wrinkled out. As of now though, I hope this information helps you get started with your Google+ badge and page.

Comments

  1. Thanks, Bhagawad. I’ve added to my blog.

  2. Shail says:

    Thank you too :)

  3. Didn’t realise it was available on wordpress.com!! Thanks – just added it.
    Rushed to add it before commenting :)

  4. tomiga says:

    Thanks for this hints I was searching a while information about page name (We’re) because I was completly confused why there is no my page’s name and how I can change it.

  5. Making easy to change width of the badge it the size of sidebar is less than 300px

    http://iteching.blogspot.com/2012/01/how-to-change-width-of-google-badge.html

  6. Harsh Mathur says:

    Changing width of badge using css is violating Google T&C. If you get noticed, you could loose your G+ account and adsense as well :-(

    Other third party badges are available which can be customised to fit blogs with varying sizes. An example – http://goo.gl/VcoHv

    But still third party ones are not the complete solution and its very depressing Google hasn’t bought out any customisations even after this long time.

  7. Ugochi says:

    Please can you help me with more details especially on the JAVASCRIPT? I realy want the google badge.

Add Your Comment