Last week we published an article with different methods to hide e-mail addresses on websites. Because of several comments with suggestions on how-to solve this problem, we provide this week a solution which is “from these days” and more powerful.

Based on the idea if you don’t show an address, a spambot can’t see it, we use in our example a simple Ajax call (using jQuery) and show a tiny box with some friendly message including the link with e-mail address.
DEMO: We used the code from this tutorial on the this page.

How does it work?

First we need to create a simple php file that holds the content and the e-mail address, we use json_encode to make the string less readable:

<?php
// change the two vars below
$email = 'user@mail.com';
$html = 'Please contact us by e-mail: <a href="mailto:%%mAdr%%">%%mAdr%%</a><br /><br />
<a href="javascript:void(0);" id="hideme">Close</a>';
 
$eparts = explode('@', $email);
$data = array('ename'=>$eparts[0], 'dom'=>$eparts[1], 'htmlcode'=>$html);
echo json_encode($data);
?>

Don’t forget to block that file in your robots.txt file!

Now we need a function that will load the external content into the current page using an Ajax request.

$(document).ready(function() { 	
	$("#clickme").live('click', function() { 
    	$.ajax({
	  		url: 'glink.html',
                        dataType: 'json',
	  		success: function(data) {
				var adr = data.ename + '@' + data.domain;
	  			var newdata = data.htmlcode.replace(/%%mAdr%%/g, adr); 
				$('span#ajaxresp').html(newdata).slideDown('slow');
				return false; 				
	  		}
	  	});
	});	
	$("#hideme").live('click', function () { 	
		$("span#ajaxresp").html('').slideUp('slow');
		return false; 
	});
});

jQuery code in detail

A visitor has clicked the element with the ID “clickme” and the Ajax request for the file “glink.php” is done. On “success” parse the html string with the two other json pairs and add the result to the SPAN element with ID “ajaxresp” is filled with the response from the external file and the box will slide down. To make the elements from the Ajax content accessible, we use “live()” events instead of the “regular” click event.
The visitor need to click the element with ID “hideme” to slide an empty “Ajax box” back to the original position.

Additional we give our dynamic email box some style using CSS:

span#ajaxresp {
	margin: 5px 0;
	text-align: center;
	padding:10px;
	display: none;
	border:2px solid #CCCCCC;
	background-color:#EDECEB;
}

The following code holds the “contact” link which is using the click event and the small container where the Ajax response data is placed.

<a href="javascript:void(0);" id="clickme">Contact</a><span id="ajaxresp">

If your visitor has clicked this “contact” link the following box appears:

If you have the jQuery and CSS code in external files, it’s possible to use the function on all your pages. The best thing is that the loaded box has also room for a personal message for your visitor. It’s just a simple solution without the need of building a contact form. This was the third article of a series with solutions on how-to add the contact information to your article or website.

Similar Posts:

• jQuery Contact form for your website
• E-mail links, protective solutions against SPAM
• Ajax requests using jQuery and PHP

If you place your e-mail address somewhere visible on your website, it will be only a matter of time until your e-mail account will get more and more spam messages. There are lots of spam bots checking the Internet for email addresses on regular websites, forums, blog and mailing lists. Once caught by some spam bot your mailbox is in need of a strong spam filter or sometimes it might be better to use a new e-mail address.

In this article we show you different ways, how you’re able to show your e-mail address to human visitors and hide it for spam bots.

Don’t forget, the solutions mentioned in this article are not a total protection against spam. If you share your e-mail address online, the chance that your e-mail address get on a spammer’s list is big. We advice that if you need to share an e-mail address with your websites’s visitor, to not use your personal e-mail address.

With each solution we give a review for:

• Integration: Is this function easy to integrate even for a less experienced webmaster.
• Protection: Is the e-mail address protected against spam bots.
• User friendly: Is the solution easy to use for a website’s visitor

The simple solution, an image from your e-mail address

Just providing image version is very simple and easy. Open your image editor, create a small image from your email address and upload the image to your website.

After this you’re able to place that address in to the HTML, just on that place where you need it. It’s safe for your e-mail address and it’s simple to use that image in your website document or CMS. There is one big issue with this solution: The visitor has to type over your e-mail address to his e-mail program.

