Social Media Icons – Where to Find Them And How to Add Them to Your Blog

There are thousands upon thousands of social media icon sets available and it’s a good idea to spend some time browsing through a few before you download any.

Step 1.

Think about what type of icons you want. For example, if you have a craft blog or you’re an artist, you might want painted or hand drawn icons, like these ones.

Social Sketches

What colour is your blog theme? Do you want icons to match the colour of your theme? Maybe you prefer the classic looking icons. Or perhaps even vintage stamps

You can use Google to search for “social media icons” or you can browse through some my favourite sites.
My first port of call is usually iconfinder because it’s basically a search engine for icon sets and a lot of designers list their icons here.

Here are some of my other favourite icon sites:

inspiremonkey
mysitemyway
Smashing Magazine

Step 2.

Download them. But before you do, there are a few things you need to consider.

• Which icons do you want? (I have Twitter, Facebook, Google plus and RSS)
• How are you going to display them on your site? (horizontally or vertically?)
• What size do you want them to be?
• How much space do you want between each icon?

Let’s use iconfinder as an example. If you look at the screenshot below you’ll see that I’ve done a search for social media. This is a small selection of the results.

Now let’s browse through to find one we like. If you click on the info tab at the top right of each icon, it will display the details about the icon, such as designer, license, size and a link to all the other icons in that set.

You might need to go through a few until you find one that has a license to suit your needs. Some of them require a link back to the author’s website. To avoid this, just select the filtering box at the top right and change it to “Allowed for commercial use, no link required”
Also be mindful of the image size. It’s always easier to make something smaller but it’s very difficult to increase the size without losing some of the quality. So if you can’t find the exact size you want, it’s far better to choose something bigger, then scale it down.

When you find one you like, Click the show all icons in this set. Choose the ones you want and click the png (top left of the icon) for mac users or photoshop or click ico for use in windows. They will then download to your computer.
If you need to resize them and you don’t have a graphics program, you can easily do it using something like Resize or picnik.

Step 3.

You now need to upload your icon images to your media, so go to your WordPress Dashboard and under the media section on the left side, click add new. Select the files from your computer and upload them.

Step 4.

Decide where you want your web icons to display on your blog. In your WordPress Dashboard, under Appearance, select widgets. Select a text widget and drag it to your sidebar in the place you want it to display.

Step 5.

Now for the complex really fun part. Adding the code to tell WordPress where the web icons should be and where to send your visitors when they click on each icon.
Open a plain text editor program. If you’re using a PC, open notepad. If you’re using a mac, choose a basic editor. Do not use microsoft word.

If you want your social media icons to display horizontally like this:

then use the following code:

 
<p>
<a href="http://www.twitter.com/yourtwitternamegoeshere"><img
 src="http://www.yourblognamegoeshere.com/wp-content/uploads/2011/07/twitter-
artblog.jpg"
 height="64" width="64"
 title="Follow Me on Twitter" alt="Follow Me on Twitter" /></a>
 
<a href="https://www.facebook.com/AlisonQuineArt">
<img src="http://www.alisonquine.com/wp-content/uploads/2011/07/facebook-artblog.jpg"
 height="64" width="64"
 title="Join My Facebook Page" alt="Join My Facebook Page" /></a>
 
<a href="http://www.youtube.com/alisonquineart">
<img src="http://www.alisonquine.com/wp-content/uploads/2011/07/youtube-artblog.jpg" 
height="64" width="64" 
title="My YouTube Channel" alt="My YouTube Channel" /></a>
 
<a rel="author" href="https://profiles.google.com/YourProfileNumber">
  <img src="http://www.google.com/images/icons/ui/gprofile_button-64.png" width="64" height="64">
</a>
</p>

If you prefer to display your icons vertically like this:

then use the following code:

 
<p>
 
<a href="http://www.twitter.com/YourTwitterName"><img
 src="http://YourBlogName.com/wp-content/uploads/YourUploadedImageName.jpg"
 height="84" width="370" title="Follow Me on Twitter" alt="Follow Me on Twitter" /></a>
 
<a href="http://www.facebook.com/pages/YourFacebookPageName">
<img src="http://YourBlogName.com/wp-content/uploads/YourUploadedImageName.jpg"
 height="84" width="370" title="Like My Facebook Page" alt="Like My Facebook Page" /></a>
 
 
<a href="http://feeds.feedburner.com/YourFeedName" title="Subscribe to my feed" 
rel="alternate" type="application/rss+xml">
<img src="http://YourBlogName.com/wp-content/uploads/YourUploadedImageName.jpg"
 alt="Sunscribe via RSS" height="84" width="370" /></a>
 
<a rel="author" href="https://profiles.google.com/YourProfileNumber">
  <img src="http://YourBlogName.com/wp-content/uploads/YourUploadedImageName.jpg" 
height="84" width="370">
</a>
 
</p>

The only difference in displaying the icons vertically is that the image is wider. I created four separate images in photoshop using the icons, then I added the text next to each icon. I uploaded the 4 images to my media and then inserted them all into one text widget by using the code above.

I hope this article has helped you to choose and upload some great looking icons to your blog. If you enjoyed this article please share the love, G+ it using the plus button at the top left of the article. Thanks!

If you have any questions or you’re just plain stuck, feel free to contact me and I’ll do my best to help you out.