How To Add Cute Social Media Icons To Your Blog

Welcome to the weekly blogging tip! This week I’m talking about adding social media icons to your sidebar.

I’ve written before about the importance of having RSS and social media buttons in a prominent place on your blog. Today I’m going to tell you exactly…

Step 1: Find Icons You Love

Have some fun and start looking around for social media icons that fit your personality and blog’s branding. Here are a few sites to get you started:

• 25 Amazing Social Media Icons Sets
• The Best Social Media Icons All in One Place
• 44 Must Have Social Media Icon Packs

You can also simply Google “social media icons.”  Once you’ve found a set that you are happy with, download the images to your desktop.

Step 2: Choose the Right Size

Now choose the specific social media icons you want to use on your blog. Most of the icon sets you download will include several graphics you won’t use and often several different size options. For example, the set you download may include icons for RSS, Twitter, Facebook, YouTube, Flickr, and StumbleUpon, each in 3 different sizes. But perhaps you only want to use the RSS, Twitter and Facebook icons in the smallest size, like 60×60 pixels. In order to host these images on your blog, you’ll need to upload the social media icons you want to your blog or to a free image hosting site like Photobucket or Flickr.

Step 3: Grab the HTML

For each graphic, upload accordingly and find the social media icon html code. Use the direct link option. The html should look something like this:

http://i141.photobucket.com/albums/r74/username/icon.jpg

Step 4: Add the Social Media Icon HTML to a Widget

Now you need to put the HTML code in a widget so your icons show up and link to your social media accounts from your blog’s sidebar. Below is the HTML format to use — be sure to substitute your own URLs for your social media accounts (your Twitter page, your Facebook page, your RSS feed URL, etc) and your link code from the image hosting site (from Step 3):

<a href=”http://www.linkgoeshere.com” target=”_blank”><img src=”http://www.imageurlhere.com”></a>

Create code like this for each of your icons. The a href part of the HTML code is the URL you want your readers to go to when they click. The img src part of the HTML is the link code to your image (from either your blog or Photobucket, Flickr, etc).

As an example, here is what the HTML code looks like for our Twitter button here in The SITS Girls sidebar:

<a href=”https://twitter.com/#!/SITSGIRLS”><img src=”http://www.thesitsgirls.com/wp-content/uploads/2011/12/twitterbutton.png” alt=”” /></a>

Step 5: Stand Back and Admire Your Work

When you get all the codes typed in, save the widget and see how it looks on your blog.

• About the Author
• Latest Posts

About Francesca

One of two behind The SITS Girls and Bloggy Boot Camp. Believer that this community is a movement, and not just a website. Currently on a quest for unending free WiFi & stronger caffeine. I'd love to get to know you better: Find me on Twitter @FranBanducci and on Google+.

• Why Top Ten Lists Work For Bloggers - Jan 23, 2017
• Content is King: How to Determine What To Blog About - Dec 28, 2016
• 4 Ways to Find {And Keep} Your Motivation - Oct 31, 2016
• How To Be Happy: 5 Things All Happy Women Do - May 2, 2016
• Can an iPhone 6S Survive Inside a Paint Shaker? - Oct 25, 2015
• How Many Ads Are Too Many Ads? - Oct 15, 2015
• How To Get Healthy Sleep Webinar - Sep 14, 2015
• How To Have A Safe Summer - Jul 30, 2015
• How to Sleep Better: Top 7 Sleep Hacks For The Best Rest - Feb 5, 2015
• Neglecting this CAUSES Anxiety, Weight Gain, Numbness, Back Pain and Depression - Jan 29, 2015
• Making a Homemade Box From Christmas Cards {Upcycle} - Dec 11, 2014
• Get Your Kids Involved In Healthy Living: Fuel Up To Play 60 - Oct 10, 2014
• Hungry? #TheGoudaLife Twitter Party Awaits! - Sep 11, 2014
• #SprayShaper Twitter Party from Waterpik® - Jul 7, 2014
• An Open Letter to Our Community - Jun 19, 2014