‘Simple Social Icons’ Plugin Tutorial

With the recent update of the Simple Social Icons plugin, I thought it was the perfect time to blog about this little piece of gold. (A few new icons were recently added to the plugin- which makes me very happy =) This is one of my favorite plugins for  many reasons, but mainly for its versatility and customization options. Did I mention that it’s easy to set up too?

Simple Social Icons

Simple Social Icons allows you to add up to 14 of the most popular social media icons to any widgetized area on your wordpress blog or website.  These icons include: Dribbble, Email, Facebook, Flickr, GitHub, Google+, Instagram, Linkedin, Pinterest, RSS, StumbleUpon, Twitter, Vimeo and YouTube. You can customize the size, shape, color, and hover color of the icons as well as the alignment (left, right, centered). Brilliant, right?

setup

1) You can download and install the plugin directly

-or-

From your WordPress dashboard go to Plugins-> Add New. Search for ‘Simple Social Icons’ and install the plugin.

Simple Social Icons

 

2) From your widgets page, drag the Simple Social Icons widget to a sidebar or  widgetized area.

Simple Social Icons | Plugin Tutorial

 

3) Choose, your icon size, border radius, and colors- then add all of your social media links. Click save and view your shiny new icons!

simple-social

What are some of your favorite wordpress plugins?

  • http://twitter.com/thepixelista Jessica Barnard

    Great tutorial! I *love* the Simple Social Icons plugin, and I’m so glad it has Instagram now. I had a ton of clients who wanted it, so as a temporary fix I was just using the Dribbble field and overriding the Dribbble image icon with an Instagram one. SO glad I don’t have to do that anymore. :)

    • http://vivalaviolette.com/ Heather Jones

      Yes, I know exactly what you mean! I was always substituting one of the other icons with instagram for projects. Now if only they’d make a ‘center’ alignment option ;)

  • Pingback: Biz Tip: Social Media Prettiness

  • Carol Soderlund

    I have installed Simple Social Media Icons and I like it very much–except–the email icon won’t work for me. Any hints?

    • http://twitter.com/thePuckBurger thePuckBurger.com

      Same here, tried all sorts but email icon just links back to the site’s homepage, any suggestions anybody? Please?…

      • http://www.vivalaviolette.com/ Heather Jones

        yes! the link needs to be mailto@emailaddress.com

        Hope this helps!

        • http://twitter.com/thePuckBurger thePuckBurger.com

          Thanks, Heather, much appreciated

        • http://twitter.com/thePuckBurger thePuckBurger.com

          Ooops, still not working, I have put the link in as adam at thepuckburger dot com (valid email address) & the new tab opens but then back to homepage.

          Any ideas?

  • jessyeaibel

    Hi there. I installed the Simple Social Media Icons plugin, and followed all of the instructions – but it seems like the icon font isn’t showing up in my browser. Instead of social icons, I get little squares as if the font is missing. Is this a setting or something that my current theme is overriding? Any help would be greatly appreciated!! (Screenshot attached).

    • Helen Schofield

      Hello. I have the same problem as Jessye above. Any idea what the problem is?
      Thank you!

  • Helen Schofield

    Hi again,
    The icon (the font part – so I see just a black square with no symbol) doesn’t show up in my browser if I use Internet explorer, but it seems to work with Google Chrome. I also have the same problem as thepuckburger below i.e. when I click on the email icon, it just links back to the homepage. Am I doing something obvious wrong?
    Thank you for your help!

    • Helen Schofield

      OK, so both problems seem to have been fixed now. I hadn’t entered my email address in the correct way (mailto:my email address) and as for the other problem in IE, it just took ages to load the image in that browser for some reason – but now I can see it :-)

  • Tawsha Connell

    Thank you so much for this tutorial. For the life of me, I couldn’t figure out how to get the icons round. You’ve helped immensely!

  • Almazia Pratita

    Hi, thank you for the tutorial.. how do you make each icon in different color?

  • http://www.luckyseventen.com LuckySevenTen

    Thank you so much for this post Heather! The instructions were very easy to follow and I would have never known how to get the different icon style without it. I used the round buttons (Icon border radius 30px, Icon Size 32PX) you can see them here: http://luckyseventen.com/

    Xo,
    Lucky Seven Ten