How To Use A Facebook Badge As Your Email Signature [Mac]
If you haven’t already read, I’ve shown you how to use HTML, photos and iTunes status in your Mac Mail signature in a previous article. I loved my signature, it had some attitude. Unfortunately, I upgraded to Snow Leopard and shortly found out that it had broken the Mail plugin I used to create the signature.
At the time of writing, the plugin, which is called SignatureProfiler has been updated for Snow Leopard but for the last couple of months, I’ve reverted to using good old reliable text as my email signature — until today.
I recently found out how to spruce up emailing by using my Facebook profile badge as a signature. It’s pretty neat and like all Facebook badges, you can easily customize it to your liking. We’ll go through the steps required to make it in a little while. Right now, I’d like to point out a few things.
Firstly, this trick is meant to be used in Mail, Mac’s default desktop mailing application. It works without the need for any addition plugins but you are required to set up your email accounts in Mail. Secondly, you also need to pair the account with a signature — just text will be fine at this point, it doesn’t really matter since it’s about to be replaced. Lastly, you’ll need TextWrangler, a free HTML-capable text editor or any other HTML editor.
Let’s get started, log in to your Facebook profile then scroll down until you see this link:
If you have never created a badge before, then go ahead and create one. It’s very simple and you only need to follow the on-screen instructions. A horizontal badge works best in this situation. Add whatever you like into the badge: your name, your profile picture, your status, your websites, anything! When you’re done, preview your badge. If you’re happy with your creation, click on Save. On the next screen, you’ll be presented with the sharing options. Click on “Other” and the badge’s code will appear. Click on it once and press Command+C to copy it to the clipboard.
Open up TextWranger or any HTML editor of your choice and paste the code in a new document. It should look something like this:
Notice that I’ve selected a part of the code which is actually not necessary for your signature. It adds a link to your profile and another link for others to create their own badge. It won’t look very pretty so we’re going to delete it. Here’s how it should look like after removing the useless bits.
Alright, now we’re going to add a space above the signature just for the sake of convenience. It’s much easier to add a space at this point, which will go between your email message and the signature; rather than having to press the Enter key several times after composing your email. Add <p> </p> to the beginning of the code, like this:
We’re almost done. All we need to do now is to remove the width and height attributes from the code. By leaving the attributes there, we are telling Mail that no matter what, the signature has to be that width and height. In actuality, the Facebook badge changes in dimension depending on your status, links, etc. So remove this part of the code:
Finally, we’re ready to save the HTML file. Click on File, then Save As. Type in any name followed by “.html” as shown in the screenshot. Select the Desktop as the destination and click Save.
Double-click the resulting file and it should open up in Safari. Check if everything is in order then save it as a Web Archive — click on File, Save As and select Web Archive as the format. Again, make sure that the Desktop is selected as the destination and click Save.
Just a little bit more and we’re done. Remember when I mentioned earlier that you should already have a signature attached to your email account in Mail? Well, if you haven’t created one, I suggest you do it right this instant because we’re going to look for it. Open up a new Finder window and delve down to ~/Library/Mail/Signatures. There should be a minimum of 2 files there if you only have 1 email account set up. One file should be formatted as .webarchive.
To check if it is indeed your email signature, double-click it and it should be displayed in Safari (Snow Leopard users can use Quick Look). Once we’ve determined that this is the signature we want to replace with the Facebook badge, copy the file name. Mine looks like “FED17D3A-AC4C-490D-93CB-80634BD2A114”. Use this to rename the webarchive file which you’ve just saved on the Desktop. After you’ve renamed it, click and drag it into the Signature folder. Finder will ask you if you’re sure you want to replace the existing file, click Yes.
And we’re done. Relaunch Mail and give it a whirl. Compose a new mail and your signature should show up.
How easy was that? No plugins, additional software or expert skills required! For our non-Mac friends who also want to use their Facebook profiles as email signatures, I’m sure Saikat’s post will teach you a thing or two about integrating HTML into Gmail.
What do you use as your email signature?