How to Add Social Icons to Your Website

There are two types of social networking links I recommend adding to your blog or website:

1) Links to your profiles so readers can connect with you.

2) Links that allow your visitors to easily share your content with their followers and friends on social networks.

Today I’ll share how you can add any set of social networking icons to link to your profiles.

The easiest option is to install a plugin like Cute Profiles or Follow Me.  You can install this from the “Plugins” then “Add New” link in WordPress.  But with either of these you’re limited to the style of icons the plugin uses.

If you’d like to get a bit more personalized, here’s what to do.

Step 1: Choose the Icons You Like and Download Them

Your first step is to pick the icons that go well with the vibe/theme of your blog.  Here are some I like: http://michelleshaeffer.com/get-followed-cute-icons/2011/02/25/ And some more really creative ones: http://smileyhelper.com/inspiration/30-most-creative-social-network-icons/

For this tutorial I’ll be using the icons here: http://webtoolkit4.me/2010/04/17/21-free-social-vintage-icons/ (I love the coffee cups but I want to include LinkedIn and YouTube, so had to go for a set with all of the networks I post on.)

Once you’ve chosen your icons, you’ll want to check the license (some require a link back to their website), and save them to your computer.  They’ll probably be in a .zip file which you’ll unzip after you download.

Note: If you aren’t using WordPress, or aren’t using a blog, you can still add your social networking icons to your site with similar steps.  Just upload to your website in whatever way your website builder works, then get the URLs, and add in the appropriate code at the appropriate spot in your blog template or your HTML website’s code.

Step 2: Upload the Icons to Your Blog

To upload your icons, login to your WordPress blog then go to “Media” and “Add New”

Next click the “Select Files” button.

This will open a small window where you can browse to the social icons you just downloaded and select them all to upload.  Choose your icons (hold the control key down and click to each one to choose more than one), then click “Open” to upload them.

Now you’ll see the confirmation that they’ve uploaded successfully.

Now you need to get the URL for each of these image.  I recommend opening note pad or wordpad to copy and paste them into so that the next part is easier.

To get your URLs, click that “Show” link to the right of each image and look for the URL field as shown below.  Copy the *entire* URL and paste it into note pad.  Repeat for each image.

Here’s what my URLs look like:

Step 3: Create a New Text Widget to Hold Your Social Networking Icons

Under “Appearance” on the left menu in WordPress, click “Widgets.”

Next find the “Text” Widget, grab it and drag it into your side bar where you want the social networking links to show.

This is where you’ll be adding your HTML code for your profile links and images.  Give your widget a title if you’d like, and then you’ll add your code, like this:

IMPORTANT NOTE!!  These quotes are straight quotes, not curly (fancy) quotes.  If you copy and paste they may try to turn themselves into fancy ones.  If you get an error when you try to add this code, that’s probably why.  You can also try this same code but remove all of the quotes and it works.  (Thank you, Diana, for alerting me to this!)

<a href=”LINK”><img src=”IMAGE URL” border=”0″></a>

LINK is where you put the link to your profile, like:

<a href=”http://twitter.com/MichelleShaeffr”>

IMAGE URL is where you put the URL for the image you just uploaded (and copied it’s URL into note pad):

<img src=”http://michelleshaeffer.com/wp-content/uploads/2011/03/twitter.png” border=”0″>

And the </a> at the end is important, it says to end the link after that image.

So your code will look something like this (below).  Click the “Save” button to save your code.

Now you’ll have a sidebar widget on your website something like this:

You might want to adjust the sizing/spacing of your icons.  To do that you can add this snippet into your image code:

<img src=”http://michelleshaeffer.com/wp-content/uploads/2011/03/twitter.png” border=”0″ width=”XXX” hspace=”XXX”>

In width=”XXX” you can tell it how wide to make the image.

In hspace=”XXX” you can tell it how many pixels of padding to put around the image.

Also, if you want to center your images, just add <center> at the very beginning of all your code, and then </center> at the very end of all your code.

For example:

