I recently wrote a post about how I have joined a blogging workshop. Every week the participants have a writing assignment. This week’s assignment didn’t really apply to the kind of blog I have, so I made up my own. This situation kind of reminds me of high school, except this time I’m actually doing work and not just blowing it off. Mom and dad you can stop laughing now.

I love reading other blogs and admiring all the amazing design features that are out there. I especially love to see how people use and organize their social media icons. I think adding custom social media icons really adds to the overall feel of the blog, but I know that some bloggers don’t know how to find the icons or don’t know what html code they need to apply the feature to their blogs.

I am going to provide you all with detailed instructions on how to add pretty social media icons to your blog in a few easy steps. This is so easy that anyone (including myself) can do it. Here we go!

1. Find images of the icons you want to use.

I love iconfinder.com. This is an icon data base where designers share their artwork. You can search for icons based on sizes, you can change the background color for better visibility, and you can use the drop down menu to search for commercial friendly icons. You will want to use a commercial friendly icon if you make money from your site. This will save you a big headache in the future.

You can also do a google search for images. Try searching a term like “social media icons”. There will be a ton of images that pop up. There are always new and interesting social media icons, as designers are constantly updating their profiles.

Recommendation: Try to pick a social media icon that will enhance the design of your site. You want it to match a theme or a look that you have. You may even want to try a few out in order to find the right one.

Recommendation: If you are going to need icons for multiple social media websites, select group of icons with the same design. I personally think a blog looks more streamlined and professional when all the icons look the same.

2. Adding the social media icons to your blog.

  • Download the social media icon of your choice onto your computer.
  • Upload the icon onto wherever the pictures are for your blog. I use WordPress and this is how I do it: I go to my dashboard. On the left hand side menu under “Media” is “Add New”. Click on it. Then upload the image from your computer. Once the image is uploaded, you will see a lot of information about the image. Grab the URL for the image. Write it down. You will need it later.
  • Ready to write some html? I’m going to write the code for Twitter just as an example, but you can do this for any other social media site as well. Hang with me here. It’s not that bad.

The URL for your image should look something like this:

http://www.yoururl.com/yourimage.png

The URL for your Twitter account should look something like this:

http://www.twitter.com/yourtwittername

Use those two URLs in the following code:

<a href=”http://twitter.com/YourTwitterName” title=”Follow Me”><img src=”http://yourimageURL” alt=”Follow Me”></a>

Now, if you have WordPress, here is how you add that code to your blog. The directions for this are very similar for Blogger, except they have an html gadget.

  • Go to your dashboard.
  • On the left hand side menu under “Appearance” click on “Widgets”.
  • Find the Text/Arbitrary html widget and drag it to your sidebar. Open it up and add the html code you just wrote into the box. Click “Save”.
  • Go to your blog home page and marvel in your genius. (or rip out your hair because something doesn’t look right)

Because you did such a great job and followed this post all the way to the bottom, I am going to reward you with the html code for a Facebook icon as well.

<a href=”http://www.facebook.com/yourfacebookinfo” title=”Like me”><img src=”http://www.yoururl.com/yourimage.png”></a>

Good luck and happy blogging!

Kludgy Mom