One part of a business social media strategy is to find ways to link your social activity to and from your website. Google+ has some great badge tools with many options for customization. We won’t get into a lot of those options here, but will focus on the “quick and dirty” steps needed to get a badge on your WordPress site.

You can place badges for your profile, page or community. Most businesses have either a profile, or a page attached to a profile. If you happen to also have a community you are sponsoring or are monitoring, a badge linking to that community would also be a plus. Currently there is a plugin that places a badge widget in your widget collection. Some have had good results, some have had problems. Following is the “manual” way, which also allows for a lot of customization.

So Let’s Get Started….

Step One – Go to the Google Developer Badge Page

Google has an excellent page that has everything you didn’t want to know about placing and customizing badges. We will start here and try and guide you to the essentials. Start by going to:

https://developers.google.com/+/web/badge/

The first thing you will see is the Badge wizard. This is where we can do most of our work and then later we’ll explore a few custom options that might be useful.

 

 There are different options depending on whether you select portrait or landscape, and they change dynamically when you make those selections. The first step in this wizard it to select the User, Page or Community. The default is User and the dropdown will also have any pages that are part of that users profile.  If you don’t see what you need, select “Other” and then you can insert the URL for that page, profile or community.

 Basically go to your page, profile or community and copy the URL, only include up to the big long hairy number (unless you have a custom URL then use that instead.) leaving out the “about” or “post” part.

After you select the user or enter the URL for your page or community then you will see the example showup on the right preview. Play around with settings a bit so that you can see the options.

Step Two – Deciding where you want your Badge

Before we finalize which badge style will be best, you first need to decide where it is going. On your WordPress site there are “widget areas”.  Where and how many of these areas depends on your theme. Bring up your site and using the information you gathered in Step One, decide which type and size of badge will work best.

Next log into your site admin and go to “Appearance|Widgets”. On the right you will generally see a collection of widget areas that are available on this theme. Open a widget area that seems to be located where you think will be the best.

Above is an example of a widget area that in this theme is called the Primary Widget Area. In this area we need to drag a “Text” widget and then click the down arrow to expand it:

In the example above I have already pasted the code, but we are going to talk about that in more detail next.

Step Three – Get the Code

 Now we have all of the pieces:

1. Decided on the type of badge or badges you are interested in using
2. Reviewed your website and decided where you might want to put your badge or badges
3. Logged in and found the Widget Area that will place your badge in the right place.
4. Placed a Text widget into the Widget Area.

Back at the Google+ badge wizard make any adjustments you need to do so that it will fit into the selected Widget Area.  Once you get that finalized, scroll down and and copy the code. It will look like:

<!-- Place this tag where you want the widget to render. -->
<div data-href="//plus.google.com/105227958097219916584" 
data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); 
po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(po, s);
  })();
</script>

 If you want to place a smaller bit of code that is HTML5  compatible you can scroll down further on the Google+ Badge page you will see code like this:

<script type="text/javascript" 
src="https://apis.google.com/js/plusone.js"></script>
<div class="g-person" data-href="https://plus.google.com/{profileId}"
 data-rel="author"></div>

Make sure you replace the {profileId} with either your ID or your Custom Url ID. 

Next take you copied code and paste it into the text area:

Do NOT put a title for the Text area, leave that blank.  Click save.

Step Five – Preview and Adjustments

Once you have saved your text you can now go and preview your handy work.

The above example shows the placement of two small landscape badges for pages. These were placed in the right sidebar of the site. Note that the “script” part of the code only has to be on ONE of the badges. You can leave it off any other badges you place on that page. Therefore your second badge would only look like

<div data-href="https://plus.google.com/{profileId}"
 data-rel="author"></div>

..without the script block.

If you are happy with the results you are done!

Tweaking your Badge – Advanced

You can get really fancy with customizing your badge, but we will not be going into it that deep here. There are a couple of areas you can do some quick and simple adjustment after you have pasted the code.

Badge Width

Use the attribute “data-width” to adjust the width of your badge. Note that each type of badge (portrait or landscape) had  very specific width ranges.

Portrait layout

180-450 pixels

Landscape layout

273-450 pixels

You need to keep this in mind when you make adjustments to your badge as the code will ignore any number outside these ranges.  Your code would look like this:

<div data-href="https://plus.google.com/{profileId}"
 data-width="273"></div>

(Note that I have left off any other settings that might also be used in the above example.)

There are a number of other settings provided that will over-ride the defaults. These are found on the developer page, they are:

• Show Cover Photo – control when to show the cover photo
• Show Tag Line
• Color Theme – light or dark
• Community – Show Owners

So… Get your badge or badges on your website or blog and make that two way connection between your social engagement and profile and your website.  If you need help come on over to the Web Technology for Small Business and post your question (Notice the community badge on the right…)