Items on eBay

Tuesday, January 18, 2011

How to Design and Code Web Badges

Web Badge 101
If you're not sure what a web badge is, it's a small photograph or illustration that can be added to a blog or website sidebar that helps to promote a company, cause, website or blog. I know some of you would like to use them to promote your own company but you aren't sure how they work. Here is a brief tutorial about how to create your own web badge using my friend Casey's business, "Rewarding Behaviors Dog Training," as an example:

This is the goal: Create a web badge and text area where fans can pick up the code to create a badge they can post on their blogs and websites to introduce your site to their readers. Your fans will only copy the image as a link back to your site but to offer them the code to do that you'll need to create the text area below the badge.

1. Create Your Graphic using a photo editing or graphic design program.

Size: Many sidebars are no more than 200 pixels wide so try to keep your graphic more narrow than that. I usually design them from a minimum of 125 pixels wide to a maximum of 200 pixels wide. The height can vary from no higher than the text it takes to write your company name to anything on up. Go too high and you've created a skyscraper advertisement. I try to keep my badges no higher than 250 pixels high.

The best thing is to create badges of different shapes and sizes so people can choose the one that best complements the size of their sidebar. (For an example view the "Web Badge" page on The Flirty Guide)

Logo: Incorporate your logo design to increase visual branding

Colors: Make sure the colors of your badge match or complement the colors of your website and/or logo for visual branding purposes.

As an example of how to create the graphic to use as your web badge I'll show you the steps I used to create a web badge for my friend Casey's dog training company (using Adobe Photoshop).

This is Casey's website home page. Notice her logo design in the upper left corner.

I Googled and found this larger version of her logo in Google images.

The six steps to create her web badge. Beginning at top left:
1. Laid in the background
2. Created the border
3. Added her logo icon
4. Added her company name and a description about her company
5. Added her location
6. Added the stars from her logo design

Make sure you add in your company name and, if possible, a few words about what service or product you have to offer.

Maybe you're a photographer and you post a picture of a cupcake. If it doesn't include your name viewers may click on your graphic because they'll think you're a baker. That's a problem. You may generate interest but it won't be to your target audience. See the difference?

2. Upload Your Image File: You can upload your badge image file to your website server. You will need the direct URL address that leads to your image so that you can link to it and draw it up when users paste your badge onto their website or blog.

The benefit of hosting the image yourself is that if you want to update what the badge looks like, you can make the needed changes, upload to your server and everyone who has used your code will now show the newly modified image on their blogs and websites.

3. Create the HTML Code people can copy and paste into their blogs and websites to make your web badge appear.

Because typing them in the post would convert them to HTML to show you what the HTML code you will need looks like I had to switch out the standard angled brackets that look this < and this > to parenthesis like these ( ). So the code you can see below would need all of the parenthesis converted to angled brackets to work.

(a href="http://URLtoYourBlogPostGoesHere.com")(img src= "http://theflirtyguide.com//badges/the-flirty-blog-weddings.jpg" border=0 height=180 width=180)(/a)

Don't feel overwhelmed. Slow down. Look at the code and how it breaks down. The Red code creates the link viewers will visit if they click on the badge. The Blue type is the code that creates the image.

(a href="http://URLtoWhereYouWantTheBadgeToClickTotGoesHere.com")(img src= "http://URLtoWhereYourImageIsHostedGoesHere.jpg" border=0 height=ImageHeightInPixelsGoesHere width=ImageWidthInPixelsGoesHere)(/a)

Here is an example of the actual code for the above web badge:

4. To Post the Code Online Using a Text Area Use this simple form method where visitors can see the code contained into a small text field box. You can copy a version of the code that includes the "form" code that creates the text box below. To make the box wider increase the number of columns. To make the box higher increase the number of rows.

In the example below:

Green letters are the code that creates the web badge image above the box.
Bright Pink is where the text box begins and ends.
Red is where your badge links to.
Blue is the code that sources the image file.

(div align="center")(img src="http://URLtoWhereYourImageIsHostedGoesHere.jpg" width="WidthInPixelsGoesHere" height="HeightInPixelsGoesHere" /)(br /)(form)(textarea rows="6" cols="20")(a href="http://URLtoWhereYouWantTheBadgeToClickTotGoesHere.com")(img src= "http://tURLtoWhereYourImageIsHostedGoesHere.jpg" border=0 height=HeightInPixelsGoesHere width=WidthInPixelsGoesHere)(/a)(/textarea)(/form)(br /)(/div)

To use the code above to create your own image and text box filled with code for your readers to copy and paste:
  1. Copy and paste it into a text editing program and convert all of the parenthesis to angled brackets.
  2. Convert the http://URLtoWhereYourImageIsHostedGoesHere.jpg 
    to the direct url to where your image is hosted.
  3. Convert the red http://URLtoWhereYouWantTheBadgeToClickTotGoesHere.com to the url you want your badge to link to making sure to include the http:// part
  4. Convert the http://URLtoWhereYourImageIsHostedGoesHere.jpg to the same URL your image is hosted to from the green code above this time adding in the height and width dimensions
  5. Paste the code into your HTML web page or HTML sidebar widget on your blog.
And this is the end result. A graphic tile combined with a text area where your visitors can grab the code and promote your web badge on their website or blog to support you.


  1. Yes! Exactly the advice I was looking for; thank you for your consistently great content!

  2. Want to prepare a unique logo for your websites,(10370)
    we are here for your services, we gives the unique & best logo design with cheapest rates..
    For more details visit: http://eazy2earn.com


YAY! No Registration Needed to Leave a Comment :)

Just look for the orange "Comment" link after the time stamp at the foot of each post and click on it, or click on the post title and the comment box will appear on the page at the base of the post when it reopens.

Comments that are Spam off topic, contain profanity, lewdness, promote violence, hate speech or any form of discrimination will either be modified or will not be posted. Click Here for a detailed list of this blog's policies.

You are welcome to make a link of your name using the Name/URL option to guide readers to your website.

Please do NOT post a string of keywords as your name. Comments received in this fashion will either not be published or the link will be removed. The Flirty Blog reserves the right to modify, delete or decline to publish comments that are considered to be off topic or SPAM.