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.

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.

1. Add a cgi file to create the pop-up window.
2. Create a template to format the pop-up window.
3. Add the javascript to call the popup window.
4. 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.

1. 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\[at]davidgagne.net";
     

     Simply change sendentry\[at]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.

   Save this file and upload it – in ASCII format – to your MovableType directory. CHMOD it to 755. Done!

2. 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!

3. 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'
        );
   }
   

4. 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!