How to Insert Social Media Icons Into Web Pages and Email Signatures

A lot of people have been asking me how I put those colorful social media icon links into my email signature and our blogs/web pages. It's pretty easy! Here is a tutorial on how to do it.

Step One: Which social media icons do you need?

One of the ways that social media has changed the internet is that it allows people to keep track (follow) you, using the services they most prefer. It's a lot of work to manage multiple internet marketing profiles in addition to your main business website, but if you want to make it easier for your customers to stay current with your latest offerings, then you need to deliver news to them in the format they want. At minimum, that should be a website and/or blog, then a Facebook fan page (not a Facebook personal account) and Twitter.

You can see a screen shot of the internet marketing & social media links I'm using for Inspiration, Inc. at the top of this post. Click here to visit our contact page and follow us on your favorite sites.

Step Two: Download a set of social media icons.

There are plenty of free social media icon sets available online. The trick isn't just finding ones you like, but also finding a set that has all the ones you need. Most of the matched sets have Twitter and Facebook icons, but I had a hard time finding a set that also included an email and telephone graphic. 

This set of free social and web icons at Iconpedia had everything I needed and more. They have other styles of icons there, too. I chose to download the smallest size (32x32 pixels) in .png format, because they're easier to work with than .ico files. 

Note: I had to convert the .png's to .jpg files in order to upload them to our website (because our host doesn't allow .png files.) If that is the case for you too, I recommend Picnik.com to easily edit and convert graphics.

Step Three: Post social media icons on your website & blog.

I think the mandatory place to put your links is on your business contact page. Another good place might be on your testimonials page. (I also put a link to our Facebook page on our testimonials page.) However, if you really want to make it easy for people to follow, you can post your icons on the top of every page. The nice thing about icons is they are small and don't take up too much space.

Note for newbies: The basic idea here is to first insert the graphic into your Web page, then add a hyperlink to the image. That way, people can click on the graphic and it will take them to the appropriate page for your social media account. See your website or blog FAQ for instructions on how to "link an image" using your particular software.

Step Four: Insert social media icons into your email signature.

Note: I use Microsoft Outlook for my email, so that's the only one I know how to use, but it should be similar for any email program that allows you to send html-based emails and include custom signatures.

Locate the email signature option in your email program. In Outlook 2003, go to Tools> Options> Then click on the tab for "Mail Format." Signatures are at the bottom (example on left.) 

Vista is slightly different in how you navigate to the signatures section, but it looks similar to the image on the left.

Click on the "Signatures" button to open the editing window and choose "new."

In Outlook 2003, you need to open the "Advanced Edit" window in order to insert images. You'll get a warning about opening up an outside editor, but don't worry, it's just going to open a Word page.

In Vista, you can just start typing, as they include image insertion as a regular feature.

Include whatever text information you feel is necessary for your name, business name, and phone numbers. However, I think it's also a great idea to include your email address again because sometimes people forward things and it might be hard for recipients to decipher your email address from the header. Another very important tip is to type out your full Website address, including the "http://www." part. The reason is that part is usually required to turn your address into a hyperlink. Just typing "www" beforehand won't make your signature click-able. (See an example of my email signature above.)

Next, you want to insert the .jpg images for your social media icons. In Outlook 2003, use the Insert> Picture menu options. In Vista, click on the small button that represents image insertion. After your images are inserted, highlight them individually and insert the corresponding social media link to your accounts. To save in Outlook 2003, click the save button on the toolbar and close the Word document. Then click "OK" to return to the main edit signatures window.

Lastly, you want to associate your new signature with your business email account. See "select signatures for account" and choose your business email from the drop down menu. Then select your new signature as the one for new messages. That way, it will automatically be inserted into all your new email messages. You can also choose to have it insert itself into replies and forwards. I think that starts getting redundant, so I don't do that. However, you can always insert it into a reply to a new person whenever you want.

I hope that was useful to you! If you have any tips for people using different email programs, such as Gmail, please add your notes to the comment section in the blog footer.

Comments

[360 assessments]

As a business consultant, I find it imperative to have as many social media icons as possible available at the bottom of an e-mail. You want the person you are communicating with, whether it be a client or someone else, to be able to reach you on any type of medium.

[Jaya Savannah]

Agreed. Although I'll add that before going social media crazy, consider which social media sites you actually want to use. They all require time/upkeep. Creating too many accounts may give people more options to reach you, but can quickly become a chore to manage.

[Bob Mandley]

I've tried to add social icons to Outlook 2003 per your instructions. When I select this signature for use with my emails the icons show up but the links are not active.
I tripple checked the hyperlink and it is correct. I'm using Word as the editor. Have I missed something?

[Jaya Savannah]

Bob, it doesn't sound like you missed anything. If you've inserted the hyperlinks into the images via Word editor, it should be fine. Keep in mind that the links won't activate in draft mode, only after the email has been sent. (So you need to send one to yourself as a test, if you haven't already.)

[JASON]

My icons show up as "x"s. The links appear to be active. What's the deal? (Outlook 2003).

[large printing]

This is a good idea to promote exposure through social media. Attaching it makes it easy to share.