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

Jackson Chung 02-11-2009

How To Use A Facebook Badge As Your Email Signature [Mac] fb sig iconIf 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:

How To Use A Facebook Badge As Your Email Signature [Mac] profile badge 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.

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

Open up TextWranger or any HTML editor of your choice and paste the code in a new document. It should look something like this:

How To Use A Facebook Badge As Your Email Signature [Mac] fb sig selction for deletion 1


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.

How To Use A Facebook Badge As Your Email Signature [Mac] fb sig after deletion

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:

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


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:

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

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.

How To Use A Facebook Badge As Your Email Signature [Mac] saving fb sig html


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.

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

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.

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

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 To Use A Facebook Badge As Your Email Signature [Mac] fb profile in mail

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 5 Ways To Create Custom Multiple Signatures In GMail Read More will teach you a thing or two about integrating HTML into Gmail.

What do you use as your email signature?

Related topics: Apple Mail, Email Tips, Facebook, HTML.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Cheryl
    February 9, 2010 at 10:13 am

    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
      February 9, 2010 at 10:20 am

      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.

  2. woodrackets
    February 4, 2010 at 3:51 pm

    Forget FB, how do you do this with LinkedIn?

  3. jenny
    January 26, 2010 at 7:21 am

    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
      February 9, 2010 at 10:18 am

      Not that I know of. Have you given it a try?

  4. Jackson Chung
    January 26, 2010 at 6:52 am

    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.

  5. jenny
    January 26, 2010 at 6:06 am

    followed every step too, not working.

  6. Landon Johnson
    January 21, 2010 at 1:18 am

    followed all the steps to the letter... isn't working

  7. Michelle
    January 11, 2010 at 8:30 am

    how do i do this on microsoft outlook?

  8. KiKo
    November 10, 2009 at 12:34 pm

    Use WiseStamp Email Signature Add-on to add custom signature in GMail..

  9. Bakari
    November 2, 2009 at 2:07 pm

    Thanks for this, Jackson. Looking forward to trying it out.