In the past we’ve talked about how to add a print button to your WordPress theme. Today I wanted to give you the javascript code you need to create an Email This button on your WordPress blog.

Before getting to the code, I wanted to first say that this code is designed to allow readers to click on the button and have it open up their default email software and create a subject and link that point to the post the reader is currently visiting. This code is not designed to allow readers to contact the blog author.

If you are wanting your readers to be able to contact you, I recommend you use one of the many great contact form WordPress plugins available. You should never embed your email address into some HTML code because it will be picked up by spam bots. Contact forms prevent spammers from finding your email address. The other thing you can do is offer “EmailAddress AT EmailCompany DOT com” (which your email address information filled in) to avoid spammers.

Okay, so back to the Email button code. Here is the javascript you will need:

<script type="text/javascript">
<!-- Begin
function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<a class="contact" HREF="mailto:?subject=Take a look at this page I found, ' + document.title + '?body=You can see this page at: ' + window.location + '" onMouseOver="window.status='Send your friends e-mail about this page'; return true" TITLE="Send your friends e-mail about this page">Email to a Friend</a>');
}
else { document.write('<a class="contact" HREF="mailto:?body=Take a look at this page I found titled ' + document.title + '. You can see this page at: ' + window.location + '" onMouseOver="window.status='Send your friends e-mail about this page'; return true" TITLE="Send your friends e-mail about this page" rel="nofollow">Email This!</a>');
}
// End -->
</script>

This will create an email where the reader can enter in someone’s email address and send them a link to your post/page.

Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Connect with Kyle on Twitter or Google+!

  1. Mehmet says:

    Great tip. Have been looking for this since a while. Thanks Kyle.

  2. Rachel says:

    This is great, but I am having trouble adding it to my blog. When I add the code and view the page, all you can see is the code and not the Email Me bit.

    I would really appreciate any advice on what I am doing wrong or why it isn’t working for me.

    Thanks, Rachel

  3. @Rachel: Be careful when you copy/paste code snippets because sometimes the quotes are curvy, and programming languages requires normal quotes.
    I hope this will solve your problem :)

  4. Rachel says:

    Thanks for the advice. I am still a bit clueless I have to say :(

    I changed the ” quotes to normal ones, but can still see code. Is that what you meant?!

    Sorry to sound stupid, but code is not my thing!

    Thanks, Rachel

  5. Kyle Eslick says:

    @ Rachel – Try copying the code off of the above post and pasting it into Microsoft Notepad (or a similar program). Then copy it from there and paste it into your theme where you want the button to display.

    Doing it this way will strip all formatting, etc. from the website and make sure you just get the code you need. I’ve made a habit of pasting all code into Notepad first to avoid problems and it has worked pretty well.

    Hope this helps!

  6. Rachel says:

    Tried Notepad.. still got the code :(

    I don’t know why, I have added code before with no problems..

  7. Rachel, is there any online place where we can see the code?

  8. Rachel says:

    I have put the code on an unpublished blog post here:

    http://rachelhenwood.wordpress.com/?p=188&preview=true

    I have tried a few times to copy and paste it through Notepad before inserting it, but it doesn’t seem to make any difference..

    I’m clueless I’m afraid.

  9. Only logged in users can see an unpublished page, so I’m unable to see it on your blog.

  10. Rachel says:

    Oh! I will publish the page! Sorry and thanks.

  11. Andrea says:

    It’s not working for Rachael because she’s got a blog at WordPress.COM.

    And it was just showing the code as text because you have to switch to the HTML tab. Once you get it to actually render, over at WP.com, it will get stripped out or disabled. It;s a security feature.

  12. Rachel says:

    I entered the code (via Notepad) into the post in the HTML format.

    I then saved it and viewed it again in Visual format. There is slightly less code now in the post, but still more than just the ‘Email this!’

  13. jbj says:

    I just gave a quick look to it, but you forgot to declare that you’re going to use Javascript:


    <script type=”text/javascript>
    — Paste the script here —
    </script&gt

    Hope it will work. Good luck!

  14. jbj says:

    Sorry, type error:
    it’s not &gt but > ;)

  15. Kyle Eslick says:

    @ JBJ – Correct, and thanks for your help!

    @ Rachel – Are you trying to include it within a post? I would recommend building it into your theme. Most people set it up to display directly below their posts like this site has above.

  16. Sorry, I was at my office in Paris and made type errors.
    here’s the working version:


    <script type="text/javascript">
    — your script here —
    </script>

  17. Rachel says:

    I tried adding the below to the script:

    – your script here –

    But that is already in the code that I have in Notepad. When I put it into the post and publish the code that you can see appears.

    Yes, I was trying to put the ‘Email this’ at the top of each post so that someone wouldn’t have to print the whole page. I have tried to put the code into a side bar, but I had the same problem.

    Sorry guys that it is taking up your time, I understand if you give up on me and get back to more important things!

  18. Rachel says:

    It hasn’t come through, but I added the script that JBJ put in his previous post…

  19. Jonathan says:

    I’ve added the code into my template and it displays and works perfectly in IE 6 & 7, Mozilla and Opera, but it messes the web page alignment up in Safari. Is there any kind of Safari hack that you know of that I can add to have it display properly?

  20. Carin says:

    Thanks for the code. I was wondering if there was a way to make the e-mail this button e-mail individual articles. The code I entered in my blog post metadata only emails the main page of my blog, not the posts themselves.

  21. Kyle Eslick says:

    @ Carin – It emails whatever page the code is on, so instead of placing it on your homepage, you may want to place the code on your single post (may be called main index template) page. That way it is only displayed on the single pages and users can email those single pages.

  22. Rahul Sonar says:

    Great code. But can we add a captcha to this code??? I dont want spamming….

  23. Hello,

    Great script.

    How can I change the link colour from blue to orange?

    Thank you :-)

  24. Rick says:

    Useful tip. Thanks very much.

  25. Carie says:

    This works perfectly. Thank you very much for the info!

  26. Walton says:

    I was having the same problem as Rachel i.e. the script wasn’t showing up. Getting rid of the lines fixed it for me. Works beautifully now. Now have a nice sharing toolbar at the end of my posts without a plugin.

  27. Devonanne says:

    This is working great except for one problem – I am using it to link to specific spots on my page using anchor tags. The button links properly for the first item (ie http://www.mysite.com/article#one) but any link after that just shows up as the anchor originally clicked on. If I click on #two first, all the rest of the articles will display as http://www.mysite.com/article#two instead of the correct number.

  28. verasera says:

    thank you for this code. it works greatly! :)

Trackbacks/Pingbacks »

  1. Fatih Hayrio?lu'nun not defteri » 04 Haziran 2008 web’den seçme haberler » Yeni, ç?kacak, taray?c?lar?n?n, kar??la?t?rmas?, Ba?lant?, Günlü?ümüze, Buradaki, epostalar?, Taray?c?lar, için says:
  2. Wordpress Hacks, Guides and Tricks | TechnoBuzz.net says:
  3. WordPress ?? ??? ??? snippet says:
  4. Top 30 Most Wanted Wordpress Tricks and Hacks | Make Money Blogging Experiment says:
  5. 50 Wordpress Resources that are Guaranteed to Improve Your Blog! | MattFlies.com says: