About   All Tips   Tips by Category   Tips by Ability   Help!

Social Media Icons Gadget

I've gotten lots of requests for a tip on how to create a social media gadget, similar to the one at the very top of my sidebar. Facebook, Pinterest, and Twitter are all easy avenues for you to introduce your blog to new readers. It's important to give your blog as much exposure as possible.

What I like about this gadget is that it allows for me to pack a lot of information into a small space. A cluttered sidebar takes forever to load. Bulky gadgets can cause your readers to lose interest in your sidebar before they get to the stuff that you really want them to check out.

Before you begin: 

1. This tip can be super tricky. You probably won't "get it" the first time. It requires lots of patience and persistence. Go slow. If you don't get it right the first time, walk away, then come back later and start completely from scratch.

2. Find and download a set of social media icons that include everything you're wanting for your gadget. Check out this beautiful set of icons over at Craftiments. A search for "free social media icons" will yield pretty good results, too. Look for icons with transparent backgrounds. They all need to be the same size and shape for a somewhat painless installation. My gadget was created with icons from different sets. It took quite a bit of trial and error (and hitting my head against the wall!) to make them all fit. :)

3. Make sure that the place you wish to install the gadget is wide enough to accommodate it. For example: My social icons gadget is approximately 280px wide. My sidebar is bigger than that, so I know that it will fit.

4. You'll need html codes for all of the icons. If you need html codes, you can get them from an online photo storage site, like Photobucket. Click here for help with this. For each icon, you'll want to replace the url that follows <a href="  with the url to where you want your readers to go when they click on it.

Creating the gadget: 

1. Open a new word processing document on your computer. You can use any program, such as Word, Works, or Notepad.

2. Copy and paste all of the icon codes that you wish to include in the gadget into the document, one right after the other. Put them in the order you wish for them to appear. The rightmost icon needs to be at the very bottom, the leftmost at the top. It should look like a big paragraph. Here's what the code for my social icons gadget looked like at this stage:

Installing the gadget:

1. Go to your Page Elements page and click on Add A Gadget. Select HTML/Javascript.

2. Be sure that you are in html mode. If the upper right corner of the box says Rich Text, then you are in in the right mode. If it says Edit HTML, you'll need to click on that link to be in html mode.

3. Copy the code that you created above and paste it into the gadget. Add <center> to the very beginning of the code and </center> to the very end if you want it to be centered in your sidebar. SAVE.

4. View the gadget on your blog. Then edit it and tweak it to get it to look the way you want it to. Are your icons all bunched together? Try adding a space (&nbsp;) or two between each icon. The finished code for my gadget up at the top of my sidebar looks like this:
5. Move the gadget to wherever you want it to go. Click here for help.


Can't get this tip to work for you? Start over from scratch, taking your time to read through each step. If you miss one tiny character or if you add one tiny invisible space, the gadget will probably not work. Make sure that your sidebars are big enough to accommodate the width of all of your icons.
Did you install your social media icons another way? I'd love to know how you did it! :)

Related Posts:
Side-by-Side Sidebar Buttons (ads, etc.) 
Promote Your Blog With Pinterest
Spacing in Sidebars

Have you been helped by my tips? Consider sharing them with your readers by adding Sneaky Momma Blog Design to your blog list or by grabbing a button to display in your sidebar! 
Want to share this tip with others? I would be honored for you to do so by linking back to this post. Please do not copy and paste my words and images onto your blog/website. I work hard on my tips and want everything to remain here. Thank you for your cooperation! :)


Danylle McLain said...

Thank you for this tutorial! I'm going to give it a try. I appreciate all of your tutorials so much!

A little bit of quiet said...

Hi Sneaky Momma! Bianca from A Little Delightful pointed me in your direction. I was wondering if you could help me. I have recently started a blog and know for certain that some of my friends are following me but on my Dashboard it says 0 followers. I even added in the Followers Gadget and that was the same. I have since removed it. Do you know why this would be? My blog address is www.alittlebitofquiet.blogspot.com. Thanks!!

Jill @ Sneaky Momma said...

Danylle: let me know how it turns out!
Quiet: The followers gadget and dashboard can be unreliable. There are times when mine says I have zero followers, too. My suggestion is to put the gadget back on your sidebar for a week or so and see what happens. Is it possible that your friends have followed your blog through other means (RSS, email, etc.)? They must follow through Google Friend Connect in order to show up. :)

Debra Howard said...

Just wanted to stop by and let you know how very much you have helped me over the years. I was just recommending your blog to some newbie bloggers in my class that I am taking from Kelly Rae Roberts and it occurred to me that I have never thanked you or let you know how very helpful you have been for me. You rock!!! I appreciate your posts and I apologize for not telling you that sooner.

Jill @ Sneaky Momma said...

Thank you so much, Debbie! You've made my day! :) :) :)

Amber H. said...

This fairly advanced tutorial was so easy to follow that within an hour and a half I had everything up and perfect on my blog with the first try! Which is saying something because I am extremely new to the blogging world and have never done any sort of website design in my life. You are amazing. I can't wait to see what other tips you share on here!

The Boho Willow Tree said...

Thank you so much! With your stellar instructions, I was able to add beautiful buttons to my less-than-24-hours-old blog. I've also grabbed your button to share. Thanks for everything!

anita said...

Thanks for your post! I'm checking out other things I need for making my blog better, but was lost on social icons till now.