Go Ahead Take A Bite

Monday, April 15, 2013

Bling Out Your Blog ~ How To Create and Install Social Media Icons


**Update: It's been a while since I wrote this post, so it's possible that some (or all) of the links to free social media icon sets that I have provided below, might or might not still be available. If they are no longer viable, I apologize, but it's pretty simple to find other sites that do have them. Just do a search for "free downloadable social media icon sets" (without the quotation marks, of course) and you'll find tons of them. Now... My anti-virus softwear has a feature that lets me know right on the search results page, if a site is safe for me to visit or not, but if yours doesn't do that for you and you are wary of just clicking on any old link, you can follow the advice provided by one of my favorite go-to sites for all things interwebs, C|Net.

You can view the C|Net Video HERE

Welcome to the newest installment of my tutorial series; "Bling Out Your Blog"!

Please note: These instructions are for Blogger (blogspot) hosted blogs only. I'm not familiar with the inner workings of Wordpress, Typepad or other blog hosting sites, but I'm sure if you do a search, you can easily find someone who can help you.

Also, I'm not a web designer. I've learned most of what I know from my fellow bloggers or trial and error. I'm certainly open to questions about my tutorials, but please know that if you ask highly technical questions about code etc., I probably won't be able to answer them for you.

So... Why is it a good thing to install a social media icon bar on your blog?

