> ~ Insights by SewCalGal ~

Thursday, March 22, 2012

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.


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:

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:
Electric Quilt 7 Pattern Spot dot com

AccuQuilt - Barn Quilt Design Contest - Enter Now!

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?


Kelly aka Sew Lambitious LLC said...

If you can save the files as a .png, they will look more crisp and loss of detail than a .jpg file.
Kelly on FB

Editfolt said...

very I like! Thank you. although I do not understand everything, but we managed to do it.

Agnes B Bullock said...

OUCH!- did not work for me! Are you only supposed to use one photo? What about the lettering?

Nina Lise@Mrs Moen said...

Thank you for the tutorial, I will try it so I know how to do it whenever I need a bagde. Last time I tried, I could not get it to work and just went for a simpler solution. It does sound doable though!
I have no business badges or logos on my blog, only challenge badges for the challenges in which I participate. Every now and then I will clean up my sidebar and get rid of all the clutter that accumulate.

Brenda Nelson said...

Great Tutorial. I have added badges to my blog - but never actually made a badge myself. The badge I have added was for "Petfinder.com", I am a sucker for homeless pets. They created several badges and you could pick one that you wanted. At one time they had a promotion for less adoptable pets so you could pick a badge that related to which ever less adoptable pet you wanted to support - I selected older pets. Anyhow, badges are very good for businesses to use to promote themselves and get their names out there. Awesome blog.

Leslie said...

Thanks for the information. I need to work on this for a couple of projects and didn't have the prcess quite put together.

Janet O. said...

Appreciate this info. I have wondered how to do this if I should choose to create a badge.

Cool Cats and Quilts said...

If I wasn't soooo bad with all this computer stuff I could do it. Your explaination was great. Have the logo, just need someone to do it for me! Thanks for the info.

Snoodles said...

Wow! A lot of information here....gotta try this and see if I can get it to work! I have made a badge for the Colonial Needle hop, and need to get the html ready this weekend. I'll let you know how it goes! LOL Thanks for the tutorial!

Michelle said...

I'm am going to add this to my list. Thank you for the information.

Josie McRazie said...

are you speaking Swahili again? You know I don't understand Swahili! LOL!! You are such a wealth of knowledge!

Anonymous said...

Just an FYI, technically you aren't allowed to store anything that isn't a photo on Flickr. Their community guidelines (here) say this: "If we find you using your account to host graphic elements of web page designs, logos, icons, and other non-photographic elements on other web sites, we will warn you or delete your account." Obviously lots of people ignore this rule so I'm not sure how diligently they enforce it. I do know that if someone complains about one of your images violating the guidelines then they act rather swiftly -- I filed a complaint once against an image (for a different reason) and the entire account was deleted within a few hours.

SewCal Gal said...

Thanks for letting me know. It doesn't look like Photobucket has such conditions, but I'm investigating further, as well as checking a few other image hosting sites.

Most businesses have their own web hosting space, where they could easily store an image.


IHaveANotion ~ Kelly Jackson said...

Excellent information! Thank you so much for all the time and energy you put into educating us.


Michele Hester said...

Thank you so much for sharing this information! I will certainly be needing it soon.

ktquilts said...

I would love to remember where this is for future reference. May I pin it on Pinterest?


Roz said...

Just signed up for the Quilt show! Great site thanks!