Quick and sexy social media icons (don’t leave home without ‘em!)

You’re a web-savvy type. You’re on Twitter, Facebook, and possibly some other social networking sites. But when it comes to linking your social media profiles to your WordPress site, it’s only natural that you be a bit perplexed.

How should you link to that stuff? Where do you put the links? And where do you get social media icons that actually fit with the feel of your site?

Well, I’m about to lay it all out for you. Here’s how to solve your social media icon problem once and for all – whether you want to play it fast and easy or go the custom route.

Option 1: Fast and easy

Meet Social Media Widget. It’s a WordPress plugin that lets you add bright, happy-looking social media icons to your site in about 2 minutes. Here it is in action on my friend Jackson’s site for his PR and communications consulting biz:

Social Media Widget is great because it automatically uses the most recognizable forms of all the social media icons, which makes it super easy for people to follow/friend you when they arrive on your site.

You can put your icons anywhere in your sidebar (at the top, at the bottom, or somewhere in the middle) by dragging the widget around, and it’s a cinch to configure.

Here’s how to DIY this:

1. Log into WordPress and click “Add New” under “Plugins” in your left-hand menu, near the bottom of the page.

2. In the search box, type “Social Media Widget” (with the quotation marks) and click “Search Plugins”.

3. Click the “Install now” button, and click “OK” when it asks you if you’re sure you want to install the plugin. Click “activate plugin”.

4. Under “Appearance” in your left-hand menu, click “Widgets”. Somewhere under “Available Widgets”, you’ll see “Social Media Widget”. Drag it over to your sidebar area on the right side of the screen.

5. The widget settings will automatically open. Choose the settings you want and fill in the URLs for the addresses of your social media pages/feeds/whatever. Then click the little blue “Save” button at the bottom right.

6. Check out your site and admire your shiny new social media icons!

 

Option 2: The custom route

If you’d rather not go standard with your social media icons, you’re in luck. I’m going to to tell you where to find icons you love and how to put them in place on your site – so you can avoid the cookie-cutter look.

The site I designed for Melinda Lane is an example of how great custom social media icons can look when they really fit the aesthetic of the site:

Here’s how to DIY this:

1. Decide what style of social media icons you want. Let’s say you’re looking for something with a hand-drawn style, or perhaps you absolutely need them to be forest green.

2. Google it up! Do a search for “hand drawn social media icons” or “forest green social media icons”. You’ll likely be amazed at how many options come up! Or, check out Smashing Magazine for oodles of lovely options. Once you’ve found a set of icons you like, make sure they don’t have restricted usage (the site you get them from will tell you if they do). Then, download them. Usually, social media icons will come bundled in a zip file. That’s the file you want to save to your computer.

3. Unzip the zip file using an unzipping program and check out your fancy new icons! If you’re happy with them, the next step is to upload them to your web server. This isn’t as scary as it sounds; in fact, you can do it directly through WordPress’ friendly interface.

  • To upload your icons, click “Media” in your left-hand menu when logged into WordPress and then click “Add New” below that.
  • Click the “Select Files” button to choose your first social media icon from your computer.
  • Now, make note of the “File URL” you’re given at the bottom of the screen. It should look something like this:

http://girlsguidetowebdesign.com/wp-content/uploads/07-12-09-maquillage-turquoise-doré-oeil.jpg

  • Click “Save All Changes”, and the image is officially uploaded to your site. Repeat this uploading process for all the social media icons you plan to use.

4. Next, you need to put your social media icons in your sidebar with some HTML and CSS code.

  • Click “Widgets” under “Appearance” in your left-hand WordPress menu, and drag a “Text” widget over to your sidebar area on the right side of the page.
  • Give the widget a title of “Follow Me” or something similar.
  • Copy this chunk of code, and paste it into the big box under your widget title:
