How to add social media buttons to email signature

The popularity of social networks is slowly but surely surpasing old-school means of communication. As a result, it is becoming quite normal to have your own or your company’s email signature contain not only a name, phone number, email address and website, but also links to Facebook, Twitter, Linkedin and other social media profiles.

signature example

It is easy to just add a hyperlink to your signature, but a button with the logo of a specific social network looks more professional. To add such a button you need to follow these steps.

1. Find an icon of the social network.

You can perform a Google Images search for Facebook, Twitter, etc. icons and then download them to your computer. Alternatively, if you have a graphic designer in your company, you can ask them to create an icon that suits your needs.

You can also download (or copy the image URL of) one or more of these icons and use them in your signature:

facebook googleplus-2 linkedin twitter youtube rss skype pinterest reddit flickrblue instagram vimeo wordpress digg

2. Insert the icon in your signature.

Once you have the social media icon/button, you have to insert it in your signature in a desired spot (usually it would be located below all your contact information, but you are free to put it anywhere else).

To do this, you will need to open your email signature editor. Click the email client or email system you are using to get the instructions:

If your system includes a WYSIWYG HTML editor (like in Outlook, Google Apps for Business or Gmail), you will be able to use an Insert picture button to insert the social media icon image.

In cases where only plain HTML code is accepted (Exchange Server, Office 365, etc.), you will have to use the IMG HTML tag pointing to the web location of the image. Here is an example of what it could look like:

<img src="https://www.mail-signatures.com/articles/wp-content/themes/emailsignatures/images/gplus-35x35.gif">

3. Add a hyperlink to your social media profile

The last thing is to make your button work. To do so, you need to add a hyperlink to your social media profile page.

