How to Add Social Icons to Your Website

If you have never worked with HTML code before, do not let this deter you! If I can do it, then so can you. Hopefully, this exercise will help you avoid the errors I made, and your website will find itself proudly displaying your choice of “social buttons.” You will become intimate with “widgets” in the process. (No, we’re not talking about those nasty little insects you find crawling beneath flowerpots.)

It’s All About Social Connections

By adding social icons to your site, you will create links that allow your readers to find your social profiles and easily share your content with their followers and friends on social networks. Make it easy for your readers to connect with you!

Step 1.  Choose the Icons You Like and Download Them

First, the fun part – you get to pick which social icons you want for your site. Here are some creative options to select from:

http://smileyhelper.com/inspiration/30-most-creative-social-network-icons

http://blog.psprint.com/designing/5-free-icon-sets/

When downloading and saving them to your computer, be sure to check and provide a link back if required, just like with using free photos and providing proper attribution.

Step 2.  Upload the Icons to Your Website or Blog

After logging in to your WordPress site, go to “Media” and “Add New” in the left column. Next click the “Select Files” button under the “Upload New Media.”

You will see a window open with the social icons you just downloaded. Select the ones you want (hold the control key down and click on each one if choosing more than one), then click “Open” to upload them. A confirmation that they’ve uploaded will appear.

Step 3.  Get the URL for Each Icon Image

Now you need to get the URL for each of these images. Click the “Show” link to the right of each image. Find the URL and copy the entire field. For easy retrieval, you’ll need to copy and paste them onto wordpad or notepad. I used Apple’s “stickies.” Repeat for each image.

I used the vintage icons for my own blog, so here’s what my twitter icon URL looks like: http://angelsr4u.com/wp-content/uploads/2012/05/twitter.png.

Step 4.  Make a New Text Widget to Hold Your Social Icons

Click on “Appearance” in the left menu in WordPress and then click “Widgets.” Next, find the “Text” widget and drag it over to the right side bar where you want your social icons to show up on your site. For example, on my personal blog my “Text” widget is above my “Recent Comments” but below my “Recent Posts.” You can drag and move any of these around whenever you want to change their order.

Click on the little arrow to enlarge the “Text” box. Here is where you’ll add your HTML code from your profile links (Facebook, Twitter, Pinterest, etc.), as well as the social icon images you chose. Give your widget a title; I wrote “Connect With Me.” This will show up on your site as a heading over your social buttons.

Now add your code into the “Text” box (copy and paste this):

<a href=”LINK”><img src=”IMAGE URL” border=”0″?></a>

IMPORTANT NOTE: Sometimes when you copy and paste the code, the quotations marks will change from straight quotes into curly (fancy) quotes. There are a total of six quotation marks, so if one changes, they all will. Check and see and make the correction so the code works!

Step 5.  Copy and Paste Your LINK and IMAGE URL

Where the word LINK is, you will paste the link to your profile, like this:

<a href=”http://twitter.com/KaCeeAngels”><img src=”IMAGE URL” border=”0″?></a>

Where the words IMAGE URL are, you will paste the URL to your social icon that you just uploaded, like this:

<a href=”http://twitter.com/KaCeeAngels”><img src=”http://angelsr4u.com/wp-content/uploads/2012/05/twitter.png” border=”0″?></a>

Repeat this for each social icon you want on your site. Your code will run together; just be sure the </a> is at the end of every individual icon image code, just like the example above. It says to end the link after that image.

Now Your Site Has Some Social Charisma

Click the save button and look on your site to see your sidebar widget with your new social icon buttons.

*If for some reason they are not there, here’s a list of things I found to check:

• There are three sets of quotation marks. One set goes around the “LINK,” one around the “URL IMAGE,” and one around the “0” (zero) near the end. Be sure they are all present and uncurled.
• Don’t keep the words “LINK” or “URL IMAGE.” They are to be replaced with the appropriate links which you copied and pasted.
• Each social icon code begins with <a href=. Each ends with border=”0″?></a>.
• Go to your social networking website to copy and paste the correct code for the “LINK.”
• Your Facebook URL “LINK” will look like this: http://facebook.com/YourName. (Insert your name)
• There is a space before the word border in the code.
• There are no spaces after the end of each image icon code and the start of the next.
• The only other space in the code is at the beginning, between the <a and the href.

*Yes, I admit, I had to correct all of these. My son would happily inform you that I am a true computer noob.

Note: The easiest option is to install a plugin like Cute Profiles or Follow Me.  You can install this from the “Plugins” then “Add New” link in WordPress. However, you won’t be able to choose from the plethora of nifty icons available online.

Photo credit: Mr. Think Tank, Flickr Creative Commons