As I talked briefly about a few posts back, a blog badge is a neat little graphic that you make available to other bloggers (and webmasters) so they can post it as a cool link to your blog on their own web pages.
Why would they do post this? Well, hopefully you’ve got some well written, exciting content, and a history of producing such content, that a fellow blogger/webmaster feels worthy of sharing not only a link or reference to a specific post, but one to your blog in its entirety.
As I previously mentioned Almost-American.com’s blog badge (featured right in the side-bar) was a quick little Adobe Photoshop exercise for Mrs. Almost American. The badge itself, however, is only half the story.
The badge needs to be eye catching, cool and worthy of placement on someone’s web page; a high quality image that is somewhat relevant helps too. There are no specific rules when it comes to blog badges, but couple of things to consder when designing a blog badge are:
- most blog badges are square;
- the largest blog badges are displayed at 150 pixels by 150 pixels, more commonly at 125×125 pixels or less;
- if your blog badge (like mine) isn’t solid (i.e., doesn’t have a solid boarder or has pieces cut out the middle), it should be on a transparent background so it easily matches with the background colours of sites that decided to “wear” your badge. If you do have transparent features in the badge, the blog badge should be saved in a transparent compatible format (e.g., .gif, .png etc.); and
- the file size should be small. No one likes pages with long load times, and your website host won’t appreciate a million calls for the image (yes the image is still hosted on your website host) if your blog ever gets immensely popular.
The best tip I can give at this early stage of my blogs development is to check out other blogs; especially if you have some visitor tracking (e.g., Google Analytics) that allows you to see where your visitors are coming from. This way you can tailor your blog badge to your blog traffic.
As I said, the image is only have the story. To make your blog badge easy to share its customary to have the code the points towards your image and the link to your website readily available; usually, as mine is, in a “code box” under the image of the badge itself. I’m sure there are several WordPress plugins out there to help with this (Badge Grab is one such example), but sometimes its just easier to customize something if you get right to the source code.
- Warning from here on this post gets technical -
Add New Media
This may seem a little daunting at first, but its pretty easy and anyone with a basic knowledge of HTML should be able to figure it out. Before we get started on the code, your image should be uploaded and you should have its fully direct link, including the “http://” written down. In WordPress it is easy enough to upload your blog badge as Media (be sure to fill out the alternate text etc.) and then just copy (CTRL-C) or write down the File URL as show on the screen.
Uploaded Media Location - File URL
When it comes to the code the first thing to figure out is whats needed to make the box the code you want copied will appear in. This is achieved through use of the <textarea> HTML tag. The following code produces a text box similar to the one displayed below my blog badge (towards the top right of this page):
I won’t go into details of what all the attributes specifically mean, as every attribute beyond the word “style” just describes the look of the text area. Feel free to play with the settings and see what you can create. The “name” attribute that appears immediate after the “textarea” tag is important for the finishing touches I describe towards the end of this post.
Now, to fill out the *INSERT YOUR SPECIFIC BLOG BADGE CODE HERE* portion of the above. For this you’ll want the url of your image and the link to your website. For Almost-American.com it looks like this:
The <a href> tag creates the link and the <img> tag includes the blog badge image. Since I’d made my image bigger than the standard I’ve included “width” and “height” attributes to the <img> tag to ensure my blog badge fits nicely into other peoples websites at exactly 100×100 pixels.
In order to make this text appear correctly in the <textarea> tag its critical to understand you cannot enter real HTML code as the users browser will read it as code and not display the actual text you want them to copy. Therefore, rather than the pure code you will need to use ”character encoding” for the special characters. This means rather than typing “<” or “>” you type its HTML character code “<” and “>” respectively (without the quotation marks). What you end up with looks like the gobbledygook below:
All seems a little much? Well, luckily help is at hand. If you head over to “Grab My Button Code Generator” with the link to your blog badge, a handy tool will create the code for you. All you have to do is to cut and paste.
So why, you ask, did I spend a good 20 minutes tell you about the specifics of the code? Apart from helping to provide a little insight into how it all works. Its important to know so you can add the finishing touches – this is the “Select Code” button I’ve added below the text box to quickly allow someone to select all the code and then copy. I haven’t worked out how to make it a “Select & Copy Code” button, but I’m open to suggestions.
Having this easy method to automatically select the code is a nice feature, that should hopefully entice a few extra folks to grab my badge. After all, when you have to scroll to select that one more step that might dissuade a visitor from adding your blog badge to their site.
The “Select Code” button is included by wrapping the whole lot with a <form> tag, as follows:
Note, the javascript refers to “text_area”, which is the specific name we gave the <textarea> field in the first example. This limits the select feature to only select the text appearing in the <textarea> box.
Once you have your code together, either with or without the modifications I’ve suggested, it should be pasted into a “Text” widget and placed appropriate on your theme’s layout.
The final code use on for Almost-American.com’s blog badge and the outcome – to save you scrolling to the top of the page are as follows:
Your code is a lot more long winded than the code that I use – but I do like the addition of the select this code button beneath it very useful.
It would be useful to install the commet Luv plugin as well on your blog – this will allow users like me to put their newest post as an addon when they leave a comment.