How to Add Social Media Icons to a Blog

First of all, if you’re in WordPress, you have a few plugin options to make the process of adding social media icons to your blog very, very easy. There are numerous plugins including Social Media Widget and Floating Social Media Icon, among others. If you’re using the awesome premium Genesis Framework and theme, I highly recommend Simple Social Icons. WordPress users with Thesis can also use the Simple Social Icons plugin.

So with all of those options for WordPress users, this guide is mainly for Blogger folks.

First, you’re going to have to find some icons that are okay for you to use on your blog.

Just because you found a nice set of social icons doesn’t mean you can use them. They have to be offered up for public use for you to be able to grab them and use them on your own site. Each of the following sites has 50 social media icon sets for you to use.
• http://www.noupe.com/freebie/50-free-social-media-icon-sets.html
• http://too-much-time.com/2013/01/a-bunch-of-free-social-media-icons.html
• http://social-icons.com/50-free-social-media-icons-mixed-designs/

Make sure to click through and see the rules for usage. Some ask for a link back, some ask for nothing. Make sure you’re doing what you’re supposed to.

So once you have decided which icons you want to use, get them each on individual files on your computer. If you download them, that’ll work. You can also do the screenshot/crop method. Whatever works, just get them onto your computer. Then, upload them to Photobucket or a like service.

Once you have your images uploaded, you’re going to want to attach links to the image codes so that when a person clicks on the social media icons, they take them to the proper place.
Here’s how to get the image link from your Photobucket account after you have uploaded and clicked the “Library” menu option:
Do that for each image to get the codes for all of your social media icons.
The HTML code with proper link for each button will look like this:
Copy and paste the code from the box below for easy use. Just replace with your links where shown!

<a href="SOCIAL MEDIA SITE'S URL HERE" target="_blank"><img alt="" src="IMAGE URL HERE" /></a>

Create all of those pieces of code in a Word or Notepad document so they’re ready for copying and pasting!

Now you’ve got several sets of HTML code, each one is a piece of code that will display a social media icon that links to that site when clicked. Now what?
Well, here’s the good news: you’ve already done the hardest part! Now all you have to do is head to the layout section of your blog, and add an HTML gadget wherever you want your social icons (typically toward the top of the sidebar) to be.

All you have to do from here is copy and paste the HTML code pieces that you created earlier. Don’t press enter when pasting if you want the on the same line. If you only have a few icons, they should all fit on one line. There is a bit of trial and error here if they don’t fit the way you want them. You’ll have to re-size each icon (I use Paint) and try again. You’ll get it though, and it’ll be worth it! If you’d like to center the icons, add a center tags like this:

<center>ALL OF THE CODE</center>

A couple of notes:
• when re-sizing the icons, you won’t be able to go bigger without compromising quality
• try and choose a set of icons that compliments the look of your site while standing out just a bit
• try and estimate the total size of your icons so you only have to do this once

So there you go! Hopefully this helps make the placement of your social media icons a breeze!

Google+ | Twitter