Chicletification and Sloppy Code

Posted November 14th, 2005 by Mike Cherim

Just lately, after learning more about this blog promotion and “feed” stuff as I mentioned in a previous post, I have decided to put a little more effort into getting found by people who read blogs. After all, if more people come to this blog and read my stuff as a result, then that’s probably a good thing. It could lead to web design opportunities, all sorts of good stuff, right? So I took a half day and ventured forth on the web in hopes of being properly Chicletified. Here’s how it went…


I located several click-services, reciprocal-link directories, subscribed to them — which was pretty easy in most cases — grabbed their mostly awful code, and after a lot of “use our code” editing, I placed 32 additional mini-icons or chiclets on my blog’s side bar. (Whoa, enough already!) Unless the image is a data-containing, live-updating, I saved them to my server for local hosting to decrease load time. The services seemed to vary quite a bit. Some better than others. One really stood out in a very good way as was evidenced by their level of personal attention.

Specifically I’m talking about Blog Advance. A lot of encouragement came from the nice people over there. “Join a Usergroup,” “Visit the Forums.” Since somebody was being so welcoming, I let myself be welcomed. And I got a great welcome at that. Anyway, the whole thing was sort of cool, a personal touch. Okay, now onto the code…

Sloppy Code

I don’t understand why the code snippets offered by a lot of the sites I visited is so, um, loose. It should be written to a proper DocType or Document Type Declaration (DTD) — and offered in two flavors. It’s only a little icon, so shouldn’t it be offered to users properly? Sheesh. Like this:

For HTML use:

<a href="">
<img src="" alt="" width="80" height="15"></a>

And, with a closing slash (in the vast majority of the cases at this time).
For XHTML use:

<a href="">
<img src="" alt="" width="80" height="15" /></a>

In both examples above, you may want to add the title attribute to the link part of the code if further explanation of the link is necessary. Also note that URLs will change, and quite possibly the image dimensions. The measurements are in pixels. There may also be border styling to consider. The target attribute is another thing. You may want to host the image locally, too. Below are examples of these things that code providers really need to tell bloggers so they do it right.

Title attribute.

In the next example I will show you the XHTML code from above with the title attribute added, plus a different URL, and a larger image (88px x 17px) so you can see how it might look with these changes.

<a href="" title="Vote for my blog at Blog Clicksite!">
<img src="your_images/icon.gif" alt="BlogClicksite" width="88" height="17" /></a>

Ampersands in URLs.

Some URLs provided to you will have ampersands in them. It is important for proper page validation that these ampersands “&” be converted to character entities. This is will not affect the URL. Conversion is as follows: Use &amp; instead of &. Let’s say you are provided a link-back URL like this example.
It should look like this:;ref=you&amp;id=436

Alt attribute.

Alt or alternate text is what’s visible if the image isn’t available. Thus, think of alt text as brief text version of the image. So let’s say you have an icon that says RSS, the alt text for this attribute would be quite simply RSS (alt="RSS"). If, however, you don’t want or require this, if the image is a simple bullet icon without text, for example, you wouldn’t remove the alt attribute, but you would apply a null value to this attribute, as follows: alt="" instead of alt="RSS".

Border attribute vs. border styling.

In many of the code snippets I collected, I was provided with the styling attribute for border in the code. You see, by default, a linked image will typically have a border around it. This isn’t usually desired by the site owner (even though I have borders on mine), thus they add something like this, border=0, or border="0", or, in some cases, like this, style="border:none;" or style="border:0;". Example one is completely invalid — don’t use it. Example two is okay to use in an HTML document. The last two examples are perfectly fine for HTML or XHTML documents. However, if your DocType is XHTML, you cannot use the border attribute, style must be used in its place (often already taken care of in your CSS). Here’s an XHTML example with a no-border style, followed by an example with a styled border like I use.

<a href="" title="No Border" >
<img src="" alt="" width="80" height="15" style="border:none;" /></a>

<a href=”” title=”Styled Border” >
<img src=”” alt=”” width=”80″ height=”15″ style=”border:2px solid #99cc66;” /></a>   /* You can also use “dotted” or “dashed.” */

Target attribute.

Last thing I came across in the code soup I had for lunch was the target attribute. Target defines how the link will open; new window/same window. By default, links will open in the same window, thus no code is needed. If, however, you want your external/off-site links to open in a new window, then the target attribute, target="_blank" must be supplied and defined, as shown in this HTML example.

<a href="" target="_blank">
<img src="" alt="" width="80" height="15"></a>

