How to Create a Badge for your Business, Blog, or Event

With respect to internet websites, badges refer to logos for a particular site.  For businesses, they help with brand awareness and frequently help identify a fan site that supports a particular company,  product,or event.  They are a great tool for awareness and ease of others to click the associated button, to go to another web page. 


There are many businesses and events that could benefit from the use of having a badge and easy to access code, by which bloggers and other sites could easily display a badge on their site, to show support.

There are a variety of approaches to creating badge code that can be shared on blogs and various websites.

You need to create an image file that you want to use.  This can be done in various photo editor programs  (e.g. Photoshop, Paint, MyMemories, etc) that will typically allow you to edit an image, add text, and format the size and shape.  There are a variety of sizes used for badges, but a good general rule is 125x125 pixels for a badge that is to be displayed on a sidebar and 175x175 when it is to be used within a post.  To clarify, badges are most frequently used on the sidebar, but they can be placed anywhere on a website, including blogs.


If the logo image you are using isn't a perfect square, do your best to play with the code, as shown below, to adjust the size.

A badge can also be used to link back to a business, a blog, a facebook page, or just about anything on the internet.  Thus, you do need to think about what address you want to link to your badge, before you create the code.


As I'm currently helping Edit (Edit Foltmuhelye) to create a badge for her business.  And, I'm using her badge as an example in this tutorial to show you how you can apply this tutorial to create a badge for your business, blog, blog hop, or other event.

,

I have been advised that Flickr does not allow you to store an image on their site for use on a website.  While it appears Photobucket doesn't have such a requirement, I'm currently investigating Photobucket and other image storage service providers.  Most businesses have web service providers where they can and should use to storage such images, but frequently bloggers need to rely on other options.  As such, I'll update this post as I have more info to share. 

<a href=" http://editfoltshop.hu/" target="_blank"><img src="SHAREABLE FILE LOCATION OF YOUR BUTTON IMAGE"/>< /a>
< br/>
< textarea rows="6" cols="24" style="font-size: 0.8em;" readonly="readonly" onclick="this.select();"><a href=" http://editfoltshop.hu/" target="_blank"><img src=" SHAREABLE FILE LOCATION OF YOUR BUTTON IMAGE"/></a></textarea>
 

Edits to the above code changes should include:

a) replace the string "SHAREABLE FILE LOCATION OF YOUR BUTTON IMAGE"  with code for where your shareable button location resides.

b) replace the code for your link, to allow your button to link to your appropriate website.

If you want to, you can visit Edit's blog (Edit Foltmuhelye) to see how this badge looks on her blog.  She also has a delightful blog.

TO ADD YOUR BADGE CODE TO YOUR SITE:


Webmasters can use the above code to add anywhere they wish on their website, but for bloggers an easy way to add badge code

Bloggers can edit their code to add a badge thru an HTML widge.  For google/blogspot bloggers:

1.  www.blogger.com
2.  go to layout mode

3.  click on "add a gadget" and scroll down to "HTML/Java Script".  When the box appears, paste the code above into this box:


<a href=" http://editfoltshop.hu/" target="_blank"><img src=" SHAREABLE FILE LOCATION OF YOUR BUTTON IMAGE"/>< /a>
< br/>
< textarea rows="6" cols="24" style="font-size: 0.8em;" readonly="readonly" onclick="this.select();"><a href=" http://editfoltshop.hu/" target="_blank"><img src=" SHAREABLE FILE LOCATION OF YOUR BUTTON IMAGE"/></a></textarea>


Click Save, save arrangement. And, when you view your blog you should see "your version" of the following badge on your site:



<a href=" http://editfoltshop.hu/" target="_blank"><img src=" http://farm8.staticflickr.com/7130/6997672215_4b227c77f0_m.jpg"/></a>


For fans that want to display your badge, they simply copy "all" of the code in the box below your image:


<a href=" http://editfoltshop.hu/" target="_blank"><img src=" SHAREABLE FILE LOCATION OF YOUR BUTTON IMAGE"/></a>


Then they  an follow these steps:


 Bloggers can edit their code to add a badge thru an HTML widge. For google/blogspot bloggers:
1. www.blogger.com
2. go to layout mode
3. click on "add a gadget" and scroll down to "HTML/Java Script". When the box appears, paste the code above into the box.
4.  Click save, followed by save arrangement.

They will then get your version of your badge to appear on their site:


Badges are great tools to increase awareness of a business, a blog, an event. The logo image combined with a link to a webpage is a easy way to increase awareness. As such, SewCalGal encourages those in the quilting business to consider creating badges that their fans can post on their blogs. Here are some examples of various badges for those in the quilting business:

While a business may provide a badge image, having the badge code available actually makes it easier for blogging fans to post the badge on their blog!

I'm also curious, if you have a blog, do you have a favorite business badge displayed on it, and if so, what business is it for?