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

fb sig icon   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:

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


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.

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

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

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

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.

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

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:

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

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:

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

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.

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

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.

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

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.

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

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.

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

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?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

14 Comments -

0 votes

Bakari

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

0 votes

KiKo

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

0 votes

Michelle

how do i do this on microsoft outlook?

0 votes

Landon Johnson

followed all the steps to the letter… isn’t working

0 votes

jenny

followed every step too, not working.

0 votes

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.

0 votes

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?

0 votes

Jackson Chung

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

0 votes

woodrackets

Forget FB, how do you do this with LinkedIn?

0 votes

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.

0 votes

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.