If you are working with a WYSIWYG HTML editor, it’s very easy. Just select your image by clicking on it, then click an Add a hyperlink button in the editor’s top menu and enter the URL (hyperlink) leading to your profile’s website. Remember that the hyperlink should be the profile’s complete URL (e.g.: http://www.facebook.com/CodeTwo or http://twitter.com/CodeTwoSoftware).

When editing raw HTML code of the signature, you have to first locate the image code (see the previous step to learn what it looks like). To add a link to it, you need to insert the <a href=…></a> tags around the code of your image. The result should be similar to the following:

<a href="http://www.facebook.com/CodeTwo"><img src="https://www.mail-signatures.com/articles/wp-content/themes/emailsignatures/images/facebook-35x35.gif"></a>

Additional steps

That’s it, you have now a working, clickable button in your signature that leads directly to your social media profile. Now repeat the procedure for all the social media you want to include in your email signature and you’re set.

Further reading

You can find more, ready to be used signatures on this website. Click the following link to browse and ownload free signature templates available in our gallery.

If you want to add social media buttons to Exchange (2013, 2010, as well as 2007 and 2003!) or Office 365 email signatures using a WYSIWYG HTML editor, check out our central email signature management software.

29 thoughts on “How to add social media buttons to email signature

  1. avatarBogdan

    Hello. Thank you for this good tutorial. I have a question: its possible to have two links for the same image: one is the source image, and the other one is the link for image(ex Facebook)?
    And also i have a problem. When somebody reply to my mail all image disappear.Do you know why?

    Reply
  2. avatarTomasz Majocha

    Hi Bogdan,

    1. It’s not possible for the social media image to open 2 links. The button will only open the link which you added via the Add hyperlink option or a href tag. E.g. this HTML element: {a href=”http://www.facebook.com/CodeTwo”}{img src=”http://www.mail-signatures.com/articles/wp-content/themes/emailsignatures/images/facebook-35×35.gif”}{/a} will only open the http://www.facebook.com/CodeTwo page (remember to replace curly brackets with “< " and ">” characters).

    Can you clarify why you would want the image to open 2 links? Maybe I can figure out a solution for you.

    2. What types of images are you using – embedded or located on a web server? Do you know what email client your recipient is replying from?

    Looking forward to your feedback,
    Tomasz

    Reply
  3. avatarGrant

    Hello, would you have the solution for putting social network buttons into an email signature for Yosemite platform MAC mail? Tks

    Reply
    1. avatarTomasz Majocha

      Hello Grant,

      You simply need to create your signature with social media buttons in HTML (as described in the article), then open it in a web browser and copy/paste it into the signature in Mac Mail. To access your signatures go to the Mail menu, then Preferences, and then click Signatures.

      Reply
      1. avatarMatthew

        This is awesome, thanks.

        I first tried setting up the signatures in my gmail account /settings/signatures, but they only showed up if I emailed from the gmail account, and I use Mail.

        When I tried to add them through the signatures panel as you suggest here, there was no clear way to attach the hyperlink to the .png like there was in gmail.

        I’m not sure what you mean by “open it in a browser window.” I have 8 individual icons each with their own link, if I try to drag them as a group to a browser window nothing happens or I get the first icon’s URL open… I tried copying them from the gmail signature panel to the Mail signature panel but no love.

        Can you clarify, please? Thanks a million.

        Reply
        1. avatarPaweł Krzemiński

          Hi Matthew,

          In case of Apple Mail, what you will have to do is create an HTML file for your signature (e.g. in an application like Dreamweaver) and then implement the file as per this video: https://www.youtube.com/watch?v=wGNYlL1uNVw.

          Remember that, since HTML does not allow for embedding images, you will have to upload the social media icons to a hosting service and link to them from your code as per Tomasz’s article.

          Hope this helps,
          Pawel

          Reply
  4. avatarAshley

    Is it possible to have the social media images on iPhone ios8? I have copied it the signature from a ‘sent’ email into my iphone singnature and it works for the first email. However any further emails created on the iphone only show empty boxes. But when going into settings, signature, they still show.

    Reply
  5. avatarCelia

    Trying to add Social Media buttons to my Gmail signature, but not getting an option to add a hyperlink? Even clicking on the picture and then clicking on the ‘link’ button is not working? Any help is much appreciated.

    Reply
  6. avatarLise

    I have Outlook 2003 email which doesn’t have an Insert Photo button or a Hyperlink button. Is there a way to add a social media icon w/link to Outlook 2003?

    Reply
    1. avatarMilena Madej

      Hello Lise,

      Apologies for the late response.

      Yes, it is possible to insert an image with a hyperlink in Outlook 2003, however, this option is a bit hidden under the Advanced Edit option within Outlook settings.

      To add a social media icon with a hyperlink, please follow these steps:

      1. Open your Outlook.
      2. Go to the Tools tab and then Options.
      3. In the resulting window, go to the Mail Format tab and click the Signatures button under the Signatures section.
      4. If you have already created a signature, please edit it by clicking the Edit button in the Create Signature window. If not, click the New button to create your signature from scratch.
      5. In the Edit Signature window, click the Advanced Edit… button so that Microsoft Word editor will launch.
      6. In the Microsoft Word editor, add the social media button you want to have in your signature. To do that, go to the Insert tab, and then the Picture option to select the image.
      7. Once the image has been inserted, click on it so that it is selected. Now, go to the Insert tab again and then choose the Hyperlink option.
      8. In the resulting window, provide the link to the website or another online source and click OK.
      9. Then, save changes and close the editor.
      11. Now, the social media icon should be clickable.

      Hope this will help,

      All the best,
      Milena

      Reply
  7. avatarganesh rayala

    Hi,

    I am trying to use multiple images and link every image with different url. (LinkedIn; YouTube; Company Logo; Twitter etc.).

    But when I am doing so the image size is varying and every image is of different size. Please suggest.
    Its is very urgent please reply asap.

    Reply
    1. avatarPaweł Krzemiński

      Hi Ganesh,

      Are you using images of the same size on input (i.e. when you upload them to a webserver or your email client)?

      If not, then try doing so. And if you are, then I will need more info about your email client and details on how your are adding the images to the signture.

      Keep in mind that you can always use our free email signature templates, which shouldn’t cause problem with size.

      Best regards,
      Pawel

      Reply
  8. avatarDanel

    Hi,

    I have a question. When i use my signature in a direct response to an e-mail, there is just de core text, all the logos and the buttons with hyperlinks have disappeared. I don’t have this problem when i use my signature in a new mail.

    Thanks

    Reply
  9. avatarAmy

    Hello,
    I am trying to set up our company’s email signature in Outlook 2010 -we our using four different social media icons. However, every time someone reply’s back to one of our emails, the four different icon images appear as attachments. After some research I learned that I should try hosting the images…so after hosting the images through ExactTarget, now when someone reply’s to an email, the images disappear and it’s just the name of the file that is visible. Any suggestions? Any help would be greatly appreciate. Thanks!

    Reply
      1. avatarJenny

        Hi Pawel, I have the same question as Amy. In my case, yes the reply where the social media icons appear as attachments is when our remote sales team is sending emails from their mobile devices. Additionally, when their emails from their desktop computers are being forwarded from mobile devices, the signature images appear as attachments. Any ideas on how to fix the issue? Thanks!

        Reply
  10. avatarJey Sharman

    Hi,
    I’m using a macbook pro office 365.
    I’m trying to add Twitter and LinkedIn icons onto our work signature emails and the Icons disappear and turns into text. I don’t seem to be able to hyperlink it to the Icon?

    Reply
  11. Pingback: 3 Direct Mail Marketing Mistakes Local Businesses Must Avoid

Leave a Reply

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