i had a relatively hard time to put a “follow me on twitter” badge (with a Hyperlink) to my email signature in Apple mail. So i thought i would share this with other people.

The process is fairly straight forward once you figure it out. So here it goes. Before you start make sure your Mail app is completely closed ( right click on it in Dock and “Quit”)

Apple mail signatures are basically  web archives (.webarchive). Needless to go into what is a webarchive but you can read about it here

These webarchive files are located in ~/Library/Mail/V2/MailData/Signatures.

“~” is short for your home folder (for people who are not so technical). For my macbook this translates into “/Users/usm”

In my Mac OSX lion 10.7.2 i can’t see this path using Finder, so i have to open finder and then select  “Go to Folder” option under “Go” menu, and then put in the path above.

You can see in the screen shot above there are a couple of webarchive files. There will be one for each signature you have defined. You can find out which is which by looking at the SignaturesByAccount.plist file. Just open the plist file in TextEdit by right clicking on it.

You can notice from the highlighted text that my account munir.usama@gmail.com is linked to key “F6999944-2476-4CE9-AEDE-2B45518B0315″ which means “F6999944-2476-4CE9-AEDE-2B45518B0315.webarchive” is the file i am interested in replacing with my new signature.

Next step is to go to your fav. HTML editor to compose some HTML which we can use as email signature.  If you don’t have one, like  i don’t,  you can use the ones available on the internet. For example you can go to an online WYSIWYG HTML editor here

Before you start typing your signature you need an image file for “follow me on twitter” badge. You can find plenty of them on google if you search for them. I have one here.

You can also get a follow me button from twitter resources here. This allows you to create an official follow me button and embed it in your HTML pages. However these official badges are generated through a javascript given to you by twitter which does not seem to work inside Apple Mail signatures

You need an image file online and publicly available because otherwise when you send people emails they will not be able to see the image. Lucikly wordpress blog offers me upto 3.0 GB of media space online where i can put images , you can put it on your flickr or instagram or whatever is it that you use for sharing images.

Finally when you have an image online you are ready to compose an HTML signature. In the editor type in your signature and add an image to it

you can use the HTML editor’s controls to make the text exactly how you like it. Then insert the image by clicking the image icon and providing the public URL of the image.

Once the Image is inserted,  you can make it a hyperlink to you twitter profile. Just select the image , click the “link” icon and put the URL of your twitter profile.

Once this is done, click “Save file now” which will download the HTML source to your “Downloads” folder.

This particular editor downloaded the source as a “txt” file so i had to rename it to “html”.

you can open the HTML in Safari and view source ( you can do that by right clicking on the page and select “view source”)

You can see that it’s a very simple HTML with your text and img source and the hyperlink to your twitter profile

If you are good with HTML you can play around with the HTML a little more. But be care ful to not use any external CSS file (all CSS has to be inline).

Now in Safari select File -> Save As and save it as a .webarchive overriding the one we wanted to replace  (~/Library/Mail/V2/MailData/Signatures/F6999944-2476-4CE9-AEDE-2B45518B0315.webarchive)

Once done, reopen the Mail and voila you have your new signature. The badge will only act as a link once you send the email (you can’t tell while composing the email that if the hyperlink works or not)

You can use the same technique to insert any sort of HTML signature to the Mail app.