009 STBS: How to Easily Add Social Icons to WordPress

Transcript of episode:  Click here to read

Have you ever been frustrated at trying to add social bookmarking icons to your WordPress blog?  Well, you are not alone, trust me.  I recently helped a friend of mine, Ted Nguyen build a WordPress website from scratch using a killer WooTheme.  Unfortunately, Ted is a real go getter and spent 5 hours trying to figure out how to go about adding some cool social media icons to the sidebar of his blog.

Well, because of this funny fiasco, I decided to create this video showing how to easily add social networking icons to the sidebar of your WordPress blog without having to know any code whatsoever.  All you need is a couple of icons (we used some from sixrevisions.com), and a little knowledge of how to leverage WordPress' visual editor and widgets.

Here are the step-by-step instructions:

  1. Essentially, you start off by uploading all of the icons that you want to use into your blog's media library.
  2. You insert the ones that you want to use into the visual editor used for posts and pages. *UPDATE*: Make sure that you select "Left" for alignment.
  3. Modify the height and width you want using the visual editor's resize capability.
  4. Once you've done that, you click over to the HTML tab, and all of the HTML is there for the taking.
  5. Copy all of that code and head on over to the widget area of your theme under the "Appearance" tab.
  6. Bring up a text widget drop it into the area of the sidebar that you want to use.
  7. Add some header text (or don't).
  8. Paste the code into the text widget.
  9. Then you are done!

How's that for an easy 9-step process.  I apologize for the lack of images, but the video explains it all in grueling detail.  Keep in mind that the mouse curse is a little off for some reason.

leveragerandom

If you have any questions for the podcast or blog, please don't hesitate to ask.  Let me know if this was helpful in the comments.  If you listen to the podcast in iTunes, send me some good reviews if you like it!

7 Comments

  • Lindsey@ClassicIvory

    August 20, 2010

    This was so helpful! The only problem I am having is that the icons are vertical instead of lining up next to each other. I made them small, so I don't think size is the issue. Do you know what would cause this?

    • Dean Soto

      August 20, 2010

      Hi Lindsey,

      Glad it helped. When you add the images did you select "alignment: left" in the media library prior to inserting into post? I think I may have left that out of the video. The default is "Alignment: center" so they go on top of one another.

      If the images are aligned left, you should be good.

  • Lindsey@ClassicIvory

    August 20, 2010

    that worked. thanks!

  • Eri

    September 1, 2010

    THANKS!!! you are a genius! that was so helpfull! I will try it

    • Dean Soto

      September 1, 2010

      No problem! You are very welcome. =)

  • Kolten

    October 16, 2010

    Thanks for the help, this is exactly what I was looking for.

    • Dean Soto

      October 16, 2010

      Not a problem! Anytime. Let me know if there's any other things about WordPress that you may need. =)