Themeforest

Hiding Your Email Addresses From Spam Harvesters – Part II

Last week, in part I, we looked at hiding your email addresses from spam harvesters using simple techniques such as rewriting your email address for humans only and replacing your email with an inline image.

Today we have 2 more techniques, which utilise the jQuery javascript library. If you are not sure how to include the library code into your web page then refer to our post – Adding jQuery To Your Website. The following examples assume that your web page already includes the jQuery library.

3. Using The jQuery Spamless Plugin

This is a lightweight plugin, which renders the email address on the visitors browser using source code, which is scrambled (or obfuscated). To a spambot the source code only contains unreadable text.

Refer to the jQuery Spamless plugin project pages for examples, information on how to use the plugin and to download the plugin file.

To create your scrambled email address with the default settings for the plugin:

  1. write the address backwards
  2. Replacing the “@” symbol with “[at]“
  3. Replace all “.” with “[dot]“

Example: For email address – email@mydomain.com – you would use the following code:

<span class="email">moc[dot]niamodym[at]liame</span>

4. Using jQuery and AJAX

All of the previous 3 methods are unable to handle the addition of a “mailto:” link, which will allow your visitor to open up a blank email containing your email address. A feature, which many people find very useful.

One way of maintaining the link is to use AJAX and jQuery. Using this method we can get the browser to call in the email address code from an external file, after the page has loaded. In most cases spambots would therefore not see the email address in the source code.

View a demo of hiding your email address and mailto link using jQuery and AJAX.

If you view the source code of the above page in your browser you will see that the email address does not appear and only shows on the browser screen. This same method is also used in the footer of our website.

Download the source code for this example

To use this method add the following code after the jQuery javascript library, between the head tags:

<script type="text/javascript">
$(document).ready(function(){

	var content = $(".email");
	content.load("email_address.htm");

});
</script>

Finally in the body of the html page add the following code where you would like your email link to appear:

<span class="email"></span>

A very simple, yet effective solution for hiding your email address link from annoying spammers!

2 Comments

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags