Google Plus For Business

After seeing other Google+ users asking for a better badge for business and personal profiles, I decided to show you how to do it yourself

Below is the step by step directions to create your own badge like mine you see here for WordPress and Blogger sites.

Since you have already probably used the HTML gadget on Blogger or the Text Widget on WordPress to add your badge, it does not take much more to make it a better converting badge. All you have to do to add a personal image, business logo and a call to action to your Google Plus badge widget is add a few lines of code.

Here is the code piece by piece, don’t worry, at the end I have a copy and paste box for the least adventurous :]

Add a bounding box

Some themes like mine do not offer a bounding box or a header. Easy to fix. Just add this code to the first line of the sidebar widget.

<div style=”border: solid black 1px; width: 300px”>

G+ BADGE CODE HERE

</div>

Adding a Call to Action

Both the HTML gadget on Blogger and the Text Widget on WordPress offer a Headline text box. Use that for a “Call To Action” headline like “Follow Google Plus For Business On Google+”… If that is not to your liking you can use an H3 tag to create a headline.

<h3 style=”red”>REPLACE WITH HEADLINE TEXT</h3>

Just add that with your own headline text just above your G+ badge code line.

Adding a picture

Adding an image of yourself always has been a conversion king going back to my first day on the web in 1999. Here is how to add any image you like to the badge widget.

<img src=”PATH TO IMAGE” alt=”Google+ profile image” / >

That is all it takes to create an image in HTML. I would suggest that you use an image about 175 pixels wide so it fits the side bar well.

Center the code in the sidebar

All it takes is two simple lines of code to center your HTML in the side bar like mine is on the right.

<center>

</center>

Last, Break Up Code Lines

<b/>

That is called a break tag, it puts what is called a carriage return or a paragraph spacing between HTML blocks of code.

Putting it all together

<center>

<div style=”border: solid black 1px; width: 300px”>

<h3 style=”red”>REPLACE WITH HEADLINE TEXT</h3>

<img src=”PATH TO IMAGE” alt=”Google+ profile image” / >

<b/>

G+ BADGE CODE HERE

</div>

</center>

Can’t do that? Here is the HTML for you…

Badge Code text file…

Right click that file and save it to your desktop. Then open it with notepad in Windows, on a Mac, open it with your text editor.

Now just copy and paste that text into your text widget like the screen shot below, replacing the GOOGLE BADGE CODE with your own badge code or existing badge code in a widget.

Adding code to text box widget (click for full size)

Bottom line here – “Don’t have a boring widget, don’t have a boring Google+ following…”