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.
Wednesday, May 28th, 2008 at 8:51 am
Great tip. Have been looking for this since a while. Thanks Kyle.
Friday, July 4th, 2008 at 6:07 am
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
Saturday, July 5th, 2008 at 4:50 pm
@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
Monday, July 7th, 2008 at 8:01 am
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
Monday, July 7th, 2008 at 8:40 am
@ 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!
Monday, July 7th, 2008 at 9:06 am
Tried Notepad.. still got the code
I don’t know why, I have added code before with no problems..
Monday, July 7th, 2008 at 1:21 pm
Rachel, is there any online place where we can see the code?
Monday, July 7th, 2008 at 10:26 pm
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.
Tuesday, July 8th, 2008 at 1:17 am
Only logged in users can see an unpublished page, so I’m unable to see it on your blog.
Tuesday, July 8th, 2008 at 3:42 am
Oh! I will publish the page! Sorry and thanks.
Tuesday, July 8th, 2008 at 7:06 am
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.
Tuesday, July 8th, 2008 at 8:40 pm
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!’
Tuesday, July 8th, 2008 at 8:41 pm
PS. It’s at http://www.rachelhenwood.com
Wednesday, July 9th, 2008 at 8:15 am
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>
Hope it will work. Good luck!
Wednesday, July 9th, 2008 at 8:16 am
Sorry, type error:
it’s not > but >
Wednesday, July 9th, 2008 at 9:55 am
@ 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.
Wednesday, July 9th, 2008 at 4:07 pm
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>
Wednesday, July 9th, 2008 at 11:46 pm
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!
Wednesday, July 9th, 2008 at 11:47 pm
It hasn’t come through, but I added the script that JBJ put in his previous post…
Tuesday, July 29th, 2008 at 2:14 pm
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?
Monday, August 11th, 2008 at 1:57 pm
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.
Monday, August 11th, 2008 at 2:01 pm
@ 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.
Monday, May 18th, 2009 at 6:55 am
Great code. But can we add a captcha to this code??? I dont want spamming….
Trackbacks/Pingbacks
Leave A Comment
Become one of our
Featured Sites
Recent Trackbacks
Contributing Authors
Archives
Extras
WordPress Hacks Copyright © 2007-2009 | An Apricot Media Website
Template by StudioPress | Custom Design by Kyle Eslick and Blog Design Studio
RSS Feed Email RSS