<div><div style="float:left; padding-right:10px;"><a href="http://yourlinktoyourfacebookpageorprofilehere" target="_blank"><img src="http://yourlinktoyourfacebookiconhere" border="0"></a></div><div style="float:left;  padding-right:10px;"><a href="http://yourlinktoyourtwitterpagehere" target="_blank"><img src="http://yourlinktoyourtwittericonhere" border="0"></a></div><div style="clear:both;"></div><div style="float:left;  padding-right:10px;"><a href="http://yourlinktoanothersocialmediasitehere" target="_blank"><img src="http://yourlinktoanothericonhere" border="0"></a></div></div><div style="float:left;"><a href="http://yourlinktoanothersocialmediasitehere" target="_blank"><img src="http://yourlinktoanothericonhere" border="0"></a></div></div><div style="clear:both;"></div>

* Note: this code gives you four social media icons, in two rows of two icons each.

  • Scan through the code and plug in the URLs for your social media pages and the URLs for your social media icons (which you got in step 3 above).
  • When you’re done, make sure the “automatically add paragraphs” box is unticked, and click the little blue “Save” button. (The “automatically add paragraphs” box could interfere with the code, so that’s why you’re leaving it unticked).

 

5. Check out your site to see the fruits of your labor! You should see something like this:

(A little experiment I did using these icons).

 

Hope this web training tidbit dispelled some of the confusion surrounding social media icons and how to add them to your WordPress site! 

~ Amanda

Want to learn the really juicy stuff that goes into making your own social media icons, placing whatever you want in your sidebar, and tons more? Click here to find out more about The Girl’s Guide to Web Design: the online course that’ll teach you to ditch your fear of code, unleash your inner designer and create an awe-inspiring blog or site!

{ 10 comments… add one }

  • Ashley September 8, 2011, 10:19 pm

    LOVE. THIS!! You ladies know everything!

  • Amanda September 9, 2011, 11:32 am

    Glad you found it handy, Ashley!

  • Hana Boyce September 9, 2011, 3:14 pm

    Is this for a WordPress.org blog, or is it for WordPress.com blog? The only option on a WordPress.com blog that I found were Widgets, not Plugins.

  • Kathryn October 31, 2011, 3:15 am

    Hello,
    Found a few great icons but I am having trouble understanding where to plug in the two different URLs. If you have additional information you could provide, I would appreciate it.
    Thanks!
    Kathryn

    • Amanda October 31, 2011, 12:40 pm

      Hi Kathryn – to plug in the URLs for your Twitter, Facebook, etc., look under Appearance –> Widgets. You’ll see the Social Media Widget there (it sounds like you’ve already dragged it over into your sidebar). Click the little “down” arrow next to the name of the Social Media Widget under Sidebar 1 or Sidebar 2, and then paste in your URLs in the appropriate boxes (there are a bunch available, but they’re labelled well). Then click the blue “Save” button. :)

  • Jessica December 12, 2011, 2:05 pm

    Thank you so much! I can’t believe I did this on my own (sort of).

    Here’s what i don’t get – when I click on RSS in other sites, I get an option to follow in Google. How do I get this and “follow through email” for my blog?

    Looking forward to learning lots more from you!
    jessica

    • Amanda December 12, 2011, 2:22 pm

      Welcome to team GG2WD, Jessica! I checked out your social media icons on the Ma Yoga site and they look great. :)

      To make it easier for people to subscribe to your RSS feed, I suggest that you “burn a feed” through Feedburner. Go to http://feedburner.com and follow the prompts to “burn a feed”. Then take your new feed URL (it will be something like http://feeds.feedburner.com/mayoga) and plug it into the RSS feed box in the Social Media Widget plugin. Once you’ve saved the change, people will be presented with a more user-friendly page when they click your RSS icon, which will make it easier for them to subscribe.

  • Marie-Louise Wagner-van Rhijn July 15, 2012, 7:07 am

    Thank you so much, I have been looking for social sharing widgets for quite a while now and have tried a few different ones. And I was not happy with any of them… till I installed Social Media Widget yesterday, and it is super! Thanks for commanding! Warm regards,
    Marie-Louise

  • Anna August 15, 2012, 1:11 am

    Can’t wait to put this to use!

Leave a Comment