Ajouter un lien pour envoyer la page par e-mail

14/11/2008
Projets Allez aux commentaires

Comment ajouter un lien pour envoyer la page par e-mail ? Voilà une question que chaque webmaster c'est déjà posé une fois. Dans cet article je vais vous montrer un manière simple et élégante à la fois qui utilise du javascript pour construire le lien d'envoi de courriel.

Ma solution se base tout simplement sur le protocole mailto et de ses paramètres subject et body, le javascript servira surtout à pouvoir recuperer le titre et l'URL de la page courante pour que le script soit ré-utilisable n'importe où sans modifications.

Le résultat

Je sais que vous êtes des impatients, alors voici le résultat du script:

Le script

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

//########################################################
//                      Fonction pour mail
//########################################################
function direct_email(){
        var chaine_mail = '<a rel="nofollow" href="mailto:';
        chaine_mail += '?subject= ' + encodeURIComponent( document.title );
        chaine_mail += '&amp;body= Je recommande cette page : ' + encodeURIComponent( document.title );
        chaine_mail += '. Consultable à cette adresse : ' + encodeURIComponent(window.location.href);
        chaine_mail += '" title="Envoyer par e-mail">Envoyer par mail</a>';
        document.write(chaine_mail);
}

Donc on construit le lien en récupérant le titre (document.title) et l'URL (window.location.href), sans oublier de les encoder (encodeURIComponent) au cas où il y aurait des caractères spéciaux. J'ai volontairement décomposer la chaine pour plus de lisibilité, comme ça vous pourrez facilement adaptez le texte qu'elle contient à vos besoins.

Utilisation

Ensuite il vous suffit de placer le bout de code suivant dans votre page pour voir apparaitre le lien email:

<script>direct_email();</script>

On ne peut pas faire plus simple 😉

Conclusions

Le script est léger et réutilisable, par contre il faut que javascript soit activé chez vos visiteurs. D'ailleurs dans la journée je poste une fonction php pour WordPress qui fait l'équivalence (en mieux même) et en dur dans la page 🙂

Et en bonus, voici des icônes de mail pour accompagner:

Edit: la version wordpress est là

-----

Articles relatifs

  • Bonsoir

    Astuce sympa, mais gaffe à l’encodage des caractères 😉

    (ne faudrait-il pas plutôt utiliser – je n’ai pas essayé – les encodages HTML pour les caractères accentués notamment ?)

  • k-ny

    @Cédric
    Il y a des trucs qui n’ont pas du passer dans ton message. Mais pour les caractères accentués je n’ai rencontré aucuns problèmes. J’aurais pu les remplacer par leurs entités html mais vu que ça passe comme ça …

  • Guy

    Très intéressant ton article !

    Merci.

    Guy

  • David (Azur Dev)

    Sauf que…

    script type= »text/javacsript » pour que ça soit correct. 😉

    Et document.write() est voué à disparaitre. Ça ne fonctionne pas en type XHTML.

    Je pense qu’il serait mieux de commencer à écrire le lien en dur, qu’il soit accessible sans Javascript, en utilisant seulement Javascript pour compléter.

  • Al Journaleu

    Accessible sans Javascript?
    Le code ci-dessus est très bien, sauf… que sur wordpress.com le Javascript n’est pas autorisé.
    Serait-il possible d’avoir ce genre de fonction (un lien mailto qui récupère l’URL) sans Javascript???
    Merci d’avance.

  • k-ny

    @David: Ah oui j’ai omis le type (c’est à cause de Aptana qui ne le met plus depuis la mise à jour)

    @Al: Oui j’ai une fonction wordpress sous la main pour faire celà, quand j’ai 5 minutes je poste le code !

  • x@v

    Bonjour,
    sa ne fonctionne pas si ont n’utilise pas de soft de courriel (evolution, thundibird…), c’est mon cas.
    Donc le mieux serai de l’envoyer en php le mail.

  • x@v

    j’ajouterai qu’ont ne peux pas l’envoyer à un amis si ont ne peux pas rentrer sont mail.
    Sa m’échape un peu

  • Al Journaleu

    +1 k-ny
    Il est très facile d’ouvrir un lien mailto avec Gmail (voir une explication ici: http://lifehacker.com/392287/set-firefox-3-to-launch-gmail-for-mailto-links ). Même s’il est vrai que tout le monde ne le fera pas.
    La solution ci-dessous pourrait tout à fait correspondre à mes besoins (je n’en ai d’ailleurs pas trouvé d’autre), un simple lien qui peut être présent sur chaque page, si ce n’est le problème du Javascript, mais la solution arrive…

  • k-ny

    @x@v : Ma solution a pour but de rester très légère et de s’implanter très facilement. De nombreuses solutions avec formulaire en php existent déjà.
    Pour l’adresse mail de l’ami, il suffit de l’ajouter une fois que le « soft de courriel » c’est lancé (au passage ça marche aussi avec gmail en ligne), les champs sont pré-rempli automatiquement et il ne reste plus qu’a choisir les contacts à qui l’envoyer (c’est même plus logique comme ça ! Puisqu’en général tous les contacts se trouvent dans la base de donnée du logiciel)

    😉

  • x@v

    j’utilise justement gmail, mais le courriel ne s’ouvre pas, je suis sous linux debian.
    C’est peut être lié ?

  • Al Journaleu

    Je suis étonné… La possibilité de déterminer l’action suite à un lien de protocole (mailto: ftp: etc.) doit fonctionner partout où FF fonctionne…
    Sinon, j’ai fait un petit coup de Google et ça donne ça (voir les commentaires): http://xantus.vox.com/library/post/howto-use-gmail-for-mailto-links-linuxubuntu.html

  • Bonjour et merci pour cet article ! Pédagogique et concis 🙂

  • Pingback: Wordpress : lien pour envoyer la page par e-mail()

  • Très pratique, un grand merci 😉

  • Merci beacoup. ça m’a beaucoup aidé. J’avais le même problème.

  • Merci beaucoup pour cette explication de « comment ajouter un lien pour envoyer la page par e-mail ». C’est utile quand on a un site.

    Bien amicalement,
    Gilles Vitu