How to Create a Pop-Up eMail This Entry Window in MovableType
Several people have asked me how I did it, so I wrote a tutorial on how to create a pop-up ‘eMail This Entry’ window in MovableType. Here it is.
PLEASE NOTE:
This tutorial is based on MovableType Version 2.1 only. If you have upgraded to Version 2.2 I advise you to wait until I have had a chance to update the tutorial!
A few months ago I read a Yahoo! news article and started thinking about their “eMail this story” feature. I thought it was a terrific idea and I wanted to implement a similar feature on my blog. I knew that it was possible using ASP (Active Server Pages), but my web host doesn’t allow ASP. I knew that it was possible using PHP, but I didn’t feel like redesigning my site with PHP. I know a little C and a little bit about CGI and - at the time - a little about templates and tags in MovableType. I asked Ben if he thought it was something he could help me develop. He said that, although it’s a feature he planned on adding to the official version of MovableType, he would be happy to give me pointers and advice on manipulating the innards of the system.
So I started digging through the code behind my beloved content management system. I learned that Ben and Mena did a tremendous job. They have written a high-quality piece of software which is easy to understand and customize if you’re a computer programmer. I asked Ben dozens of questions and he not only answered me quickly, but he gave me new ideas and offered suggestions and examples of how to do what I wanted to do with MovableType.
I’m not going to go into explicit detail of the coding involved in making this work. I will explain what you need to do to get a pop-up send entry window to work with your blog using my experience as a guide. Before you try to do this, I will warn you that you should be very comfortable with FTP, you should know how to CHMOD files on your host, and you should not be afraid to fiddle around with bits of code. The most important thing to do is back up your files! You do not need to edit any of the core MovableType files to get this to work, so do not be scared that you are going to ruin your blog. If you have questions, please direct them to me and not Ben and Mena. I will do my best to help you.
There is already a cgi file included with MovableType named mt-send-entry.cgi. This is the file that manages the internal send entry feature that will allow you to have an inline version of this feature. You should not edit or overwrite this file!
There are 4 steps to adding this feature to your site.
- Add a cgi file to create the pop-up window.
- Create a template to format the pop-up window.
- Add the javascript to call the popup window.
- Add the proper tags to the template in which you want the feature to appear.
I have included the files you need in a ZIP for downloading. (Here it is!) Since there is already a file used for a feature similar to this one, you should name your new file so that you do not confuse them. I suggest mt-popupemail.cgi, and that is how I’ve named the file in the ZIP. You will need to make some minor modifications to this file.
- Add a cgi file to create the pop-up window.
Once you’ve downloaded the ZIP, open mt-popupemail.cgi in a text editor. (My favorite is EditPad. Notepad will work fine though.) Here are the lines you need to edit:
- Line 31
This line points to the css for the pop-up window. Since I highly doubt you will want to use my css file, you will need to change this part of the line:
<style type=”text\/css” media=”screen”>\@import “http:\/\/www.davidgagne.net\/style\/code_base.css”;<\/style>
To make it point to your own css file, change the URL. The URL will read http://www.yourdomain.com/yourcssfile.css when you are done. You need to have the \ character before any / characters that appear in the line so that the cgi file can interpret them correctly. If your css file is located in http://www.happy.com/style/style.css, you need it to read
<style type=”text\/css” media=”screen”>\@import “http:\/\/www.happy.com\/style\/style.css”;<\/style>
instead. - Line 38
This line sets your eMail address. If you want to get a CC whenever someone eMails one of your entries to anyone, this is the where you tell it your address. The line currently reads:
my $myemail = “sendentry\@davidgagne.net”;
Simply change sendentry\@davidgagne.net to your address. You must include the \ before the @ symbol! Even if you do not want to get a CC, you need to change this to your address. - Lines 46-50
These lines are commented with a pound sign (#). If you want to receive a CC, just remove the # at the beginning of each line. If you do not want to receive a CC, leave the # where it is and do not edit these lines. - Line 66
This line contains the name of your pop-up window template. I named mine Send Entry and, for simplicity’s sake, I would just use that name. If you feel comfortable changing it to something else, go ahead. But remember that name, because you will need it later.
- Line 31
- Create a template to format the pop-up window.
I’ve included my version in the ZIP file as sendentry.txt. You will need to change line 6 so that it points to your own css file, and edit any of the div’s as you would a normal template file in MovableType to get the look and feel of the template that you want. You will notice in line 11 there is a link to the cgi file. Obviously if you decided to use a different name, change that here.
Now you need to add this template to your blog. Open your blog editing screen and go to the Templates section. MovableType lists Index Templates, Archive-Related Templates, Miscellaneous Templates, and Template Modules. You will be creating a Template Module. Click “Create New Template Module”. In the name field, enter Send Entry (or whatever it is that you named your template on line 66 in the cgi file). If you want to link the template to a file, go ahead and do that. (I didn’t, because I don’t really play around with that aspect of MovableType very much.) In the Module Body area, enter the contents of the template module, then Save it. That’s it!
- Add the javascript to call the popup window.
To the header of the file from which you will call the pop-up window (or from your global javascript file) you will need to add:
function SendEntry (c) {
window.open(c,
’sendentry’,
’height=350, width=380,scrollbars=no,status=yes’);
} - Add the proper tags to the template in which you want the feature to appear.
Now it’s time to add the links to get the pop-up to appear where you want it. I have a link to the send entry option at the end of each of my posts. The html to add to your Main Index template, for example, would look like this:
<a href=”javascript:SendEntry(’<$MTCGIPath$>mt-popupemail.cgi?entry_id=<$MTEntryID$>’)”>eMail this entry!</a>
That’s it. That’s the end of the tutorial, and also the end of this post. Please leave me comments if you use this tutorial. Let me know if you liked it or if you have pointers on how I could improve it. Thanks!
March 21st, 2002 at 3:04 pm
This is *exactly* what I was looking to implement on TheRedKitchen.net (several months before MT2 came out!)
So I’m playing with your tutorial, and I find myself a bit under-javascript-ed. I’m *thinking* that there should be some sort of javascript in my head so that it knows what SendEntry is, but it could be so elementry that you just didn’t include it. I’ll keep playing!
Thanks for writing such a great tutorial!
March 21st, 2002 at 5:34 pm
Works like a charm. Heck, even this non-CGI guy figured out a way to edit the printed return. Great job and description, David.
Will release tomorrow. Gratzi!
March 22nd, 2002 at 3:40 pm
Got this working and it’s great….just was I was searching around for the ability to do. Thanks for your hard work!
Quick question for you….I use weekly archives and the link it emails is for that archive…I’d like to add ‘#XXXXXX’ to the end of the link (where XXXXXX is the Entry ID) so it jumps to the name anchor on the archive page. I’m not a CGI coder…..but I see where I might be able to make that change…just unsure about the code to do that.
TIA
March 22nd, 2002 at 9:05 pm
Nevermind, played around with it long enough and figured it out…..once again, great work….thanks!
March 24th, 2002 at 9:31 am
I just wanted to come back and let you know that theredkitchen is now using this, with a few tweaks here and there - thank you again for such a wonderful tutorial!!
April 8th, 2002 at 12:56 am
You’re incredibly kind to make this available.
Thanks so much. Works brilliantly.
Quick question. When I’ve road tested this, after I fill in the form and dispatch the email, I get a new graphic confirming that the link has been sent. It works great but the text and the graphic components of the confirmation image do not seem to align. Any suggestions for a remedy? I wonder if it has something to do with my directory structure.
My MT cgi files are in a cgi bin directory (myipaddress/cgi-bin), i then have an mt-static directory in which the rest of mt lives (www.broadscapeventures.com/html/mt-static), and a weblog directory in which DFME’s log directory and files live (www.broadscapeventures.com/html/weblog/dfme/)
Profuse thanks in advance!
April 21st, 2002 at 10:51 am
Just thought I’d come back and let you know that http://scriptygoddess.com now (as of this morning) has this implemented, as well as my personal journal at http://love-productions.com/hopelessromantics
You rock for sharing this!!
April 29th, 2002 at 8:11 pm
I’m glad you liked it Kristine!
April 30th, 2002 at 5:58 am
David: Thank you so much for this amazing plug-in. Great instructions made it a breeze to set up, too.
A few tips for anyone else giving it a try:
I found that submitting an incomplete form caused a 500 error on my server. I modified the “sendentry.txt” template file with javascript to trigger an error message if any fields were left blank, thereby avoiding this problem. If anyone is interested, here it is - just do a “view source”:
http://www.requiredreading.com/docs/sendentry.txt
Note: I also use the “MTEntryTitle” tag in the template to display the title of the posting with the form. I think this will help readers understand what it is, exactly, that they’re sending. Otherwise, it may be a bit confusing.
Thanks again — joe chapuis
May 8th, 2002 at 2:54 pm
David, this rocks. Thanks for the work.
I’m a newcomer to MT, and I’m a little confused as to how I can change the appearance of the pop up using my stylesheets. Any pointers on resources?
Also, thanks to Joe for the error checking javascript!
May 8th, 2002 at 2:58 pm
Also, I had one other question. Is there a way to edit the text of the email that is generated by this, so I can add a different sig, etc.?
May 25th, 2002 at 4:50 pm
Thank you for the tutorial and the files! You did a great job in explaining how to make this work, and I had an “email this entry” link on my site in less than 20 minutes!
Thanks again, and keep up the good work!
Emmanuel
ehuna@factsofisrael.com
http://www.FactsOfIsrael.com
July 2nd, 2002 at 6:48 am
Since converting to the MySQL database in 2.2, unsurprisingly this feature no longer works. I was wondering if anyone had any luck converting it?
July 3rd, 2002 at 9:31 pm
David:
I follow your tutorial but I get this error message:
CGI Error
The specified CGI application misbehaved by not returning a complete set of HTTP headers. The headers it did return are:
Can’t locate MT.pm in @INC (@INC contains: lib D:/www/Perl/lib D:/www/Perl/site/lib .) at d:\www\digitalrice\msea\mt-2.0\mt-popupemail.cgi line 9.
BEGIN failed–compilation aborted at d:\www\digitalrice\msea\mt-2.0\mt-popupemail.cgi line 9.
Anybody can help me? Thanks
July 5th, 2002 at 11:29 am
I tried to install this, but when i click on the mail entry link, it returns a server 500 error. Is this because i have mt 2.2 installed? or have i done something wrong? Thanks.
Nicole
July 7th, 2002 at 6:53 am
is there a version of the “email this entry” code without having to use pop ups?
July 7th, 2002 at 8:45 pm
David, Javier, anyone else that might have the same problem… I too get the same error. Just out of curiosity, I am running Win2000 Server on a machine at home on a static IP DSL connection. It seems to me that it is looking in my Perl\lib folder instead of my MT\lib folder for MT.pm.
Hmm, yah so I threw a copy of MT.pm into my C:\Perl\lib folder and I get a new CGI Error.
CGI Error
The specified CGI application misbehaved by not returning a complete set of HTTP headers. The headers it did return are:
Can’t locate MT/ConfigMgr.pm in @INC (@INC contains: lib C:/Perl/lib C:/Perl/site/lib .) at C:/Perl/lib/MT.pm line 12.
BEGIN failed–compilation aborted at C:/Perl/lib/MT.pm line 12.
Compilation failed in require at D:\webserver\dsl\mt\mt-popupemail.cgi line 9.
BEGIN failed–compilation aborted at D:\webserver\dsl\mt\mt-popupemail.cgi line 9.
Do you know where this reference point is coming from for the “lib” folder?
July 8th, 2002 at 6:17 am
PLEASE NOTE:
This tutorial is based on MovableType Version 2.1 only. If you have upgraded to Version 2.2 I advise you to wait until I have had a chance to make sure this works properly with Version 2.2. I’ll get to it soon!
July 21st, 2002 at 10:20 am
Anxiously waiting for the 2.2 version.
September 14th, 2002 at 5:56 am
Me too!
September 17th, 2002 at 12:11 pm
David, you rock f*ckballs. Ben sent me to you and your script goodness. I am using MT 2.21, and I can assure that it works beautifully. I even included a textarea for optional messages — just change your param from ‘message’ to ‘link’ and then make your textarea the ‘message’ param.
September 20th, 2002 at 12:06 pm
I an getting an internal server error: Can’t locate MT.pm in @INC (@INC contains: lib /usr/local/lib/perl5/5.00503/i386-bsdos /usr/local/lib/perl5/5.00503 /usr/local/lib/perl5/site_perl/5.005/i386-bsdos /usr/local/lib/perl5/site_perl/5.005 .) at /u344/nkpd/cgi-bin/mt-popupemail.cgi line 9.
BEGIN failed–compilation aborted at /u344/nkpd/cgi-bin/mt-popupemail.cgi line 9.
This is from doing a Perl Script Validation on my server.
October 2nd, 2002 at 5:20 am
Aaaie!
Waiting… and waiting…. for an update to this excellent hack to work with MySql version! Please ? Somebody ? Anybody ?
Oh…
October 5th, 2002 at 8:34 am
It seemed to work just fine for me in testing - with MySQL and the latest version of MT. =)
October 22nd, 2002 at 10:31 pm
can I do this if I used Frontpage 2000 to build my website?
February 18th, 2003 at 8:40 am
utf-8 charachters are not encoded properly in the emails. They are not readable.
February 25th, 2003 at 4:24 am
After adding:
mt-popupemail.cgi?entry_id=’)”>eMail this entry!
to my index template I get the error message:
An error occurred:
Build error in template ‘Main Index’: Error in tag: You used an ‘MTEntryID’ tag outside of the context of an entry; perhaps you mistakenly placed it outside of an ‘MTEntries’ container?
When I rebuild the template file.
Any ideas?
Will
will@becreative.co.uk
April 6th, 2003 at 5:27 pm
David -
Thanks so much for such a great tutorial! I am however getting 404 - file not found error. I am using MT2.6 - is that the problem?
May 22nd, 2003 at 5:22 pm
David -
I also ge this error:
CGI Error
The specified CGI application misbehaved by not returning a complete set of HTTP headers. The headers it did return are:
Can’t locate MT.pm in @INC (@INC contains: lib F:/Perl/lib F:/Perl/site/lib .) at F:\moricentral\cgi-bin\mt\mt-popupemail.pl line 9.
BEGIN failed–compilation aborted at F:\moricentral\cgi-bin\mt\mt-popupemail.pl line 9.
Any ideas? MT2.63, IIS5.
Thanks,
Ed
Can’t locate MT.pm in @INC (@INC contains: lib F:/Perl/lib F:/Perl/site/lib .) at F:\moricentral\cgi-bin\mt\mt-popupemail.pl line 9.
BEGIN failed–compilation aborted at F:\moricentral\cgi-bin\mt\mt-popupemail.pl line 9.
May 29th, 2003 at 8:06 am
I’m lost. where do I add the link tag
to this page http://design.realestateabc.org/adonnadieu/www/experts.htm
and do I have to ftp this file?
thanks
June 9th, 2003 at 4:21 pm
I’m a gumby I guess, but any ideas why I would keep getting this error on “rebuild”?
Build error in template ‘SendEntry’: Error in tag: You used an ‘MTEntryID’ tag outside of the context of an entry; perhaps you mistakenly placed it outside of an ‘MTEntries’ container?
June 9th, 2003 at 6:46 pm
This is AMAZING!
Congratulation and thanks for sharing!
Best regards, Marcelo
June 9th, 2003 at 9:59 pm
Worked perfectly on the first try — who’d have thought it! Thanks for the great tool. And thanks also to the other commentators who provided tips and tweaks. If you ever update this further, though, a requested feature would be the ability to edit the content of the outbound message. Thanks again.
July 10th, 2003 at 8:47 pm
I got it to work quite easily with MT 2.64. I can’t seem to get Joe’s java script “error message” to work though. And I would like to add a comment box in the pop-up window, so the sender could add why they emailed it.
August 25th, 2003 at 10:28 pm
I get a configuration error back from my server when I try to implement this on MT 2.63
ERROR_NOTES = malformed header from script. Bad header=”my” variable %head masks earl: /usr/local/etc/httpd/cgi-bin/suid
Any idea what “malformed header” might mean? I have followed the instructions to the letter, over and over again actually, making sure I got everything right. And it still doesn’t work.
September 23rd, 2003 at 8:54 am
I got this working when I tried again after I had reinstalled MT. It works with 2.64. Don’t know what was going wrong before.
Now I would like to include an optional message field. Has any one tackled this who could share your code?
November 21st, 2003 at 8:05 am
This is great, thanks!
December 30th, 2003 at 4:12 am
hello.
when people send an entry they get a confirmation page saying “link sent to blah blah from blah blah, entry sent: blah blah”.
where do i edit the layout of this page?
January 3rd, 2004 at 2:25 pm
Thanks, David. It was a breeze!
I have got that bunged in here: http://www.cyberbrahma.com/biography/authors/pgwodehouse.php
And thanks, joe chapuis, for your enhancements using javasript!
I have a request to joe chapuis:
Could you please add a snippet to the form validation javascript so that the email format is correct and no illegal charcters are present in the email id submitted. This will prevent typos in the email id and also prevent folks playing pranks in the form.
Kindly send me the help to sk at my doman = cyberbrahma.com
Thanks a bundle, joe chapuis!
January 7th, 2004 at 2:03 pm
I like you already for doing this. If I can figure out how to make it work, I will love you. Not a romantic love, mind you, but more of a friendly “I love that guy” kind of love. Like the kind where you’d go out of your way to help the guy move furniture or save his cat from a fire.
May 6th, 2004 at 11:09 am
This is so awesome and I appreciate it, BUT when I click on email this link, I get an error 500. Can’t quite figure out the problem. Can you give me a pointer? Thanks.
June 6th, 2004 at 12:19 pm
dfkljdfklf
September 23rd, 2004 at 9:26 pm
Will this plugin work with MT 3.11? It has worked flawlessly for me on MT 2.6, but just will not work for me in 3.1