[Update]: This blog post was updated on October 18, 2019.
The popularity of social networks is slowly but surely surpassing 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.
It is easy to just add a hyperlink to your email signature, but a button with the logo of a specific social network looks more professional. To add such a button, you need to follow the steps below.
Note: To learn how to create an event-triggering (e.g. a Twitter favorite) hyperlink for your email signature, scroll here.
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 visual identity policy.
You can also download (or copy the image URL of) one or more of these icons and use them in your signature:
2. Insert the icon into your email signature
Once you have the social media icon, you have to insert it into your email signature in a selected place (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:
- Exchange Server 2019
- Exchange Server 2016
- Exchange Server 2013
- Exchange Server 2010
- Microsoft 365 (Office 365)
- Outlook on the web
- Outlook 2016 / 2013 / 2010
- Google Workspace (G Suite)
- Gmail
If your email system includes a WYSIWYG HTML editor (like in Outlook, Google Workspace or Gmail), you will be able to use the Insert picture button to add a social media icon image to your email signature template.
In case only plain HTML code is accepted (Exchange Server, Microsoft 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/wp-content/themes/emailsignatures/images/facebook-35x35.gif">
3. Link to your social media profiles
The last thing is to make your button clickable. To do so, you need to link social buttons to your company social media profiles.
If you are working with a WYSIWYG HTML editor, it’s very easy. Just select your image by clicking on it, then click the Add a hyperlink button in the editor’s top menu and enter the URL (hyperlink) pointing to your profile’s page. Remember that the hyperlink should be the profile’s complete URL (e.g.: https://www.facebook.com/CodeTwo or https://twitter.com/CodeTwoSoftware).
When editing raw HTML code of your email 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="https://www.facebook.com/CodeTwo"><img src="https://www.mail-signatures.com/wp-content/themes/emailsignatures/images/facebook-35x35.gif"></a>
Adding an event-triggering button
Note: Changes in social network API may affect the results of the solutions I talk about below.
Most social networks do not let you equip your email signatures with buttons that, upon clicking, would automatically follow Facebook pages, like posts, subscribe to YouTube channels, etc.
One exception is the Twitter favorite action, which can be triggered using the following URL pattern:
https://twitter.com/intent/favorite?tweet_id=#ID of a tweet#
To get the ID of your tweet, go to Twitter, find the tweet and click its date:
The tweet ID is the number at the end of the resulting URL, which you should now see in the address bar of your browser:
So, in this example, the resulting URL is:
https://twitter.com/intent/favorite?tweet_id=1181913590309113856
However, it is also possible to create URLs that open bare-bone landing pages dedicated specifically to sharing and liking posts or following accounts.
Open the example link below to see what they may look like (the link does not trigger an automatic action):
https://www.facebook.com/plugins/like.php?href=https://facebook.com/codetwo
These URLs include:
- Facebook like intent page:
https://www.facebook.com/plugins/like.php?href=#website or facebook page address#
- Facebook share intent page:
https://www.facebook.com/sharer/sharer.php?u=#website or facebook page address#
- Twitter follow profile intent page:
https://twitter.com/intent/user?screen_name=#your Twitter profile name#
- Linkedin share article intent page:
https://www.linkedin.com/shareArticle?mini=true&url=#article URL#&title=#title#&summary=#summary#&source=#source#
- YouTube subscribe to channel intent page:
https://www.youtube.com/channel/#channel name or ID#?sub_confirmation=1
To create buttons using these links apply identical steps as when adding a social media icon.
Additional steps
That’s it, you have now a working, clickable button in your email signature block that links directly to your social media profile. 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-use email signature templates on this website or you can create a customized email signature using this free email signature generator.
If you want to add social media buttons to Exchange 2019 or 2016 or Microsoft 365 (Office 365) email signatures using a WYSIWYG HTML editor, check out our email signature management software.
I use Mail in Windows 10, how do I add in my signature for people to go to my Twitter ac 1_traveller by clicking on it, I am not tech savvy but I would still like to do it.
Hi Chris,
The easiest way to create a signature with such a link would be to use our free email signature generator. This way, you would get a well-formatted email signature with the proper social media icon linking to your profile.
If you want to learn more about setting up signatures in Windows 10 Mail App, click the link below:
How to set up email signatures in Windows 10 Mail App
Great share! This post is very useful.
Keep it up i love your work keep sharing these type of info,
Does any of this work with Apple Mail? I am not having any success
Apple Mail does support HTML signatures, so there shouldn’t be any issues. Could you specify at which step you experience a problem?
I complete all of the necessary steps, but when I go to “paste” it into the signature box, it messes up the format and the pictures. I’ve tried all ways of copy+paste & no luck. Ends up deleting one of the icons, my headshot, and another picture I added?
Are you using our signature generator? As long as you’re not using Safari browser, there should be no problem with the formatting. If you let me know which browser, template and email client you are using, I’ll see what can I do to help.
nothing work to acitvate an Instagram button
Hello Dan,
Do you mean adding a hyperlink to the Instagram button? No matter which email client you are using, it should be as simple as highlighting the button and choosing the Add hyperlink option. The key is not to click the image but to highlight it like you would do with a chunk of text.
Very good article! Thanks
nice post, really very helpful for all the readers
thanks for sharing
Just saying thanks,
as I was able to place the social media buttons in my email, using your help.
Best regards, Robert.
I tried adding the linkedin and twitter buttons to my gmail email signature using the stated steps but the it appears in an absurd manner when I send mails. the entire linkedin view my profile button and twitter icon with their urls are shown alongside the signature.
Hi Tilda,
Please make sure that you add the links to your profiles properly. After adding an icon, you need to select the image. Simply clicking it will not do, you have to either click and drag until it is highlighted, or place your cursor after the icon, and press the left arrow key while holding the Shift key. When the icon is highlighted, click the link icon and paste your profile address. Please share if it solves your problem.
This doesn’t work or explain how to add in social media buttons into an email signature. Social media buttons are html codes, not hyperlinks. This article only explains how to add a hyperlink onto the picture, that isn’t the same thing as adding the social media follow buttons, because html codes don’t work when being pasted in as hyperlinks.
Hi Michael, You’re right! I will research adding *real* social media buttons and update the article as soon as I can.
awesome!
Pingback: 3 Direct Mail Marketing Mistakes Local Businesses Must Avoid
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?
Hi Jey,
Try this – save the icons on a local drive and then drag/drop them into Outlook’s email signature editor.
Or, if you are open to using 3rd party solutions, check out CodeTwo Email Signatures for Office 365.
Hi, can we add hyper link to Mozilla thunderbird client. If Possible
Pls provide the steps plz.
Thanks in advance
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!
Hi Amy, Is there a chance that the problem is present in specific scenarios only (e.g. when the reply is sent from mobile)?
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!
Hi Jenny, This issue is most likely caused by the fact that the mobile devices convert emails to plain text format upon reply/forward. It has been reported that it can be fixed by adding rich text formatting (e.g. bold or italicized text) to the mobile device signature: http://apple.stackexchange.com/questions/53537/forcing-rich-text-by-default-for-ipad-iphone
How would servers react to these images? Would emails be blocked?
Hi Sean,
It depends whether you use linked or embedded images. More in this article.
Best regards,
Pawel
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
Hi Danel,
Does the problem occur in specific circumstances (e.g. on specific email clients) or always?
Best regards,
Pawel
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.
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 signature.
Keep in mind that you can always use our free email signature templates, which shouldn’t cause problem with size.
Best regards,
Pawel
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?
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
Beautiful 🙂
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.
all ok – figured it out 😉
Having this same issue, what’s the secret?
Hi Judy,
The secret is not to click on the social media image, but to highlight it (for example, with clicking & dragging over the image) and then click the add hyperlink button.
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.
Hi Ashley,
Make sure you’re social media images are linked and that you’ve saved the original email containing the signature in Drafts. More in steps 1 and 7 of this article: https://www.mail-signatures.com/articles/setting-html-email-signature-images-iphone/?sts=4237
Hope this helps,
Pawel
Thanks for sharing…
Hello, would you have the solution for putting social network buttons into an email signature for Yosemite platform MAC mail? Tks
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.
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.
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
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=”https://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
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?