Most popular social media services have a "follow" widget that you can install in your sidebar, which is OK and they work... for the most part. But, studies have shown that having all of your links to social media in one tidy little space, makes new readers more likely to follow you on those sites. (I'm working on one for this blog at the moment)

OK. Let's get to it, shall we?

First, you need to find an icon set that you like. There are hundreds of sites out there that offer free downloads of a myriad of icon sets. You can find everything from simple, basic icons to highly customized graphics. Keep in mind that you will need to unzip most of them once they're downloaded to your computer. If you don't have WinZip, there are instructions for unzipping compacted files without it HERE (Note: If you have an old, expired version of WinZip on your computer, you will need to uninstall it before trying these methods)

If you don't know where or how to find icon sets, here's a link to a Pinterest board that I found with pins of different sites that offer them. I can't vouch for the authenticity of every single site listed on this board, but I found several good sites and if you have a Pinterest account, I'm sure you already know how to check the website or source of a pin. ( Fair warning: I went through a lot of them before I found the right ones for me - There are so many, it can become a bit of a distraction. lol) You can also find a plethora of sites by doing a general web search for "free social media icons". And of course, there are also sites that offer full sets of icons for a just few bucks, if you don't mind paying for them. Many of these sites will even customize them to match your blog design and will also work up the codes that you need for a little more. It's totally up to you.

Here are a few sites that I found just by doing a Google search:

Find these HERE

Find these HERE
I also found this Etsy shop that does really cute hand drawn sets for about $5 or $6 (US) per set.
Find these HERE
Or, this one on Etsy for $6.50 (US)

Find these HERE
Once you've found the icons you wish to use and have downloaded them to your computer, you need to upload them to a host site, like Photobucket, Picasa (or whatever you use) and take care of any editing that needs to be done. ie., resizing them to fit your blog layout. (many sets are offered in several sizes already, so you might not have to edit them at all, but you still need a place to host them)

The size that I use here on SOTKT is 64px and the size that I use over on my other blog,  Go Ahead Take A Bite is 48px, but you can choose whatever size will fit best in the location you choose to put them. The two sizes that I listed above simply wouldn't fit in my sidebar, so I ended up putting it above the "Blog Posts" area in my layout. Didn't know that you could put stuff there? Neither did I, until one night, (out of pure frustration) I decided to try it. Whattayaknow? It worked!

Of course, you can always resize your side bar in the template designer. If you don't know how to do this, you can find the instructions that were included in a previous tutorial, HERE.

Next, you need to gather up the URL's (the www. address) for the social media sites that you want to represent, in a work space. I have a test blog that I keep private and use for editing and trying out different apps and layouts for my public blogs, but you can use Notepad, Word, Google Docs, etc. You just need a space where you can copy and paste things together, before placing your finished icons in your blog layout.

To keep a new (or make an existing) Blogger blog private:
  • Go to your Blogger Dashboard
  • Choose "Settings" 
  • In the Basic section, scroll down to "Permissions"
  • To the right of where it says "Blog Readers" click "edit"
  • Choose "only blog authors"
  • Then click "Save Changes"
Now, back to the icon tutorial...

Once you have all of the icons in your host site and all of the corresponding URL's gathered together, this is the way you would lay them out in your work space. (You can copy my examples and paste them into your work space. Just be sure to delete the highlighted parts, so those areas can be filled in with your own data)

<a href="your Twitter URL"><img src="direct link code to your twitter icon" /></a>

<a href="your Facebook URL"><img src="direct link code to facebook icon"/></a>

And so on... Just follow this same format for each of your social media accounts, then group the links together, end to end, without spaces.  Like this:

<a href ********** <a/><a href **********<a/>

Now, you can add the entire block as a text/html gadget to your blog layout. Et, voila! You have a personalized social media follow bar!

If you find that your icons look or fit better with a space between them, you can add a space by typing <br/> after each link. If you want them to be centered in their location, add <center> immediately before and directly after the entire block of code. (this is also how you would do these things when editing the html code in your blog posts)

For instructions on finding the URL for your Blogger (blogspot) RSS feed: Click HERE.

If you have a Facebook page for your blog, just go to the main or home page and copy and paste the URL that's located in the address bar. This is also called the permalink address.

For Bloglovin', Pinterest, LinkedIn, Twitter, etc. you just do the same.

I do not use a social media icon for email subscriptions. I've found that it's much easier to keep track of my subs by using the available (Feedburner) Blogger widget for email subscriptions in my sidebar.

There's a cute little video called "RSS in Plain English" that explains what an RSS subscription is: HERE.

I hope that I've explained this so that it's understandable. If you have problems or questions of any kind, please let me know and I'll do my best to help in any way that I can.

Your comments and suggestions would be very helpful in putting together future tutorials and if you have any specific requests, I'd be happy to oblige, as long as I know how to do it! :~)

Be Well!
(and have fun!)


Follow me on social media! Or Subscribe To Spilled On The Kitchen Table

Go Ahead Take A Bite

You can have new posts from Spilled On The Kitchen Table sent right to your inbox! Just enter your email address below:

Delivered by FeedBurner
(Don't forget to check your email for your subscription confirmation. Just click the link in the email, confirm your subscription and you're all set!) We will never send advertising or provide your email address to any other blogs or businesses.


  1. I hate Social Media. I know that we live in a time when Social Media is the rage, but I really can't stand it. I went off of Facebook for months. I am now back on, but pretty much just to play a few games that I like. I noticed today that they changed the Timeline format (again). Gah. I hate it. And every time I turn around they are giving away your personal information by changing those settings. I refuse to open a Twitter account. Ergo, I won't do any other Social Media, either. If I didn't already have my blog, I probably wouldn't do THAT. Ha!

    However, you did make me laugh. You used one of my all-time favorite words in this post: plethora. Love.That.Word.

  2. LOL, Rob.... I know what you mean. I do use most of the "major" social media sites for the blog, but I've backed off on the personal side of it. As you know, I was brutally attacked on one of those sites for making a perfectly innocent statement and I'm still trying to wrap my brain around what happened. It's made me more than a little gun shy. (oops... maybe I shouldn't use that "g" word. It is one of those extremely controversial words, after all) That being said, plethora IS a good word, isn't it? I haven't really thought about it much, but I guess you don't see it used that often. I've found that sometimes, it's the only word that fits. BTW, I'm awfully glad you do already have the blog. I wouldn't have ever met you otherwise and that would have been one less blessing in my life. XOXO


Spill your heart out!