So, you’ve found the perfect social media icons and you want to put them in your theme – maybe in a widget section. Here’s are step-by-step directions on how to do that. (I’m focusing on WordPress here, but the basic principles would be the same with any blogging platform) Of course, you can use this code to insert any image linking to any site – not just social media icons.
1. Download the icons you want to use
You need to have the images/icons saved onto your computer, so download them from whatever site you found them on. It’s easiest if you download them to your desktop. Usually they are in a “zip” file, so if you’ve downloaded the zip file, double-click it to open and drag the contents onto to your desktop. By doing this you have “extracted” the file and you can now use it.
2. Upload the images to use on your site
Now log in to your site and click on Media/Add New. Then click on the Select Files button and find the images you had saved on your computer. You can upload multiple images at one time- just hold down Cntl while you’re selecting them. Then click Open and they will upload.
Now, it’s easiest to have two tabs open, so you can work on the widget and o back and forth, copying image URLs for multiple icons. Right click on Appearance/Widgets and choose Open in in New Tab.
3. Put the code into your widget
This is where it gets a little hairy for those who have never done anything with code, but hang in there- it’s not as hard as it looks at first glance! Drag a text widget into the widget section where you want your icons to show up. Then put the following code in the text widget:
<a href="http://URLofsite.com"> <img src="http://yoursiteURL.com/URLofimage.png" /></a>
First, replace the URL in red with the site you’re linking to, such as http://www.facebook.com/DivaThemes orhttp://twitter.com/randaclay. Then, click back over to the Media Library tab, and click on Show next to the icon you want to use (or if you’re in the Library view, hover over the name of the file and click on Edit). Find the File URL field and highlight the whole URL. Then click on Cntl-C to copy it. Click back over to the Widgets tab and put the URL of the image you just copied where I have the blue text above- replace the dummy URL I have there. The result will look something like this:
<a href="http://www.facebook.com/DivaThemes"> <img src="http://divathemes.com.com/facebook.png" /></a>
Repeat for every icon you want to insert. You can put a space between the code for each. Save the widget and view your site to see what it looks like.
4. Add space between the icons if needed
I usually have to add a bit of space between the icons for it to look right- you may want to as well. Here’s an extra snippet of code to add:
<a href="http://URLofsite.com"> <img src="http://yoursiteURL.com/URLofimage.png" style="margin-right: 10px" /></a>
See the green code? This adds a little CSS to each image that adds some space to the right of each. You can change the amount of space by changing the 10 to whatever you like. Also, obviously you wouldn’t need to add it to the last icon.
5. Center the icons
If you’d like to center the group of icons within the space add this bit of code before everything:
<div style="text-align:center">
Then this bit of code after everything:
</div>
Beware! If you don’t put that closing div code on, you will probably goof up your whole page. Every time you open a div, you have to close it.
Your widget will look something like this when you’re done:
