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.
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.
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).
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.
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:
- Copy and paste it into a text editing program and convert all of the parenthesis to angled brackets.
- Convert the http://URLtoWhereYourImageIsHostedGoesHere.jpg
to the direct url to where your image is hosted. - Convert the red http://URLtoWhereYouWantTheBadgeToClickTotGoesHere.com to the url you want your badge to link to making sure to include the http:// part
- 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
- Paste the code into your HTML web page or HTML sidebar widget on your blog.
2 Click Here to Comment:
Yes! Exactly the advice I was looking for; thank you for your consistently great content!
Glad to be of help!
Post a Comment