Πως να κρύψετε το email σας από μηχανές συλλογής

Post Pic
στις 02.11.10. Kατηγορίες HTML, Javascript, jQuery, Web Building με 12 Σχόλια

Ένα από τα πιο ενοχλητικά και δύσκολα, σε όσα έχει να κάνει με την επίλυση του, προβλήματα που συναντάμε στον χώρο της δημιουργίας ιστοσελίδων, είναι τα spam email. Διάφορες μηχανές αναζήτησης και μαζικής συλλογής email διευθύνσεων, διαβάζουν εκατομμύρια σελίδες καθημερινά, αναλύουν τον κώδικα τους και βρίσκουν διευθύνσεις τις οποίες χρησιμοποιούν στα spam email. Ας δούμε τι μπορούμε να κάνουμε για αυτό

Χρησιμοποιώντας την jQuery, θα αποκρύψουμε το email μας από όλες τις μηχανές που διαβάζουν τον πηγαίο κώδικα της ιστοσελίδας μας και αναζητούν για διευθύνσεις email. Aς δούμε πως θα το κάνουμε αυτό.

Συνήθως στην ιστοσελίδα μας έχουμε κάποιο footer στο οποίο δημοσιεύουμε στοιχεία επικοινωνίας. Πολλοί καταφεύγουν στην λύση του να χρησιμοποιούν εικόνες για παράδειγμα

Με την παραπάνω εικόνα ενημερώνουμε τον χρήστη για την διεύθυνση email μας, και ταυτόχρονα δεν επιτρέπουμε στις μηχανές συλλογής email να την δούν. Παρόλαυτά όμως με αυτόν τον τρόπο πρώτον γεμίζουμε την σελίδα μας με εικόνες κάθε φορά που θέλουμε να εμφανίσουμε το email μας, πράγμα που επιβαρύνει και σε θέματα bandwidth, και δεύτερον είναι αρκετά δύσκολο για τον χρήστη γιατί για να επικοινωνήσει μαζί μας, πρέπει να κοιτάει την εικόνα και να κάνει αντιγραφή την διεύθυνση.

Ο σωστός τρόπος λοιπόν να το κάνουμε αυτό είναι ο εξής:

Ανοίγουμε τον κώδικα της σελίδας μας και βρίσκουμε το <head> μέρος στην κορυφή του HTML κώδικα μας.

Εκεί θα προσθέσουμε τις παρακάτω γραμμές

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('a.email').each(function(i) {
var text = $(this).text();
var address = text.replace("*[se]*", "@");
$(this).attr('href', 'mailto:' + address);
$(this).text(address);
});
});
</script>

Το μόνο που έχουμε να κάνουμε τώρα, είναι να γράψουμε το email μας με την μορφή

Ας δούμε ακριβώς τι κάνει ο παραπάνω κώδικας για να καταλάβουμε πως λειτουργεί

Με την γραμμή

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"  />

καλούμε την jQuery στην σελίδα μας

Με την γραμμή

$(document).ready(function() {

βεβαιωνόμαστε ότι η σελίδα έχει φορτώσει πλήρως πρίν τρέξει ο κώδικας που ακολουθεί.

Με την γραμμή

$('a.email').each(function(i) {

επιλέγουμε κάθε <a> tag που έχει class=”email”

Με τις γραμμές

var text = $(this).text();
var address = text.replace("*[se]*", "@");

δημιουργούμε 2 νέες μεταβλητές (text και address) και κάνουμε την μετατροπή των χαρακτήρων *[se]* σε παπάκι (@)

Με τις γραμμές

$(this).attr('href', 'mailto:' + address);
$(this).text(address);

προσθέτουμε τα χαρακτηριστικά href, mailto και την διεύθυνση στο link μας.

Έτσι λοιπόν ο παραπάνω κώδικας, ψάχνει τα <a class=”email”> tags που βρίσκονται στην σελίδα μας, και μετατρέπει τους χαρακτήρες *[se]* σε παπάκι (@).

Με άλλα λόγια, όπου εμείς γράψουμε διεύθυνση*[se]*domain.gr η jQuery θα αναλάβει να το μετατρέψει σε διεύθυνση@domain.gr μόλις φορτώσει η σελίδα

Δοκιμάστε το και εσείς και ίσως ξενοιάσετε από τα ενοχλητικά spam emails.

TIP: Μπορείτε να αλλάξετε το *[se]* σε ότι συνδιασμό χαρακτήρων θέλετε αλλά μετά τα email στον HTML κώδικα σας θα πρέπει να τα μετατρέψετε αναλόγως.

Tags: , , , , , , , , , , ,

Pantso { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }
Ο Παναγιώτης έχει σπουδάσει προγραμματιστής και προγραμματιστής Video Games ενώ τώρα κάνει το Bachelor του σε Computer Science από το Πανεπιστήμιο του Roehampton στο Λονδίνο. Έχει εργαστεί στο Darkfall Online , το πρώτο ελληνικό MMORPG, ως World Builder, είναι BlackBoard Support Certified , ενώ σήμερα εργάζεται ώς HTML Author στην Atcom SA.

12 Σχόλια στο άρθρο Πως να κρύψετε το email σας από μηχανές συλλογής

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>