Add external link icon after all external links using jQuery
Here is a very simple tutorial on how you can automatically insert an icon image after external (also known as off-site) links by using jQuery javacript framework.
For those who are not familiar with jQuery:
jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.
Description of jQuery quoted from Wikipedia.
Reason I choose to go with javscript implementation instead of pure CSS is so that you do not have go through your entire blog to specified every link that you want to be marked as external link – leave this job to computer!
(Note: You also able to achieve this automatically using CSS3 selector, however CSS3 implementation is still in draft and is still not fully supported by browsers.)
I will be using jQuery 1.3.2, the latest version to-date. Add the follwing javscript to your page:
This javascript selects anchors that has target=”_blank” attributes on them and gives those anchors a new class “external_icon”.
Next step would be applying style to those anchors with “external_icon” class:
a.external_icon {
background: url(images/external-link.gif) no-repeat 100% 50%;
padding-right: 12px;
}
That’s it! 2 steps, very simple as promised. However couple of things you may want to watch out for. Below is couple of tweaks you may consider adding.
Image Exception
Having a small external link icon next to an image looks worse than without it, you may examption to anchored images by:
Specified Anchor Exclusion
If there are certain links in the post that you feel like not having an external link icon and want to exclude them from applying the style, then specified a “no_external_icon” class to those links and have your javascript code as follow:
Now you have it! Try the code out yourself!
Edit on 2009-05-12:
Thanks to J Mehmett for pointing out that target="_blank" is invalid in XHTML 1.0 Strict (however remain valid in XHTML 1.0 Transitional and HTML 4.01 Transitional as target attribute is not yet deprecated).
In that case:
Specified Relationship Inclusion
Advanced web developers has slowly stop the usage of target and using rel attribute instead.
Without too much trouble, we can achieve the same result by using above!
Clean Code
J Mehmett said on May 10th, 2009
Great post. However since target=”_blank” is invalid XHTML, we can change this to something like rel=”external”, or id=”external” then we can change our jQuery code like this:
$("a[rel='external']").addClass("external_icon");Or…
$("#external").addClass("external_icon");Both are the same.
Thank you anyway!
Travis said on May 11th, 2009
Hi J Mehmett,
That’s an excellent point I failed to mention since I’m always on XHTML 1.0 Transitional, instead of Strict W3 Compliance.
However most WordPress bloggers would still be using
target="_blank"since there is no easy way to define an external link and there is no easy way to add a relative nor ID without going into HTML view of the post.I should have mention all this in my post. Thanks again for pointing it out
J Mehmett said on May 11th, 2009
Yeah, Travis. WP’s tinyMCE editor still uses
target="_blank"and it’s true that most of the bloggers and most of webmasters still use it.