And your final images will look something like this:

That’s it!  :)

Another resource: equip your wordpress theme with these cool social icons for free.

Comments

  1. Danielle McGaw
    Twitter:

    Twitter: DanielleMcGaw
    says:

    Great tutorial Michelle! I wish I had something like this when I first started blogging!
    Danielle McGaw recently posted… Hey Cool Kid! Look at Me!My Profile

  2. Diana
    Twitter:

    Twitter: coachdiana11
    says:

    Hi Michelle,

    Thanks for this tutorial. You always share great tips and I will have to take them in one by one because I am so new at this. I am fortunately comfortable with technology. Just need to follow your steps. It’s nice to know there is help out there!

    Thanks for all your guidance and help!

    All the best,
    Diana

  3. This is awesome Michelle. You make it sound so easy. I can’t wait to give it a try.
    Thanks for sharing your expertise!
    Marie~Window Designs Etc. recently posted… New England Finery MagazineMy Profile

  4. Jenny Stamos
    Twitter:

    Twitter: JennyStamos
    says:

    Thank you SO much for this, Michelle! I’ll be needing to do this very soon.
    I really like the screen shots and arrows. I learn so much better seeing how things actually look. And the little hints about making things larger or centering them seem so simple when you point to the exact place to put the code. This is great!
    Jenny Stamos recently posted… When a blog has a birthdayMy Profile

    • Michelle Shaeffer
      Twitter:

      Twitter: Michelleshaeffr
      says:

      I have so much fun with those little arrows in Jing (the program I use to create the screenshots). :)

      I find it easier when I can see something, too. Sometimes written directions just don’t have the detail to be easy to follow.

  5. Anne Preston
    Twitter:

    Twitter: annepreston
    says:

    Great tutorial! I especially appreciated the links to the icon sets. I was able to follow your tutorial and get things looking tickety-boo in no-time flat!
    You are wonderful.
    Anne Preston recently posted… Self Awareness Leadership – 7 Tips on How to Be a Better ListenerMy Profile

  6. This constantly amazes me how Bloggers for example your self can find enough time along with the dedication to keep on Creating great discussions your website is wonderful and one of my personal must read blogs and forums, I had been more than pleased with the post I simply want to thank you and congratulations
    Best wishes

  7. Lisbeth Tanz
    Twitter:

    Twitter: lisbethtanz
    says:

    I always wondered how to do that! Thank you for making it so easy to understand and follow.
    Lisbeth Tanz recently posted… Do You “DoFollow”My Profile

  8. YOU ARE THE BEST!!!!!
    MWAH
    Rhonda Neely recently posted… 7 Little Communication Tricks That Pay Off BigMy Profile

  9. Martha Giffen
    Twitter:

    Twitter: marthagiffen
    says:

    Wonderful step-by-step instructions! Anyone can follow these and feel like they are a little techie! LOL Thanks for such awesome content :)

  10. Lisa
    Twitter:

    Twitter: davincidiva
    says:

    YAY Michelle — Lately when I’m doing copywriting and marketing consulting for my clients these days I often put up a WordPress site for them too.
    I was pulling my hair out for an EASY way to do this –with icons I like — and to explain to my clients how to do it too, without a special plugin.

    Thanks!!
    Lisa
    Lisa recently posted… Website or blogMy Profile

  11. Great tutorial Michelle! You have such a fantastic blog! Rock On!!!
    Jennifer recently posted… Blogging 10 Tips!My Profile

  12. Sweepy Jean
    Twitter:

    Twitter: sweepyjean
    says:

    Excellent tutorial. There is so much to learn about social networking and integrating these features with a blog that it can be overwhelming. Many tutorials assume that we all know certain things when sometimes we need hand holding! :-)

  13. Thanks for the step-by-step details for these great plugins.
    Lynn Jordan — Authors Tools Blog recently posted… Are You Concerned About How To Promote Yourself During A SpeechMy Profile

  14. Leona Martin
    Twitter:

    Twitter: aplusvaservices
    says:

    Michelle,

    Wonderful tutorial!

    Do you recommend putting the social media icons in the sidebar? I have mine on the wibiya, About page and side bar follow me.

    Thanks.

  15. Interesting info!

  16. Excellent step by step instructions! I think those icons are super cute, I might have to try this! Thanks!
    Amberly Mauszycki recently posted… Highlights Of The New Facebook Page ChangesMy Profile

  17. Thank You! Your rock. You are gifted at easy to follow, step by step instructions.

    You’ve now given people the freedom to change the look and feel of their website any time they want with different social media icons!
    Becky recently posted… Attract Success By Saying “Yes”My Profile

  18. Roberta Budvietas
    Twitter:

    Twitter: Robertabud
    says:

    You are so practical and helpful. Thank you
    Roberta Budvietas recently posted… Copywriters Make Words Resonate With their readersMy Profile

  19. Michelle,

    Thank you for walking me step by step through adding these icons on my site. Can’t wait to see what else I learn from you.

    Warm regards,

    Camara
    Camara Randolph recently posted… 3 Ways To Maximize In-Person Networking EffortsMy Profile

  20. Kate L Williams
    Twitter:

    Twitter: socbizlocalbiz
    says:

    Wow! Michele, I love this tutorial! You have a natural talent for giving clear, actionable step by step instructions. I can’t tell you how many present and future clients and students of mine will benefit. Many thanks from one teacher to another.
    Kate L Williams recently posted… Photography Entreprenuers Grow Small Business with Social MediaMy Profile

  21. Julie Henderson
    Twitter:

    Twitter: juliehenderson
    says:

    Cool, Michele! Do you do the same for NetworkedBlogs, too? I am waiting to get ‘author’ approval before mine in live and looking forward to working with it. A plug-in to automatically put my post on facebook stopped working…apparently a third-person issue. So the networkedblogs may be the way to go. Thanks again, Michele.

  22. Hey Michelle
    You make it look very easy.
    I’ve saved this one in my favourites, sure to need it sometime.

    Only found your site today and I’m having a good time looking round.
    Keith Davis recently posted… Surfing the video waveMy Profile

  23. Michelle,
    Thanks for the tips. I found you while I was looking for the peek-a-boo icons you have on this post. How funny. Can you tell me the name of that plug in, I’ve been going crazy looking for it.

  24. Thank you so much! This was the most easy to understand tutorial I have come across for this sort of thing. Thank you a million times over!

  25. Brittany Baughman
    Twitter:

    Twitter: thebutterflymom
    says:

    Thank you so much, just followed this and was able to add a new set I downloaded to my site very easy! You rock, thank you!
    Brittany Baughman recently posted… Thankful Thursday | The Versatile Blogger AwardMy Profile

  26. Kimberly Sutherland says:

    Hi Michelle,
    I love your website! You give clean details. I don’t know why I’m having a problem. The images that I’m using are in .png format and when I upload the widget to my side bar the only thing I’m getting is the actual title of the widget that says “connect with me”. If you have any advice I would greatly appreciate it!

  27. Dr Karen Hoving
    Twitter:

    Twitter: drkahoving
    says:

    Hi
    I am confused – I LOVE the coffee cups you have on the RIGHT side of your site. WHERE do I get THOSE (bc they do have Linked IN). I am trying to find some that will include G+ but it looks like none of them will match…so I might as well go with the cups!

    Thanks
    DrKaren :-)
    http://www.thecouchtrip.blogspot.com

    Thanks also for giving us the sexy bookmark link! Although I don’t know if that will work on blogger!

    • Michelle Shaeffer
      Twitter:

      Twitter: Michelleshaeffr
      says:

      I haven’t spotted many sets yet that include G+, and I’m not sure SexyBookmarks works with Blogger, but the coffee cups I’m using are from http://www.thewpchick.com/717/social-media-icon-set/

      • Dr Karen Hoving
        Twitter:

        Twitter: drkahoving
        says:

        Thanks…for some reason I must have left this message on MULTIPLE blogs – MY BAD! And you kindly responded to all 3 (oh, the shame!).

        Yes, I keep trying to decide if I am going to add my blog to my business site, but can’t decide if that would be prudent or not…I am a therapist , and my blog is about all things Psychological. It looks as though your blog is a part of your business website, is this correct? Also, have you gotten any conversions? I keep hearing “in this economy BLOG BLOG BLOG” but I have yet to chat with a shrink that blogs and actually get’s conversions – ie booked appointments – from it. I don’t know so if you have time, throw me a quickie thought? Keep them separate or through it on my WP site!

  28. Nice sharing,
    Thank you.

  29. Yay! Thanks so much. This is perfect.
    Amanda recently posted… Shabby Apple Sale!My Profile

  30. Thank you for sharing this!! I searched other blogs for info on how to do this, since I know just enough html to make me dangerous. You really helped!!
    Yvette recently posted… Beautiful Blue EyesMy Profile

  31. Thanks so much for this step by step guide to putting the icons. I have the same ones you have, and I made one for pinterest to match the others (a little cloning & some play with fonts in my PhotoImpact program). If anyone wants the pinterest icon, let me know – just email me!

    Thanks again!
    Lori
    Lori Vann recently posted… Can’t Get Enough…My Profile

  32. helen bogun
    Twitter:

    Twitter: HelzDesign
    says:

    It works it works it works

    See me jumping up and down
    helen bogun recently posted… Social Media ChucksMy Profile

  33. Julia
    Twitter:

    Twitter: juliahembree
    says:

    Thank you so much for this helpful tutorial! I am still learning the blogging ropes and have just set up the connect with me links. Thank you for making that possible for me!
    ~Julia
    Julia recently posted… My Darkest DaysMy Profile

  34. Thanks so much for this tutorial!! I’m migrating from blogger to wordpress and while in the process I’m creating many of my own graphics – this was a HUGE help!!

    Thanks!
    Stephanie @ AllArtful

  35. Chantilly says:

    Wow! Thank you so much for this! I wouldn’t have gotten as far without you, but I STILL need a little help.

    1) The widget icons are displaying as little blue question marks on my site. Why is this?

    2) The links are not working. When I pressed them on my website, I noticed the links were infused with my webpage, even though I didn’t do it myself. For example, instead of twitter.com/tilly, it was http://www.personalwebsite/twitter.com/tilly and clearly nothing worked.

    What am I doing wrong?

    • Michelle Shaeffer
      Twitter:

      Twitter: Michelleshaeffr
      says:

      Hi Chantilly,

      If they show as a ? then usually it means the browser can’t find the image. So double check that image URL. :)

      For the links, make sure you’ve got the http:// at the beginning of them, and that will fix them trying to load at the end of your website’s domain.

  36. Chantilly says:

    Okay, so I’ve figured it out! :) But now my logos look completely blurry! When I first uploaded I learned that the image was a whopping 512×512. So I reduced it, but now it looks very odd and blurry. What can I do?

    • Michelle Shaeffer
      Twitter:

      Twitter: Michelleshaeffr
      says:

      Could be a couple of things. Without seeing the site I’m not sure (chantillychanel.com takes me to a login page). But if you reduced by changing the height and width in the html code, that could make them fuzzy. You may want to try using pixlr.com or similar to make them the exact size you want so you don’t have to adjust in the code.

  37. David Bell
    Twitter:

    Twitter: Bellissimaphoto
    says:

    This is exctly what I have been searching for in order to add my own call to action at the end of each blog post (including social widgets). I have been struggling with all sorts of widgets but with this fantastic, very clear information, I am sure I can do it myself! Thanks.

  38. Ann Kroeker
    Twitter:

    Twitter: annkroeker
    says:

    So grateful for this tutorial, Michelle! I was able to get the icons up and pointing people in the right direction. The vintage style doesn’t really match my website, but at least I learned how!

  39. Liz Johnson
    Twitter:

    Twitter: lizjohnsonbooks
    says:

    IT WORKED! It really worked! I’m so not technologically inclined, but I followed your steps, and they were so helpful! And now I have facebook and twitter buttons on my blog! Can’t thank you enough for making this easy enough that even I could do it. :) Thanks, Michelle!

  40. Ricky Strode
    Twitter:

    Twitter: rickystrode
    says:

    Awesome, thanks a bunch. I am not too savvy when it comes to coding. This saved me a bunch of possible headaches and the plugins just slow my site down so much.

    Thanks again,

    Ricky Strode

  41. Chantilly says:

    Thanks for all your help Michelle! I realized that by sizing the icons repeatedly, I was “stretching” them out. At this point, I’m trying to space my icons, so that they are close together in one single horizontal row, but I am unable too. I tried the links you provided, but nothing is working. I’m not sure what I’m doing wrong at all.

  42. Chantilly says:

    Hi Michelle, I’ve been doing research and it seems I need to put this code into my css:

    item1
    item2
    item4
    item5

    The problem is, I don’t know WHERE to put the code in my css, nor do I know what to put in the sample code! I can’t find anyone who explains as simple as you do! You make everything easy! :)

  43. Chantilly says:

    Oops! Well the code didn’t show in my previous comment, but it was a div code with “ul” and “li”

  44. Tawnee
    Twitter:

    Twitter: tawneehinton
    says:

    I downloaded your social icons (owls)today and ran through your instruction but i’m only seeing the title “Connect With Me” that was given in the sidebar. What could I have done wrong?
    Tawnee recently posted… Our Reading List – What We Have to Read This WeekMy Profile

  45. Yeah I agree that this gonna be a big help. I really appreciate your tutorial. Sharing your knowledge is giving a small piece of success you’ll have recently. Thanks!
    James Martin recently posted… Watch the Olympics live onlineMy Profile

  46. Nadine Fawell
    Twitter:

    Twitter: yogawithnadine
    says:

    You are wonderful, thank you! This is the first time I’ve ever dabbled in HTML & I MADE IT WORK! Because of your easy to follow tutorial!

  47. Excellent guide, Michelle. You make it very easy for us to understand how to add social media on our blog with the help of screen shots. What we have to do in blogger.com if we want to add social media in our blog.
    Pete Goumas recently posted… What Is MythologyMy Profile

  48. Bella Sheek
    Twitter:

    Twitter: bellasheek
    says:

    This information was amazing! I’m a newbie but the instructions that you shared here that even I could do this. I hope you don’t mind but I was so impressed that I’ve shared your link on my blog. Thanks so much!

  49. I agree there are a lot of social bookmark plugins available and free but the icons are very limited.
    When you have, personalized icons you can choose whatever you like..I have tried this and I got my images in icon finder. This is such a very detailed and understandable instructions.
    chesska recently posted… OmnitritionMy Profile

  50. Gina Macaluso
    Twitter:

    Twitter: yoginideals
    says:

    woohoo! Thank you for such a simple explanation! I did this in just a few minutes and love the way it turned out!

    gina~
    Gina Macaluso recently posted… 7 Reasons Why You Should DetoxMy Profile

  51. Ajay
    Twitter:

    Twitter: xtrmlyrsky
    says:

    Thanx a ton. I am a newbie to blogging and this turned out really helpful.
    I just want to add FB like button.

  52. Camille
    Twitter:

    Twitter: bwhatwelove
    says:

    Thank you SO much for this tutorial. So easy to follow, and I was able to use even in my wordpress.com blog.

  53. Amazing tutorial! Nothin like those stupid forums… Thank God!

  54. May I just say I love you right now? I would not have been able to add social networking icons to my blog without your thorough explanation of this really complicated process (at least for half-baked pseudo-“techies” like me). Thank you lots!

  55. Hi Michelle,

    Thank you so much for this tutorial! Most of the tutorials I’ve found that try to take me through this have me uploading the icons directly to my cpanel, which I have no problem with, but I could never find a full URL for them once they were uploaded. I managed to get my icons uploaded to my blog (still a work in progress at the moment), but no matter what icon I click on, they all take me to my twitter account which is the fist icon in the row. I’ve made sure that all the URL’s behind the icons are the correct pages (ie: facebook, etc). I removed the twitter icon from the beginning of the icon row and put facebook as the first icon, and then they all routed to facebook. Do you know why this is?? What have I done wrong? I can’t see anything wrong in the coding. HELP!

    Thanks!

    • Michelle Shaeffer
      Twitter:

      Twitter: Michelleshaeffr
      says:

      Look for the and make sure it’s there after each of the images. That tells the link when to “end” so without it they’d all link to the same web address. Also, make sure the quotes around each image and link are on both sides. If somewhere is missing it’s quote that’ll cause weirdness, too.

      • Thanks so much for your reply. I’m not sure what you mean by “Look for the and …”. Not sure if this will work or not, but I think everything is correct – can you spot anything wrong?

        I have resized the images in the edit portion of the media section where I uploaded them. Would that make a difference?

  56. Amanda
    Twitter:

    Twitter: TheCoersFamily
    says:

    Thank you – thank you – thank you!!! Gosh I just can’t thank you enough for this! Your instructions were so clear, so easy to follow, I was able to successfully install buttons on my blog while juggling my 7 month-old twins. You are amazing, ma’am. Seriously, THANK YOU! :)
    Amanda recently posted… Thankful Thursday: I can’t do it allMy Profile

  57. Everyn Kildare
    Twitter:

    Twitter: EverynKildare
    says:

    This was incredibly helpful! Thanks for the tutorial. It was exactly what I was looking for :)
    Everyn Kildare recently posted… “This Video Will Change Your Life”My Profile

  58. Hi Michelle
    Such in depth info thanks. I have been using Facebook for a while to aid my site. Hadn’t really had much time to do much with it but have noticed that the buttons I have put on my site have gone up slowly now just have to utilise them more I presume it is like people doing the back linking for you every time they click on one of your icons that you put. On your site.

    Great info lee
    Lee recently posted… Top 10 – Bucket List IdeasMy Profile

  59. Ann Cosgrove
    Twitter:

    Twitter: acbcdesign
    says:

    Thanks so much Michelle! So easy to follow and implement. This is exactly what I had been pulling my hair out trying to figure out.
    Ann Cosgrove recently posted… rainbow heart mother&#39;s day card, paper goods, handmade by acbcDesignMy Profile

  60. Araceli
    Twitter:

    Twitter: LAGirlFancies
    says:

    Hi Michelle! I just found your site and I am so glad. So much great information. I can’t wait to give this a try. I am technologically challenged but this seems pretty clear and easy.

    I have a question, is there a way to add a hover effect? Also, how do I make it so that it opens a new window when they click on an icon? I don’t want them to leave my site.

    Best,

    Araceli
    Araceli recently posted… Claiming My Blog on BloglovinMy Profile

  61. Thanks so much for this! It was so helpful, especially with the step by step images :)
    Veronica recently posted… The Things Happy People KnowMy Profile

  62. A very old post but still very relevant. Thanks for the information. Lee
    Lee recently posted… 10 Cheapest First Cars To Insure for Young DriversMy Profile

  63. Steven J Fromm
    Twitter:

    Twitter: sjfpc
    says:

    Michelle, very informative and helpful. Great roadmap as to how to do these things. Thanks.
    Steven J Fromm recently posted… The Biggest (Tax) Loser: Misguided Gifts of Real Estate By Uninformed Do It Yourselfers, Realtors & AttorneysMy Profile

Trackbacks

  1. [...] my last code related tutorial, How to Add Social Networking Icons to Your Blog, went over well I decided to share another [...]

  2. [...] how to add social media icons to your website, step by step: How to Add Social Networking Icons to Your Blog #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; [...]

Speak Your Mind

*

CommentLuv badge

Name
Email