5 Mar 2012

Adding a G+ Badge to Blogger

Are you on Google+? See at the bottom of this post I have a G+, add to circles badge? Want one? Here's how: 1. Go to this Google developers page. Add your Google profile id (a string of numbers) into the box. It gives you the option to click a link nest to it to autofill for you, which is handy.
2. Then choose whether you want an icon or badge. It's previewed so you can see what it will look like.
3. You can then choose your size. If you want it in a sidebar, make sure you choose a size that's smaller than that.
4. Then, in the 'Get the Code' section, there are two parts to the code. The top part is to be added into your blog's section. Copy this piece of code, then go to your blog. It's always a good idea to back up your blog before you make any code alterations.
5. Next, go to Template> Edit Html (below the picture of your blog). Click that, then click 'Proceed'.
6. Scroll down past the code carefully until you see this:   . This is the closing tag for your code and you should paste the code you copied directly before this. Click Save Template.
7. Next go back to the Google developer page and copy the rest of the code. You are going to paste this where you want the badge to be, either in a text/html widget in your sidebar, or at the bottom of your post template. To post it in a widget, go to 'Layout' then 'add a gadget' where you want it and select the text widget. Paste in and save. I have added mine at the bottom of each post. To do that, I went to Settings> Posts& Comments>Post Template and pasted it there. Now every time I open a new post, the code is ready pasted in and I just add my post above it.

If you have a Google+ page, you can do the same; the customisation link is just above the profile link on the developers page.
Bear in mind, this is for Blogger. If you have a wordpress.com site, you cannot add javascript. Instead, just choose a badge image (scroll to the static badge section) and add it to an image widget in your sidebar with a link to your page - not as fancy but it still takes them there.
If you are on wordpress.org, you can find a plugin to do the job for you.