Home | Advertise | Contact

RSS Feed | Email RSS

How To: Adding an Email This Button to Your Blog

By | Filed Under How-To
Tag(s): , ,

300x250 How To: Adding an Email This Button to Your Blog

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.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
  • Print This

    • 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+!

    There Are 28 Responses So Far »

    • http://www.gabfire.com Mehmet

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

    • Pingback: 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

    • http://rachelhenwood.wordpress.com/ Rachel

      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

    • http://www.catswhocode.com Jean-Baptiste Jung

      @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 :)

    • http://rachelhenwood.wordpress.com/ Rachel

      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

    • http://kyleeslick.com Kyle Eslick

      @ 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!

    • http://rachelhenwood.wordpress.com/ Rachel

      Tried Notepad.. still got the code :(

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

    • http://www.catswhocode.com Jean-Baptiste Jung

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

    • http://rachelhenwood.wordpress.com/ Rachel

      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.

    • http://www.catswhocode.com Jean-Baptiste Jung

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

    • http://rachelhenwood.wordpress.com/ Rachel

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

    • http://wpmututorials.com Andrea

      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.

    • http://rachelhenwood.wordpress.com/ Rachel

      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!’

    • http://rachelhenwood.wordpress.com/ Rachel
    • http://www.catswhocode.com jbj

      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!

    • http://www.catswhocode.com jbj

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

    • http://kyleeslick.com Kyle Eslick

      @ 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.

    • http://www.catswhocode.com Jean-Baptiste Jung

      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>

    • http://rachelhenwood.wordpress.com/ Rachel

      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!

    • http://rachelhenwood.wordpress.com/ Rachel

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

    • Pingback: Collection of WordPress Hacks

    • Jonathan

      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?

    • Carin

      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.

    • http://kyleeslick.com Kyle Eslick

      @ 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.

    • Pingback: Wordpress Hacks, Guides and Tricks | TechnoBuzz.net

    • Pingback: WordPress ?? ??? ??? snippet

    • Pingback: Top 30 Most Wanted Wordpress Tricks and Hacks | Make Money Blogging Experiment

    • Pingback: 50 Wordpress Resources that are Guaranteed to Improve Your Blog! | MattFlies.com

    • http://amrita-rao.in/ Rahul Sonar

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

    • http://www.blogadmonkey.com/blog Dragan Mestrovic

      Hello,

      Great script.

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

      Thank you :-)

    • Rick

      Useful tip. Thanks very much.

    • http://lendisphere.com/blog Carie

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

    • http://www.englishadvantage.info Walton

      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.

    • Devonanne

      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.