Support » Fixing WordPress » External Link: dynamically add title/rel/class

  • lennart wrote a great javascript which adds icons to external links via css:
    http://wordpress.org/support/5/4570
    I extended its functionality a little bit, and I thought some here might find it useful. Keep in mind, I only have a rudimentary understanding of javascript, so any javascript gurus may be able to “tighten” the code some…
    lennart’s script basically parses all external links and “adds” a “class” to the tag. Notice I used the word “add.” I’ll discuss this further later.
    For instance, your source code will have:
    click me
    but the javascript will dynamically change it to:
    click me
    You’d then add the .e class to your stylesheet rules:
    .e {
    font-weight: bold;
    }

    That’s all fine and dandy, but I wanted the script to “dynamically” add a couple more things within the tag:
    1) Add title="External Link"
    2) Add rel="external"
    3) Prefix links with redirect.php?url= so my click counter script can redirect and collect statistics for outgoing clicks.
    Also, I wanted the script to be placed within an external .js file:
    <script type="text/javascript" src="/script.js"></script>
    Finally, I realized I had to add an onload event to every body tag in order to call the function:
    <body onload="stylizeLinks()">
    For many folks, having to add an onload event to the body tag is an inconvenient, deal killer. Luckily, you can implement the body onload event within the actual external javascript file.
    Ok, so here’s the final version. Copy and paste it within your external .js file:
    // START COPYING HERE
    // stylize links
    function stylizeLinks(lTarget) {
    aL = document.getElementsByTagName('a');
    for (i=0;i
    if ((aL[i] != '' ) &&
    (aL[i].hostname != location.hostname) &&
    (aL[i].href.substring(0,10) != 'javascript') &&
    (aL[i].href.substring(0,6) != 'mailto')) {
    aL[i].className += ' e';
    aL[i].title += 'External Link';
    aL[i].rel = 'external';
    aL[i].href = 'redirect.php?url=' + aL[i].href;
    if (lTarget)
    aL[i].target = lTarget;
    }
    }
    // window.onload (makes adding onload to the body tag unnecessary)
    function onLoadHandler(){stylizeLinks()}window.onload=onLoadHandler;
    // STOP COPYING HERE

    ***NOTE*** The faulty backticks functionality of this board is partially breaking the code above. Notice it's converting the ampersand symbols to their hex equivalent. After copying the text above into a file, search and replace [ampersand][and][semicolon] with a single ampersand character (SHIFT+7 on your keyboard). A total of 6 replacements should take place.
    Much of what you see above is self-explanatory, but I will explain some of the vague parts:
    ----------------------------------------
    The lowercase letter e within
    aL[i].className += ' e';
    represents the classname you have in your <style></style> tags or external .css file. There are two important things to notice above:
    1) there's a space preceding the e class. The purpose of the preceding space is to prevent any existing class within your link tag from "merging" with the second e class. For instance, if there were no preceding space, it would end up changing this:

    to this:

    2) += is used in stead of = The += section means add the e class to the link tag. = means replace/override any pre-existing class with the e class. This would prevent class e from wiping out the EXISTING-CLASS class.
    ----------------------------------------
    The
    aL[i].title += 'External Link';
    allows you to dynamically add a title="" tag to each external link. Change the text "External Link" to what you want displayed.
    ----------------------------------------
    The
    aL[i].rel = 'external';
    dynamically adds the rel="external" tag to your links. Some folks use rel="external" instead of target="_blank" in order to open links in new windows. This is because the rel tag is valid XHTML Strict while the target tag is illegal. Of course, you'll need the use the javascript in the following article to make it work:
    http://www.sitepoint.com/article/standards-compliant-world/3
    ----------------------------------------
    BTW, the javascript in the article above also requires the onload event. You can just add it to the onLoadHandler I specified above. For instance, assuming you're using all the code in this post, the onLoadHandler will look like:
    // window.onload
    function onLoadHandler(){stylizeLinks();externalLinks()}window.onload=onLoadHandler;

    ----------------------------------------
    Finally, the
    aL[i].href = 'redirect.php?url=' + aL[i].href;
    prefixed my redirect stuff before all links, which would change this:

    to this:

    ----------------------------------------
    Thanks originally goes to lennart for sharing his script. I actually came across it accidentally. Now I don't have to worry about adding rel, title, and redirect crap to my links. This keeps the code clean.
    This all works well in IE6, IE5.5, IE5.01, Mozilla 1.7+
    NuclearMoose, mentioned a small degree of load latency with this script in action. It's understandable, considering all link tags are being parsed. I haven't noticed any lagging though.

  • You must be logged in to reply to this topic.