Slick Looking Gmail HTML Signature
This post has been updated. Read the newest version here.
With a little bit of HTML and a couple of Mozilla Firefox Plugins you can make a pretty slick looking HTML signature for Gmail.
Here is what mine looks like
 |
Chris Pollock my blog | LinkedIn | flickr | del.icio.us |
|
1. Firefox is Required. If you haven't made the switch.. go for it.
2. Download Greasemonkey – it's a firefox plugin.
3. Download a Grease Monkey Script called: Gmail HTML Signature. The script should install automatically when you click on "Install this script" button in the upper right hand corner. Here are some additional setup instructions from the script creator.
4. Prepare the HTML. It helps to know a bit about HTML, but if you don't feel free to use my snippet below, inserting your own information where appropriate.
<table><tbody><tr><td> <img src="http://farm3.static.flickr.com/2363/2237613114_5ff587490a_o.jpg" /> </td><td></td><td> <div style="padding-right: 5px; padding-left: 5px; font-size: 11px; padding-bottom: 5px; color: #666666; padding-top: 5px"><strong>Chris Pollock</strong> <br />
<a href="mailto:cwpollock@gmail.com">cwpollock@gmail.com</a> <div style="font-size: 10px"> <a href="http://sim.plified.com">my blog</a> | <a href="http://www.linkedin.com/in/chrispollock">LinkedIn</a> | <a href="http://www.flickr.com/photos/pollocks">flickr</a> | <a href="http://del.icio.us/cwpollock">del.icio.us</a> </div></div></td></tr><tr></tr></tbody></table>
I created a thumbnail avatar (50 by 50 pixels) and uploaded it to Flickr. You'll want to replace the image with your own image. To get the picture URL, click on "All Sizes" on your photo page and get the URL in the text box at the bottom of the page. You can also replace your own list of links below your name and email.
When creating this code you might want to assemble it in a text editor. Notepad will do.
5. After you've installed the Greasemonkey script, you'll see a "create signature" link next to your email address when you go to compose a message. The first time you compose, click that link and add the HTML code that you prepared. Click "Save Signature" and you should be set to go.
29 Comments, Comment or Ping
cwpollock
I have had a couple of people contact me about having problems with their HTML. The primary issue seems to be the double quotes in the HTML. If you have a problem getting your links to work, check to make sure that your double quotes are formed correctly. They should be the standard straight quotes, not "smart quotes".
Feb 12th, 2008
Kim Hjortholm
Great post, together with this add-on Gmail HTML signatures (http://userscripts.org/scripts/show/20887) I'm in sig-heaven soon
Feb 16th, 2008
Diana
Thanks so much for the code! My signature looks great! One question, though –Is there any way to add the signature to Reply emails? Right now it only shows if I go to compose a new email. Diana
Mar 12th, 2008
Alan
Mar 21st, 2008
Melinda
Hey,
Thanks for this Chris.
Melinda
Apr 12th, 2008
Melinda
I'm back. My signature doesn't always show up when I compose a new message. I ticked 'no signature' in the Settings page.
Apr 12th, 2008
Nishant
Its not working on Reply/ Forward…
Apr 16th, 2008
Brian
Great stuff, finally got it up and running with google apps. Thanks for the article.
May 8th, 2008
netgiz
Great idea..!!!!
I made it in my gmail..
Thanks again
May 14th, 2008
CactusTriathlete
Thanks for this page! I used it as a start to get just the sig I was looking for!
May 22nd, 2008
GeekFG
There is a bookmarklet HTML creator in order to add HTML signature to Gmail : http://projets.geekfg.net/?/1-how+to+insert+html+signature+in+gmail.htm
Jun 10th, 2008
Jerome Dane
This Firefox add-on allows you to easily maintain up to four separate rich HTML signatures for each email address you have set up in your Gmail account: http://blankcanvasweb.com/pages/detail/id_9/n_gmail_signatures/
Jul 17th, 2008
gareth
thanks, it worked great!
Jul 27th, 2008
fornetti
I do not believe this
Aug 30th, 2008
Finkpad
you should believe it because Jeromes BLANK CANVAS addon works great and is easier to setup than the greasemonkey script – imho of course
http://www.projex.com/blog/how-to-use-html-images-with-google-gmail-signature
Mar 24th, 2009
JazLabs
There is a much better solution, that works on all browsers and on any computer (even if its not your own). No plug-ins/hacks required:
http://twurl.nl/88g2pq
Jul 8th, 2009
Pol47
But in order to make this point, one need not deny that language is for communication, or claim that it could just as easily be thought of as being for inner speech. ,
Oct 22nd, 2009
Jordan Clist
Or you could just make a "Canned Response"…
It's MUCH easier than doing all these hacks.
instructions here:
http://jazlabs.co.uk/blog/2009/07/08/easy-gmail-html-rich-text-signature-solution/
Feb 2nd, 2010
Jerome Dane
If anyone wants it, the updated version of Blank Canvas Gmail Signatures is available at:
http://blankcanvasweb.com/pages/id_9/n_gmail_signatures/
Feb 15th, 2010
Josh @WiseStamp
Hi Chris,
Cool post! You might be interested to ease the process you described even more with WiseStamp.
WiseStamp enables you to easily include your Social Profiles as well as an updating RSS feed or any Html you desire in your signature. It will automatically inserts your signatures to Gmail, Google Apps, Yahoo etc..Check it out! there is both a Firefox and Chrome version you can test drive:
http://www.wisestamp.com
Josh and the WiseStamp Team
Mar 22nd, 2010
vulgarbulgar
assuming you use several computers, and are possibly restricted from installing plugins and add-ons, there is another way.
ALTERNATE SOLUTION (this works great for me)
Essentially, this SIMPLE method adds a 'Gadget' in your GMail sidebar which displays your HTML signature through an iFrame. To embed the signature in your message, you just drag and drop it from the gadget, and into the message.
That's it… almost as basic as using the Canned Response method, except it currently works.
INSTRUCTIONS
1. Save your HTML signature in a file, and upload it to a web server along with any images, etc.
2. Edit the HTML signature URL in the xml file located here: http://vulgarbulgar.com/temp/gmail/gmail_html_signature.xml so it reflects where you uploaded your HTML file (otherwise you'll be staring at MY signature in your Gmail!).
3. Upload the edited XML file to your web server (such as where you placed your HTML signature file).
4. Log-in to GMail and enable 'Gadgets' in through Labs. Then, (still in GMail) go to 'Settings', 'Gadgets' tab and paste in the URL of your XML file, including the XML file extension.
5. You should now see your signature displayed in the GMail sidebar. Whenever you want to include your signature, simply select it, and drag and drop it into your message!
It's a sloppy workaround, but it definitely works!
SCREENSHOTS
http://i45.tinypic.com/4j2eci.jpg
http://i45.tinypic.com/25txemx.jpg
http://i50.tinypic.com/iondw6.jpg
DISCUSSION HERE: http://www.google.com/support/forum/p/gmail/thread?tid=6a3bf8141986fa96&hl=en&fid=6a3bf8141986fa96000489a78f52844d
Jun 22nd, 2010
sumit
now you can include html or rich text signature directly inside gmail, no need for hacks or third-party scripts. you can visit http://knol.google.com/k/sumit-roy/how-to-create-gmail-html-signature/1n8io3wwlct86/10 for some customizations tips and tricks.
Sep 21st, 2010
Nilu
Want to my Signature…. that b used my mail id
Dec 13th, 2010
frenky
k7He1x http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com
May 7th, 2011
sanndy
Thnx a ton main…gr8..:)
Aug 15th, 2011
Ojgkihdx
It's OK teen porn search engines ybif
Jan 5th, 2012
Reply to “Slick Looking Gmail HTML Signature”