How To Use A Facebook Badge As Your Email Signature [Mac]

Ads by Google

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.

Ads by Google

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>&nbsp;</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?

Ads by Google
Comments (14)
  • Cheryl

    I followed the steps to put my FB badge as my email signature and nothing came out but a box with a questions mark in it. what am I doing wrong.

    • Jackson Chung

      You must be viewing from the Preferences. Try composing a new email and see if it shows up. If it doesn’t, copy and paste the HTML code here and I’ll take a look at it.

  • woodrackets

    Forget FB, how do you do this with LinkedIn?

  • jenny

    I did exactly what the instructions said EXCEPT one thing, I used the Facebook FAN badge instead but that shouldnt make a difference should it?

  • Jackson Chung

    Hi guys,

    Just wanna run through the process with you again in case you missed anything out.

    Did you:
    -create a regular signature first?
    -replace the correct signature?
    -restart Mail after replacing the signature?
    -crop the HTML code properly?

    If you did it correctly, it will only appear in a new mail. Try composing a new mail, select that signature and see if it turns up. The sig will not appear properly in the Preferences signature box.

  • jenny

    followed every step too, not working.

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.