If you’ve got Keynote, download your very own eMail Bar here. I’ll be back later to tell you how it works and how to make it work. (If you already know how it works and how to create an email bar like the one at the bottom of this page, rats off to ya!)

UPDATED! Due to requests, I’ve included a Keynote 2 compatible file here.

Tuesday, April 4, 2006 9:29 PM

According to my watch not only is it later, it’s an EXTRA hour later than it was due to a timeshift that occurred sometime Sunday night!

Here’s the problem, when you tell iWeb to place an email button on your page (Insert -> Button -> Email Me), it inserts an image onto the page and attaches a mailto: url to the image. The problem is, since this is in plain view of any of the many SPAMbots scouring the web, chances are high that as soon as your page is found by one, you’ll start receiving a lot of junk mail. Depending on how good your junk mail filter is, this may OR may not affect you very much, but the potential is there.

I’ve head rumors of a Javascript way to handle this, but I’m trying to stick to the “set-it and forget-it” method of iWeb editing. If I have to do anything other than Publish after I go back and, say, embolden some words or correct spelling, then it’s no longer just a fun thing to do, it’s more of an effort (and writing is enough of an effort by itself!).

So, checking into what can sit on a page, give one-click access to an email message, AND is within the realm of something people might be able to use and alter easily, it’s not surprising that I ended up back at Keynote and it’s handy hyperlink capabilities.

Yummy eMail Bar

1 iWork (we’ll be using Keynote)

1 QuickTime Pro

To start, download the Keynote file linked to above. When you open it, you will see it’s a 766x200 that includes a 744x178 rectangle shape with the word eMail inside it. Why 766x200? Because Keynote won’t let you create any file smaller than 200x200. Because of this limitation, I had to figure out what size I wanted the end product to be and then scale that number higher until both dimensions were greater than 200. Why 744x178 instead of 766x200? Because of the stroke. When you set a thickness for the stroke of an object, half it it is inside the bounds of the shape, half is outside. 744x178 is what you get when you include the area being taken up by the stroke. OK, with that out of the way, let’s get down to the business of making it work!

The second thing you’ll notice (first being the strange shape for a presentation) is the hyperlink indicator in the lower right hand corner. Select the shape then go into your inspector to the Link pane (second from the right, icon looks like the one above).

The hyperlink is already set for Email Message and dummy text is entered for an email address and a message. Change youremail@mac.com to your email address and change Your Message to what you want to be entered as the subject of your email. I’m putting one on each page of my blog, so I’m setting it to be the entry description of the page. If you’d rather just set it once and reuse everywhere, set it to something like “iWeb site” or something generic like that.

Now, we’ve got it set up like we want it, now to export it to a format we’ll use to drop into iWeb. I’ve tried several different formats for export, but the only one I found that looked like I wanted to AND was a quick download (around 8K) is the Flash export. From your menu, choose File -> Export and click on the Flash icon. The only setting there is for including audio, but since there is no audio, there will be no impact to what we’re doing here. Just click Next... Choose a location to save it and just a quick Export later, you’ve got an .swf file and an html file. Double-click the html file to display the .swf file and click it to make sure it will open your email client as you expect with the correct email address AND subject line.

There’s two things we want to do now, shrink it down to, say 16 pixels high and change it’s format to .mov. Why .mov? Because the .swf format appears to be as transparent as .txt as far as bots are concerned. Do a search for mailto: and swf and see how many emails you get! Now, I don’t know if bots search .mov files for text or not, but it at least seems to be not as common of a practice as .swf file search, so we’ll go with QuickTime. Curiously enough, we’ll be using QuickTime Pro for this step.

Open QuickTime Pro, do File -> Open File... and navigate to where you saved the .swf file. Since Keynote creates it’s .swf files as QuickTime compatible, you should be able to open it.

Move your cursor over the bar, again double checking that the hyperlink is active (your curser should turn into a pointing hand). Press command-J to open the properties, and we’ll first turn off the movie controller by clicking the Presentation tab and for Movie Controller Type:, choose None Movie Controller. Then choose the Flash Track and select the Visual Settings tab. All you need to do here is to type in a number for the scaled size (I’m using 16 pixels high and letting it calculate the width)

. After making that change press command-S to save the movie. You’ll be asked if you want to save self-contained or as a reference movie, choose self-contained and click Save. This will create a .mov file with the Flash track within it. As an added step, you can change the name of the movie to something that doesn’t say email (I changed mine to em.mov).

Now, just drag and drop the movie into iWeb and you’re set! In Safari, it looks nice and neat and small (smaller than you can resize a .mov file to be within iWeb) with Windows, you’ll notice that the iWeb default setting in the HTML for the controller option leaves a white bar (where the controller would be) underneath. If you have a white background, then you’re fine. If you have a background like mine... well, you should REALLY be using Safari to view the page :)

Now that this is posted, I’m hoping if anyone has any information concerning bots and their ability to sniff through .mov files will drop me a line... using the email bar!