How Do I Add Facebook and Twitter Icon Links to My Gmail Signature?

Posted by on August 25, 2011

Do you want to let everyone you email know about your Twitter and Facebook accounts, and maybe some of your other social media accounts also? Using colorful social media icons that are linked to your accounts is eye-catching and appealing. (The other option is putting “Hey! Check out my Facebook account!” in the body of your email, but while that may be eye-catching, it’s more annoying than appealing.)

So how do you do it? The first thing you need to do is edit your gmail signature.

gmail mail settings

 

On the first settings tab that appears (General), scroll down until you find the “Signature” row:

to add facebook and twitter links, scroll down to gmail signature edit

 

If you already have a signature, great.  If not, add your name, phone number – whatever else you would like to show up on the bottom of every email you send. Now you want to add your facebook and twitter icons. Click the “Add Image” icon on the edit bar.

add image to gmail signature

 

You’ll get this pop-up box:

to put an image in your gmail signature, it must be hosted somewhere on the web

There are a few options for image hosting – if you have a website, you could upload your image to your image gallery, and use that URL.  If not, you could upload your image to a photo-sharing site like Picasa or Flickr and use the image’s URL from there. The simplest option – if you don’t have a custom icon designed and you’re going to be finding one elsewhere on the web – is simply to use the URL of the image on that site.  Let’s take a look at how that works:

One of the sites I found recently for icons – and has really nice stuff, organized well – is Iconfinder. Their homepage is basically their logo and a search bar to search for the kind of icon you want.

iconfinder for finding twitter and facebook icons for gmail signature

You’ll get a whole page full of facebook icons. Pick one you liked.  I liked this one, designed by Jason LaRose:

facebook icon finder from iconfinder

The top two links on the left (PNG and ICO) are the download links for the icon.  But before you press any of those, click the INFO link on the top right to get a drop down menu.  The important information there is the License (because you don’t want a license that requires giving attribution if you’re putting it in an email signature) and if the icon belongs to an Icon set.

icon info tells you license information and if the icon is part of a set

You found a good one! Right-click on the image. In the menu that results, look for “Copy Image URL” (Chrome) or “Copy Image Location” (Firefox).

Now go back to that Add an Image box you got when you clicked on the image icon in your signature.

paste image url of facebook icon into box

Ta-da! It should now be in your signature box.  But wait – we’re not done yet. You have a nice image – but it won’t take your reader who clicks on it anywhere.  Let’s add the link to your facebook icon. Click on the image to select it.

select facebook icon and click hyperlink icon to add

 

You’ll get the following pop-up box:

paste URL for your twitter or facebook icon links here

A word of caution: make sure the page is the URL of your actual Facebook page – as opposed to copying your “Home” page, because when you look at it you see your wall so you assume that URL is the URL that everyone should use.  If you use that as your link, anyone who clicks on your icon will go to their own Home page – if they’re logged in, and the Facebook main page, if they’re logged out.  Where is your real page URL?  Use the search box at the top of Facebook to search for your page or profile name, and go to that page. That’s it.

search in the facebook bar to find the right page for your gmail signature

And that’s it! You’ve done it!  Now add any other social media icon links you want – Twitter, LinkedIn – wherever you want your email recipients to connect to you.

Don’t forget to click “Save Changes” at the bottom of the Gmail email settings page when you’re done. Send yourself a test email to make sure all the links work – and now email everyone you know to show them your beautiful signature.

Well, maybe you want to hold off on that.  But if you really want to show it off – and you can find my email address in the screenshots above – you can email me.

 

August 25th, 2011 by Aviva B
Posted in Social Media
53 Comments »