Please note that I used an HTML example. The reason I did this is you cannot use the target attribute in XHTML. It has been deprecated. The trend nowadays, is to not take over the visitor’s browser with new windows but to open all links internally instead — to separate the page’s behavior from its mark-up. Thus, in my opinion, regardless of the DocType, if the code snippet has target anything, I would simply remove it. Keep them with your great content and imagery, don’t try to kidnap your visitors. If your site or blog is good enough, they’ll stay a while, bookmark or blogmark you, subscribe to your feed, and maybe return later. Right? “No!” you say? Alright, since you’re being insisting, I will show you a way to use target in XHTML even though I no longer condone the use of it. (Please note that I use script elements to make this happen and if JavaScript is disabled, the link will open internally. Also note that I add onkeypress to accommodate keyboard users.) It would be considerate of you to use the title attribute in this case, like so: title="Link opens new window".

<a href="" onclick="target='_blank'" onkeypress="target='_blank'">
<img src="" alt="" width="80" height="15" /></a>

Document type.

In this post I have given you two basic examples of many things based on the document type declaration or DTD. This, for those who don’t know, is the fist thing the browser sees, top of each page, found positioned above the <head> and <title> and. It tells the browser what kind of document it is among other things. An easy way to determine your blog’s DocType is to “View > Source” (right click, select that option). The first one or two lines you’ll see on the page is the DocType. Here’s a XHTML DocType followed by an HTML DocType.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

Easy, right? Want to learn more about document types? I wrote another article about DocTypes that you may want to read. Also, I’d be short-changing you, dear reader, if I didn’t give you a link to the absolute authority on this subject.

In closing…

I’m not sure I’ll keep all the icons, some will likely fall along the wayside as time passes. It all depends on the results. For now, though, I have been thoroughly chicletificated, and done so validly!

13 Responses to: “Chicletification and Sloppy Code”

  1. Joshua Kendall responds:
    Posted: November 14th, 2005 at 11:49 pm

    For the target one you can use a small Javascript to open links in a seperate window and have it validate. If you want the code let me know, I’ll post it.

  2. Joshua Kendall responds:
    Posted: November 15th, 2005 at 2:41 pm

    Yeah mines different, I didn’t even see your solution. I should of read everything instead of just skimming. :)

    Partial script removed

  3. Joshua Kendall responds:
    Posted: November 15th, 2005 at 2:43 pm

    Mike the first one didn’t post everything for some reason. If this one doesn’t post correctly I will post it a Plasticpilots and then post a link here.

    Yeah mines different, I didn’t even see your solution. I should of read everything instead of just skimming. :)

    Partial script removed

  4. Joshua Kendall responds:
    Posted: November 15th, 2005 at 2:49 pm

    Ok, here is a link to the post on PlasticPilots.
    You can go ahead and delete the first two attempts here.

    Javascript to Open new window

  5. Joshua Kendall responds:
    Posted: November 15th, 2005 at 4:34 pm

    Actually Mike it only opens links that have a rel="external" in a new window while others will open in the same window.

    As far as the PHP variable, that would work. Either option would cease to work if javascript is disabled.

    My solution just keeps the code neater (as it doesn’t add anything to the code) and it does not require PHP so anyone can impliment it on any server.

  6. Deb responds:
    Posted: November 16th, 2005 at 7:10 pm

    I prefer for links to open in a new window so that there is no chance that a person will leave my site until they’re ready to.

    I only use:

    target="_blank" class="postlink"

    Perhaps I should be polite and let people know that it will open in a new window.

  7. Joshua Kendall responds:
    Posted: November 16th, 2005 at 10:07 pm

    Mike, I killed that version since it didn’t seem to be doing very well as far as visitors and the comment links kept disappearing so people had to dig into the article to comment. Textpattern was just giving me a hard time in general. I’m working on a ’simple’ portfolio site and if I eventually add a blog it will be a very ’simple’ WordPress installation.

  8. church of lukumi babalu aye responds:
    Posted: March 16th, 2006 at 4:42 am

    Mother Superior: “Sister Maria, if you were walking through town at night, and were accosted by a man with bad intentions, what would you do?”

    “I would lift my habit, Mother Superior.”

    Mother Superior (shocked): “And what would you do next?”

    Sister Maria: “I would tell him to drop his trousers.”

    Mother Superior (even more shocked): “And what then?”

    Sister Maria: “I would run away. I can run much faster with my habit up than he can with his trousers down.”

    [EDIT: This was spam, no doubt, but it’s clever and funny so I let the post ride. This could be a hint for other spammers: Give us bloggers something of value beside your favorite pecker enlargement site and maybe more of your posts will remain. WARNING: The link above, the posters name, opens to a site with a popup. - Mike]

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.