how to create facebook email signature using profile badges application

In yesterdays blog (how to display images in Google mail), I mentioned the excellent Blank Canvas Gmail Signature FireFox Add-on (wow that's a mouthful ;) ) which allows rich text html style signatures to be appended to emails from within Google email. I was surprised to find a couple of private mails this morning asking how I created the Facebook graphic that I used in the example. It's always nice to know that people out there in inter-web-superhighway-land actually read any of my inane ramblings and I'm glad to say that the Facebook Signature Badges are easy to setup and gives a great looking result for your private mails.

GMAIL (Google Mail) lets you used advanvced HTML signatures in your email with this Firefox addin.

So, if you want to create a Facebook style signature graphic for your email signature you need to:

• Use Firefox
• install the Blank Canvas Gmail Signature FireFox Add-on
• Register for Facebook (duh!)
• Create a Facebook Profile Badge
• Copy the generated HTML from the Badge into your BC GMAIL signature (or wherever else you want to use the code)
• thats it!

It just doesn't get any simpler than that. 

The signature graphic can be in a JPG format or as a little JavaScript which allows clickable links. I particularly like the way that as you do things in Facebook, the badge automatically updates, so I include my blog info on my badge and the email signature updates with new blog info as I write some.. you could equally include photos or videos.

Basic FACEBOOK Image in gmail signature

Heres a really simple badge setup in Facebook, then the code simply copied straight into the Firefox BC addon. Your signatureo will apear like this and include the latest photos uploaded to Faacebook:

Advanced FACEBOOK Image in gmail signature

Now, with a basic knowledge of HTML you can edit the source code to include any extra bits you wish.

My html source code for the gmail signature (including my contact info, twitter, linkedin, Facebook and random other stuff that nobody but me cares about ;) ) looks like this:

<blockquote style="margin: 2em 0pt;">
<p style="font-family: tahoma,verdana,arial,sans-serif; font-size: 11px;
 font-variant: normal; font-style: normal; font-weight: normal;
 color: rgb(59, 89, 152); text-decoration: none;">
 <b>Nick Litten</b.</br>
IBM i Developer &amp; IT Consultant<br />
<br>
<a title="i think therefore i projex" href="http://www.projex.com/"
 target="_blank">projex</a> | <a title="email me"
 href="mailto:nick.litten@projex.com" target="_blank">email</a> |
 <a title="Nick Littens Personal Contact Information"
 href="http://www.projex.com/nick.litten" target="_blank">profile</a>
 | <a title="Call me on the Dog and Bone"
 href="skype:nick.litten?call">skype</a> | <a title="Facebook Me"
 href="http://www.facebook.com/Nick.Litten" target="_blank">facebook</a>
 | <a title="Linkedin Professional Resume"
 href="http://www.linkedin.com/in/nicklitten" target="_blank">linkedin</a>
 | <a title="Twit Twit Tweet!" href="http://twitter.com/finkpad"
 target="_blank">twitter</a><br>
<a title="title" href="http://www.facebook.com/Nick.Litten"
 target="_blank"><img style="border: 0px none ;" alt="Nick Litten's Facebook Profile"
 src="http://badge.facebook.com/badge/684608339.541.1046597578.png"
 </a></p>
</blockquote>

Nick Litten
IBM i Developer & IT Consultant

projex | email | profile | skype | facebook | linkedin | twitter

Of course, by logging into facebook and updating your Badge Info (against your profile) then your email signature will automatically change in GMAIL. I think it's a funky alternative to the standard email signoffs...

- Hope it helps!