53 Responses

  1. Jessie DSouza on Says:

    Debi,

    This is a fantastic post!!! I loved it. I wanted to use these icons in my email signature and I am glad to find the step-by-step instructions in your post!

    Thank you so much!

  2. debizyx on Says:

    Hi Jessie,
    Glad you liked it.
    I have to give all credit for this post (and all the others here!) to Aviva, who manages my blog and writes the posts.
    Please feel free to forward this post to anyone else you know :-)
    Best regards
    Debi

  3. Aviva B on Says:

    You’re welcome.
    I wanted to do it myself, and I figured there would be other people who would too, so after I finished doing it, I went back through the procedure and “screenshot it” and wrote it up. I’m happy to hear that you were able to benefit.

  4. Jessie DSouza on Says:

    Great Post Aviva @Debi….Usually people write You have to add this to this…you do this and you get this.. But rarely people provide step-by-step instructions to achieve the exact results. I love ehow.com. Because, they tell you, exactly how to do it!!! I am following you on Twitter. I like to have you on Business Darlings – An Online Magazine For Virtual Business Owners…Let’s catch up soon :)

  5. Aviva B on Says:

    Thanks, Jessie. I don’t see you following us on Twitter, though: we’re @debizseo. I think I just found and followed you, though. See you!

  6. bryan on Says:

    Made it through the first few steps, but I wasn’t able to add a link to the photo… I couldn’t select it like you’ve shown. I was using Chrome.

  7. David Corman on Says:

    Hi Debbie. Great walk through on how to add Social Media icons. Have you encountered any problems on return emails sent from Outlook, Mac’s email client, and others that strip the links and images? I was using a popular signature add-on called Wisestamp but soon stopped because of this problem.

  8. Aviva B on Says:

    Hi, Bryan. I was using Chrome also when I did it originally. I recall it being a little hard to select. You may not see the little boxes around it – I think that may have happened when I was doing it in Firefox to get screenshots for the blog post and removing the links and adding them back it. Try to highlight it with your mouse the same way you would highlight a word in a document, and once it goes all blue (=highlighted), you should be able to add it then. If it still doesn’t work, let me know, and we’ll see if we can think of anything else.

  9. Aviva B on Says:

    Hi, David.

    Glad you liked the post. (This is actually Aviva, not Debi – I’m responsible for the blog. :) What do you mean by “return emails”? Meaning people who email me back? Or when I’m responding to an email via my Outlook or other client?
    Either way, I’m afraid I’m not going to be too helpful here. Our company email is done via Google Apps, and I do everything from within a browser – no other client, so if there would be issues with sending emails, I wouldn’t have experienced them. And I’m not sure how I would know which client someone sending me an email is using, but I haven’t seen any particular issues yet. Sorry I can’t give more insight.

  10. David Corman on Says:

    Hi Aviva,

    By return emails I mean when people reply to my message, the links in my signature get garbled and all the pretty icons, logos and URLs get stripped so that they appear as basic text. This is not an issue with Web based email clients such as gmail, yahoo, etc. but it is very problematic with desktop based email programs such as Microsoft Outlook and Mac’s mail program. I was wondering why my signature was getting malformed when certain contacts of mine when they replied to my messages so I asked some and others I just knew what programs they were using.

    I don’t know the reason behind this issue but it is a shame. In the end, I switched back to a basic text link signature because the very signature that was supposed to look professional was turning into a messy block of image and html code.

  11. Aviva B on Says:

    Got it – that’s very frustrating. I haven’t noticed it happen yet, although I only put in the image links recently, and with gmail or any of the google apps mail, you don’t see your original text/signature when you get a response to your email. Did your recipients see the mess also, or just you?

  12. David Corman on Says:

    What do you mean that you don’t see your original text/signature? I use gmail and I do. The mess appears in the reply email so we both can see it.

  13. Aviva B on Says:

    After the new message info and text, I see my original info (to, from, etc.) but then all it says after is: – Show quoted text – Now, I’ve never really paid attention to that, but because of this conversation, I just clicked on the “show quoted text”, and indeed – in the email I checked, the response had stripped the social media icons. No html code – but maybe that’s just what his client does. Thanks for the heads up – I think I’ll be double checking some of my responses and seeing what my signature looks like in them. If I hear of any solution, I’ll let you know.

  14. jauna on Says:

    THANK U!!!!!!!! FINALLY FOUND A WEBSITE THAT I COULD UNDERSTAND

  15. Aviva B on Says:

    I’m so happy to hear that, Jauna. I’m trying to make SEO/social media accessible to everyone, so it makes me feel fulfilled when it’s working for someone. If you have any other how-to topics that you would like covered, let me know! (Either here in the comments or through our contact form.)

  16. Britt on Says:

    Hi Aviva, I can’t seem to get the image to download, once I paste the URL. Could I be doing something wrong?

    Thanks

  17. Aviva B on Says:

    Hi, Britt! Sorry you’re having difficulty. Let’s see – you pasted the image URL in the box that says “Image URL” and then pressed OK and no image appeared? If so, I would first also paste the URL into your browser in a new tab and click enter. See if it gives you the image. If so – the issue lies in gmail. If not – the issue lies in the way it was copied. Try that and get back to me so we can then think about it more. Good luck!

  18. Britt on Says:

    Thanks Debbi for your speedy response! When I just paste the url nothing comes up. I cant even press ok.

  19. Aviva B on Says:

    No problem, Britt. (This is actually Aviva, by the way – I manage the blog here at Debi’Z SEO.)

    It must be something wrong with the URL then. Could you paste it into a comment so I can take a look?

  20. Britt on Says:

    Awww sure! Thanks a lot Aviva : ) Below is the URL. If you know a better Twitter picture URL, please let me know. You guys are amazing!

    http://www.snoitulosten.com/wp-content/uploads/2010/01/twitter-small.jpg

    Here’s the blog post where I found it also..

    http://www.snoitulosten.com/adding-social-media-icons-to-your-gmail-signature/

  21. Aviva B on Says:

    My pleasure, Britt. I wrote the blog post so people would actually be able to do it – so if something’s not working, I want to do what I can so that you actually will be able to do it.
    I tried the URL and it works when I put it into my gmail. The only thing I can think of it double-check that you didn’t put a space before the URL in the “Image URL” field. I tried adding a space and then it didn’t work. So check that the URL is the absolute only thing in that field. If it still doesn’t work, you can definitely try the URL I liked:
    http://cdn4.iconfinder.com/data/icons/Classy_Social_Media_Icons/32/twitter.png
    But if it’s a gmail issue, probably a different URL won’t help.
    Good luck in any event – I hope it works out!

  22. Britt on Says:

    Thanks for all your help. It looks as though it may be an browser issue maybe, I am able to successfully go through the process using Firefox.

  23. Aviva B on Says:

    Really glad to hear, Britt. Browsers do funny things sometimes. I rarely use Internet Explorer for example, but there are some sites that just won’t work in anything else, or they’ll display funny, or you’ll be editing your website and it will keep erasing things – and suddenly you go to Explorer and it’s all okay.

  24. Brett on Says:

    AFter loading the beautiful icons, after I put in the link to where it goes, there is a box around the icon. How do I get rid of that??? Windows computer

  25. Aviva B on Says:

    Hi, Brett!
    Is the box still there after you click somewhere else in the field, or after you save it?
    If it still is, like Britt above, I would try another browser. Sometimes browsers can do strange things.
    Get back to us if it still doesn’t work and we can try to brainstorm together.
    Good luck,
    Aviva

  26. shirley on Says:

    hi! so i did it and it worked, thanks! but now my icons are surrounded by a blue box – i guess automatically added bc it is a link. how do i get rid of it? thanks

  27. Aviva B on Says:

    Hi, Shirley!  Glad you found it helpful.  Brett (see comment right above yours) reported the same issue, and I asked:
    Is the box still there after you click somewhere else in the field, or after you save it?
    If it still is, like Britt above, I would try another browser. Sometimes browsers can do strange things.
    Get back to us if it still doesn’t work and we can try to brainstorm together.
    Good luck,
    Aviva

  28. Carla on Says:

    Wow, I have been wanting/trying/struggling to add icons for MONTHS to my gmail signature.  Your instructions were SO very helpful and easy to follow.  Now, I FINALLY got it done (wiping sweat from brow).  Thank you, Thank you and again I say Thank you :-D!!!!

  29. Aviva B on Says:

    I’m so happy, Carla. Thanks for letting me know!

  30. sselb on Says:

    very helpful!!!

  31. brian on Says:

    hi Aviva, im a bit stuck :) when i paste the link url in the box it actually appears in writing beside the image on my signature page…any ideas??? :)

  32. brian on Says:

    awww its ok, i sussed it :D u answered my same problem above in another comment! :) thanks anyway though

  33. Charlotte on Says:

    Very helpful, thank you. Exactly what I needed.

  34. Joyce on Says:

    These instructions are fantastic and everything worked, but, I sent a test email to my Outlook account…the Facebook icon showed as a red “x”, however, when I clicked on that, it did take me to my Fbook page. Can you figure out what happened? thanks so much!!

  35. Aviva B on Says:

    Hi Joyce!

    If you look at the whole thread of comments, you’ll see that someone brought up that certain email clients don’t show links normally, or images normally. Outlook was mentioned as one of those (the first I knew of it; I only use Gmail directly in a browser). So – people who use Gmail in a browser will see your signature fine; people who are reading it in Outlook and possibly other clients will see it strangely. It’s up to you to decide who you want to put the focus on. If you do want the links, but don’t want the funny display, you could take off the images and use a text link. For example:
    Come friend me on Facebook
    That way the links will show up normally even in a client that doesn’t process images. It’s not as pretty, but that’s the situation.
    Good luck!
    Aviva

  36. Joyce on Says:

    Aviva, thanks so much. I thought it was something I did/didn’t do. You saved me alot of time and anguish!

  37. Aviva B on Says:

    My pleasure, Joyce. Glad I could help. A friend of mine just told me about an app called WiseStamp, which can add all these icons and more about your social media activity. I tried it and it looks good, but I haven’t tried sending it to someone with Outlook and asked them how it turned out. Maybe worth checking out – they have a free plan.

  38. Joyce on Says:

    Thanks so much…will definitely give it a try.

  39. Livy on Says:

    Hi,
    Thanks for tips, but I am encountering a problem when I tested it. Maybe it’s because I am using vation responder also, links are working but the icons are not displaying, am using chrome …can you advise?

  40. Livy on Says:

    sorry that should be: vacation responder..

  41. Aviva B on Says:

    Hi Livy! If you haven’t yet, I would recommend reading through the comments. People brought up a number of issues and we discussed them (some had solutions and some didn’t), so take a look. If you read through and still haven’t found an answer, I’d be happy to ask you more about the issue.

    Good luck!

    Aviva

  42. Dave on Says:

    Thank you! This will be great for networking!

  43. Rhonda Hale Warren on Says:

    Finally! I found a post that completely answered my question and did it easily through visual steps. I greatly appreciate this post as some of us are not super blessed in the IT department:) Thank you!

  44. Aviva B on Says:

    I’m so glad it was helpful, Rhonda! I know that when I’m looking for a how-to guide, I always appreciate when there are screenshots or some kind of video with a screenshot capture. So I try to do the same.

    If there are any other how-to guides you’re looking for in the field of internet marketing, let me know!

    All the best,
    Aviva

  45. Joe H on Says:

    I am very frustrated trying to get this to work. I paste the image url and it appears but when you click on it, you are not able to resize it…only get words that say small, medium, large, orignal size, remove. 2) when I paste url for link to Facebook or whatever, it also puts it in the line that says, text to show. erasing it doesn’t help. it still shows up in the signature block and the icon isn’t active, only the text line that prints!!! UGGGH

  46. Leanne Waite on Says:

    Thanks soooooooooooo much for this easy step by step guide that actually works!!

  47. Linda on Says:

    Exactly what I needed- very helpful. I have bookmarked your website for the future! Thanks for this post.

  48. Kristine on Says:

    This was very helpful and I was successful, but my icons have a blue border. I know it’s the hyperlink, but is there anyway to get rid of it and have just the icons themselves as the links?

  49. Amaresh on Says:

    Very complicated

  50. Marlon on Says:

    Thank you. Unfortunately, something must have changed with Gmail. When I’ve highlighted the inserted Facebook image, clicking on the link button will not open the link window.
    Thanks anyway,
    Marlon

  51. Tracey/Level Input on Says:

    Aviva B,

    Thanks so much for this post! It was really helpful. Very easy to understand. I have passed it on!!

    Thanks!
    Tracey

  52. debizyx on Says:

    Leanne, Linda, Kristine, Marlon and Tracey – many thanks for your comments.
    Note that this blog is now dormant, as Debi’Z has stopped all SEO work. For any questions you may have, contact Aviva at her new blog http://speciphilia.com/
    Amaresh and Marlon – that is for you too :-)

  53. debizyx on Says:

    Hi Joe – thanks for your comments.
    Note that this blog is now dormant, as Debi’Z has stopped all SEO work. For any questions you may have, contact Aviva at her new blog http://speciphilia.com/

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.