Hide the @ symbol

There are different ways to hide the format of an e-mail address. Hoe does this work? Changing the format of some email address or just hiding parts from the e-mail address makes it more difficult for spam bots to find them. For example:

1. user@email.com
2. user at email dot com

While the first one is very webmaster friendly, it’s not be the best protection for your e-mail address. The second example is used very often because this “faked” address is easy to add to your content. Both formats are recognized by smarter spam bots.

Hide your e-mail address using PHP

The following example will convert the string of some e-mail adress into unicode values:

function convert_email_adr($email) {
    $pieces = str_split(trim($email));
    $new_mail = '';
    foreach ($pieces as $val) {
        $new_mail .= '&#'.ord($val).';';
    }
    return $new_mail;
}

Use this function in your web page like:

<?php echo convert_email_adr('user@email.com'); ?>

The output in your html is like:

user@email.com

This way the e-mail address is visible to the visitor like normal. Using this format for a mailto: link will open a new window from the visitor’s e-mail program. There might be a few spam bots which are able to read this format as well.

Some JavaScript solution

The last solution is very similar to the PHP snippet and requires similar handling to add some email link to your website. Place the following function into your HTML document or include the code as an external JS file:

<script type="text/javascript">
function create_mail(naam, domain, tld, label) {
    var mail;
    mail += '<a href="' + 'ma' + 'il' + 'to:' + naam;
    mail += '&#64;' + mail + domain '.' + tld;
    mail += '">' + label + '<' + '/a>';
    document.write(mail);
}
</script>

Use this code inside the website content:

<script type="text/javascript">create_mail("user", "email", "com", "e-mail");</script>

This method is very protective against spam bots, but will not work if JavaScript is disabled in the visitors browser. On the other site this code is very flexible and easy to use.

You see there are many different ways to add your e-mail address to your website without to expose the it to spam bots. If you search Google you will find much more examples, some of them are safe and some of them might have a better usability. If you don’t like to show your email address you should use a contact form on your website. If you know some great and easy function to hide an e-mail address in HTML code, please post it below. If you like this article please share the link on twitter or facebook, thanks.Similar Posts:

• jQuery Contact form for your website
• Your e-mail address hidden with jQuery?
• PayPal Payment Tools: Information and Resources

I think the best WordPress Plugin is Akismet, without this useful tool every WP blog owner need to review all comments to select the good comments. There is a lot of work to do for this weblog, more then 100 “spammy” comments a day, and strange enough most of them are coming via the same IP addresses.

Thanks Akismet, you’re doing a really good job!

Ok, next action was to block these IP addresses via .htaccess, but this doesn’t work for me. I guess the reason is that most of the spam is send via the trackback URL and it looks like that .htaccess will not work (at least on the server where this blog is hosted, regular access blocking via .htaccess works fine). Maybe these spammer connect the trackback URL via a proxy?

I didn’t like that some comments from our blog readers become trashed because of the big amount of spam on the internet, so I checked once a week >1000 spam messages. But enough is enough, there is a way to block this guys which posting spam via the trackback URL without disabling this important feature. Just add this code to your wp-config.php file:

$blocked_ips = array("82.146.53.67", "72.232.173.170", "209.200.238.182", "64.111.117.7", "67.159.5.246", "82.146.53.67");
if (in_array($_SERVER['REMOTE_ADDR'], $blocked_ips)) {
header('HTTP/1.0 404 Not Found');
exit;
}

The array $blocked_ips is the “container” of all IP addresses where spam was caught by Akismet or a not recognized comment has reached your Inbox. After every repeating spam attack from one IP address you should at the IP address to this array.

Very useful for people with several weblogs is to host one file which holds all IP addresses from the spam posts from all your blog(s). Just replace the array declaration with this code:


$blocked_ips = array_map('rtrim', file('http://your.host.com/all_ip_addresses.txt'));
// changed the regular file command to remove the line ends from the array


Of course this is very time intensive but very effective, btw. the owner of each IP address is also blocked to access your website. I found this list of IP addresses from WordPress Spammers and have also a look on this project.Similar Posts:

• E-mail links, protective solutions against SPAM
• New Support forum for finalwebsites.com
• How-to choose a WordPress Hosting Provider