How To Create a Badge For Your Blog

I wrote a piece on my website recently called Take a Picture of Your Building: How To Get People to Notice You Indirectly which is all about getting other people to notice you by noticing other people noticing you.  Does that make sense?  Hopefully so, because it’s basically the core of getting traffic and readers when it comes to running your own website or blog.  The more other people are noticing you (or, in the case of the Internet, linking to you), the more your profile will rise, both figuratively and literally in things like your Google Page Rank.

One easy thing you can do is create a simple badge for your blog or site that you can ask current readers, guest bloggers or other partners to include on their own as a link back to you.  How you go about getting them to put it on their site is a tutorial for another day, but I at least wanted to show you how to go about making a simple blog badge without much technical know-how.

1. Design Your Badge

The size of your badge can vary, but be aware of the “standard” sizes for advertisements on many WordPress templates.  If you notice in the right-hand column of our blog, we have four modules for placing small badges or ads…we use them to highlight four of our programs and other sites.  These are 150 pixels by 150 pixels.  A standard badge tends to run about 100 pixels by 100 pixels.  That’s probably a safe bet for your first one.

If you don’t have Photoshop or another photo editor on your computer that you can use to design your badge, I recommend you check out Aviary.com and their suite of web-based Photoshop and image editing alternatives.  You can create, save and export your badge from within your browser, and their Phoenix application has everything that you should need to create a clean, simple badge.

Whichever program you use, make sure you Save For Web as either a .jpg or a .png when you’re finished and name the file something blatant and obvious, preferably “nameofyoursite.jpg.”  No need to make it hard for people to identify.

Here’s a very basic one that I’ve created using our No More Starving Artists button.  We use the button on its own to make people ask “what does it mean?”  If you want less mystique, you might consider including your URL and site name on the badge.  Even though the image will link to your site, it never hurts for people to know where they’re going when they click.

As an even easier alternative, you can also try the Fresh Badge Generator, which lets you create clean, Web 2.0-looking badges without touching a design program.  You can customize the colors, text and shape of your badge while adding things like gloss or sticker effects to give it some flare.  When you’re done customizing your badge, it will let you download it in a .png format so that you’re all ready for step two.

2. Upload Your Badge

Once you have your file, you’ll need to upload it somewhere so that people can grab it and, hopefully, start sharing it.  If you know your way around the backend of your website and the hosting service, you can always upload it to your webspace and host it from there.

An easier solution would be to simply upload the file and host it on a service such as Photobucket, which has the benefit of being reliable and user friendly.  If you don’t have a Photobucket account already, create a username and password and upload “yoursitename.jpg.”

After you upload your file, you’ll see something like this:

Highlight and copy the HTML field.  You’ll have a piece of code that looks like this:

<a href=”http://s925.photobucket.com/albums/ad98/theiae/?action=view&current=nomorestarvingartistbadge.png” target=”_blank”><img src=”https://i925.photobucket.com/albums/ad98/theiae/nomorestarvingartistbadge.png” border=”0″ alt=”Photobucket”></a>

You’re going to want to modify this code so that it links back to your site rather than back to Photobucket.  Change the <a href> bracket and the “alt” text so that it looks like this:

<a href=”http://www.YOURWEBADDRESS.com” target=”_blank”><img src=”https://i925.photobucket.com/albums/ad98/theiae/nomorestarvingartistbadge.png” border=”0″ alt=”THE NAME OF YOUR SITE”></a>

Obviously, you should replace the stuff in caps with your own information.  Unless you are the owner of YourWebAddress.com, at which point I’ve just done the work for you.

3. Spread Your Badge

See how easy that was?  You now have a functional, fashionable blog badge to share with fellow bloggers and post on your site.  I would recommend finding room on your sidebar to include the image of your badge with the code directly underneath for easy copying and pasting, but don’t be afraid to get in touch directly with fellow interest or local bloggers and ask them to exchange badges and share readership.

Leave a comment and share your newly created badge!  If you post ours, we’ll post yours.  It’s basically the new “have your people call my people.”

<a href=”http://www.TheIAE.com” target=”_blank”><img src=”https://i925.photobucket.com/albums/ad98/theiae/nomorestarvingartistbadge.png” border=”0″ alt=”No More Starving Artists at the IAE!”></a>

-or-

<a href=”http://www.theIAE.com” target=”_blank”><img src=”https://i925.photobucket.com/albums/ad98/theiae/nomorestarvingartists.png” border=”0″ alt=”I Support No More Starving Artists”></a>

Shawn Bowers is a writer, actor, producer and general creative person from Chicago, IL.  You can check out his writing and video work at www.ShawnBowers.com, and he invites you to friend him on Facebook if you’re into that sort of thing.