Tutorial: Use Your Social Media Follow Me Icons as your Email Signature

by Eric Pena on June 24, 2010

Social Media Icon

For the social media savvy, use your email to let people follow you on the Social Web by adding your social media channels in your email signature.

For Apple Mail:

Step 1. Gather your favorite social media icons

1. Search for your favorite icons on the web and download them to your computer.
2. Upload the icon files to a photo-sharing/storage server on the web such as Photobucket.

Step 2. Add a Temporary Signature in Apple Mail

1. Go to Apple Mail’s Preferences -> Signatures
2. Click on (+) to add a temporary signature (e.g. Temp).

New email signature

3. Drag the temporary signature (Temp) to the email account where you will likely use it.

Step 3. Creat your HTML signature

1. Open Textedit or Textmate and use the following code as template (making sure to replace the href and src with your own links):

HTML Signature Code

href is the URL link of your social network site.
src is the link to the specific social media icon you uploaded on your photo-sharing site (e.g. Photobucket).

2. Save the file as .html.

Step 4. Create a WEBARCHIVE file to replace your temporary email signature.

1. Open the HTML file in Safari.

Icons in Safari

2. Click Save As… and replace the latest .webarchive (temporary signature) file in your Home folder -> Library -> Mail -> Signatures.

Save and Replace Webarchive

Step 5. Restart Apple Mail

Check by creating a New Message. You should be able to select the signature from the drop-down menu on the corresponding email address.

Signature in email

For Windows and Outlook users, follow the instructions here and use the sample code above for your HTML signature file (I haven’t tested this but I think it should work).

Related Posts with Thumbnails

{ 6 comments… read them below or add one }

1 Lennyviner December 17, 2010 at 3:43 pm

You cant copy and paste the code!?

2 The Practical Cafe January 8, 2011 at 12:49 am

Good post. Have a client that uses Apple Mail and she just can’t figure this out. Thanks for posting.

3 Online Media Direct February 26, 2011 at 10:00 pm

yeah no way of copying the code here.

4 Hflani August 22, 2011 at 5:50 pm


5 Oho Ohno August 3, 2012 at 3:54 am

A photo of code, nice job ass.

6 Heath Reed April 29, 2016 at 12:15 pm

oooo that’s a good idea! thanks for sharing

Leave a Comment

Previous post:

Next post: