I've seen this request in a number of forums, as well as seen fellow bloggers have issues with it. I had issues with it at first too.
How do I add a Google+ Badge to my page?
Quite simply! If you have no familiarity with HTML, I highly recommend taking a look at my introduction to HTML so that we're speaking the same language.
And so, without further ado...
Adding a Google+ Badge in Blogger
This is very easy, thanks to Google's integration of everything they do into everything else that they do.
Get the ID
The first thing you'll need is the ID for the person, page, or community for which you want a badge. Luckily, it's in the URL. Suppose I want to show off my membership in Catholic Bloggers, the URL for which is "https://plus.google.com/u/0/communities/104461037989009578894". The community ID is that string of numbers at the end, "104461037989009578894". Keep that handy.
Add a Gadget to Your Layout
When you are managing your blog in blogger, there is a list of options on the left side (Overview, Posts, Pages, &c.). In that list is "Layout", which I hope you've at least looked at before. If you haven't, I highly encourage you to. There is help text all over to guide you through customizing your blog.
Personally, I have a main column with posts, and a side column on the left with information and navigation objects. That's where I want to put my badge. There's a link titled "Add a Gadget": click that, to bring up a new window with gadgets you can add to your page. Scroll through until you see "Google+ Badge," and click the plus to add the gadget to your layout.
Configure your Badge
At this point, just fill in the fields as directed. You can select Person/Page/Community, give your gadget a title (required), and adjust settings like orientation, inclusion of the cover photo, things like that. Don't worry if you make a mistake, you can always fix it later by clicking on the gadget's "edit" link in the layout editor.
Adding a Google+ Badge Elsewhere
So you're not a Blogger blogger, huh? Or maybe you have a web page you want to add the badge to? Never fret, Google still has you covered!
Generating the Badge
This is why you need to have a basic understanding of HTML. If you don't, go check out the link above.
Go to the Google Developers Badge Generator to see how to embed a badge on your page. This will require two things - an HTML object to anchor the badge (defined where it goes on the page), and a script tag which will import the necessary code to generate the badge. Very routine stuff.
Suppose I want that same badge, just in HTML rather through the gadget addition like we did before. There's a generator at the top, but if you read through the documentation you will find a shorter bit of code you can use.
Turns out that all you need to embed the link is a <div> tag with a few attributes set. Looks like this:
<div class="g-community" data-href="https://plus.google.com/communities/104461037989009578894" data-width="100"></div>
Embed the Badge on Your Site
At this point, all you need to do is copy that snippet of code, and put it into the HTML source of your page where you want it to appear. You will also need to include the script tag:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
A quick note about importing javascript, you only after have to do an import once per page. If you already have a +1, or G+ Follow widget, your page may already include this tag. Also, if you're adding multiple badges, you will only need one script tag.
So to sum up, adding a Google+ badge to your Blogger or non-Blogger site or blog is pretty simple, but you do need to have an idea of the terminology so you know what you need to do.
If this was helpful to you, please +1 and share, and follow me on Google+ and Twitter!
