Tutorial: How to Add Social Media Icons to Your Website

Introduction

For this tutorial, I am assuming that you have a self-hosted WordPress website/blog. I will be using the Twenty Eleven Theme which ships with WordPress. It is the default installed theme. If you have installed a different theme, your screen may look slightly different than mine, but under the hood everything should be in the same place. This tutorial will help you set up icons on your site that look like this:
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Set up all of Your Social Media Accounts

Before you can add the icons to your site, you must have your accounts set up and have the links to your profiles. Once you have this information, you’ll be good to go. –>Make a list of the sites you want icons for, gather your account info (use Evernote to store all your links) and set up any accounts that you don’t have.

Select a set of Social Media Icons

If you haven’t already, select a set of icons from one of these sites:
I’m going to use elegantthemes for this tutorial.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit


Download Your Icons & Save Them

Download your icons and save them to your desktop or other location you have chosen. You’ll be uploading them to WordPress in a few minutes. How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Double Click on the Zipped File to Open It

Once you click on your file, it will be unzipped so you can access the files inside of it. Double click on it. You should see contents like the file below. Please note, your files may differ if you downloaded a different icon package. *You must move the files out of the zipped folder in order to upload them to WordPress. To do this, drag the folder to your Desktop (or other desired location.)
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Login to Your WordPress Dashboard

Click Pages>Add New
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

WordPress Displays a New Page

You’re going to use the text field on this page to create the html you need for your buttons. You won’t be publishing it. To minimize confusion, I label the page in CAPS to differentiate it.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Adding Your Icons

1. Click once in the text field so you are ready to work. 2. Click the Upload/Insert Add Media button.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

How to Add Social Media Icons to Your Website – The Self Publishing Toolkit

The Add Media Box

In the Add media files from your computer box, click Select Files.

How to Add Social Media Icons to Your Website - The Self Publishing ToolkitNavigate to Your Icons

Browse to the folder that contains your Social Media Icons. Depending on the Icon Pack you chose, you may need to open an additional folder as shown in the screen cap below. If the icons do not display immediately, look for a folder labeled PNG like the one below. You’ll find the icons inside that folder.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Select Your Icons

Select the icons you want to use from the list. I’m going to go with Facebook, Twitter and RSS. Hold down the CTRL key to make multiple selections at once. Click open.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

WordPress will upload your files.

Now we are going to edit each file to add the appropriate links. Click show next to the Facebook Icon.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Enter the File Information

Fill in all of the fields highlighted: 1. This is the text that will display when a user hovers their mouse over your icon. 2. This is what will display if a user does not have images enabled on their browser or they cannot view images. 3. This appears in your Media Library to tell you what the file is. 4. This is the webpage the user goes to when they click on your icon. When you are done, click Insert into Post.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Repeat this Step for All of Your Icons

Once you’ve inserted an icon, you’ll have to click the Upload/Insert Add Media button so you can access your previously uploaded images.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

1.They’ll be located in the Media Library. (WordPress will default to the upload screen.) 2. Click Show to edit the icon’s properties.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Your Icons

When you are done, you should have a row of icons like this: *If you have a thin gray line around each of your icons, please see next step.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Troubleshooting Gray Box Around Icons

1. If you have a thin gray line around your icons, click the icon once. 2. Click on the picture icon. A dialog box will pop up that will allow you to edit the image’s settings.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Under Advanced Image Settings put a 0 (zero) in the Border field. Click the Update button at the bottom of the dialog box. Then click the X in the top right corner to close the dialog. The gray box around the image will be gone.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Copying Your Code

Click the HTML tab in the top right corner of the text editor.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

High-light Your Code

High-light your code, then right click to copy it.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Widgets

1. In the Sidebar, hover your mouse over Appearance until you see the fly out menu. 2. Right click Widgets, then select open in new tab.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Adding a Text Widget

From Available Widgets, drag a text widget into the Main Sidebar column. The cursor will turn into a funky plus sign with arrows on it, indicating you can drag it.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

The Text Widget

Your text widget should be at the top of the list of Widgets in your sidebar. Click the drop down arrow to display the text area for the Widget.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Paste Your Code

Click once in the text area to activate it. Then paste your code into the box. Click Save. Click Close.
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

View Your Site

Check it out! Your icons should look just like this!
How to Add Social Media Icons to Your Website - The Self Publishing Toolkit

Download PDF of Tutorial

A Few Final Notes

This tutorial was made with Twenty Eleven–the theme that ships free with WordPress. Depending on the theme you are using, you may be able to locate your icons in different areas on your site.  On the Self Publishing Toolkit site, I am using the Prose Theme by Studio Press. This theme allows me to locate the icons in the header.

Thanks for Reading!

This tutorial is a production of the Self Publishing Toolkit. If you have questions, please contact me at daphne@theselfpublishingtoolkit.com

Comments

  1. Great tutorial for people getting there social icons in! I like how you used a post to create the HTML, some people get overwhelmed with writing the code for that!

    -Chris

  2. You are so awesome!!! Thank You!!! I dig around web forever and got to your page. The best tutorial!

What do You think?