How to Add Social Icons to Your Website

139 Flares 139 Flares ×

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.

    • Tweet

    Comments

    1. Danielle McGaw
      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!

    2. Diana
      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. Marie~Window Designs Etc. says:

      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 Magazine

    4. Jenny Stamos
      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 birthday

      • Michelle Shaeffer
        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: 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 Listener

    6. Dina Munley says:

      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: 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”

    8. Rhonda Neely says:

      YOU ARE THE BEST!!!!!
      MWAH
      Rhonda Neely recently posted… 7 Little Communication Tricks That Pay Off Big

    9. Martha Giffen
      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: 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 blog

    11. Jennifer says:

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

    12. Sweepy Jean
      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. Lynn Jordan -- Authors Tools Blog
      Twitter: lynnjordan
      says:

      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 Speech

    14. Leona Martin
      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.

      • Michelle Shaeffer
        Twitter: MichelleShaeffr
        says:

        I’m testing mine out there to see if they’re easier to find — visitors weren’t noticing the “Follow Me” on the side. So I thought I’d see what happened with them in the sidebar.

    15. Interesting info!

    16. Amberly Mauszycki says:

      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 Changes

    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”

    18. Roberta Budvietas
      Twitter: Robertabud
      says:

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

    19. Camara Randolph says:

      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 Efforts

    20. Kate L Williams
      Twitter: katewilliams
      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 Media

    21. Julie Henderson
      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. Keith Davis says:

      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 wave

    23. Cristina says:

      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.

      • Michelle Shaeffer
        Twitter: MichelleShaeffr
        says:

        Hi Cristina,

        Do you mean the ones at the bottom of the post? That plugin is called Sexy Bookmarks. You can find it here: http://sexybookmarks.shareaholic.com/ or here: http://wordpress.org/extend/plugins/sexybookmarks/

        It’s one of my favorites. :)

    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: 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 Award

    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: 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: 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: 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. Mr.bhavesh says:

      Nice sharing,
      Thank you.

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

    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 Eyes

    31. Lori Vann says:

      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…

    32. helen bogun
      Twitter: HelzDesign
      says:

      It works it works it works

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

    33. Julia
      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 Days

    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: 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: 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: 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: 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: 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: 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: 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 Week

    45. James Martin says:

      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 online

    46. Nadine Fawell
      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. Pete Goumas says:

      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 Mythology

    48. Bella Sheek
      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. chesska says:

      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… Omnitrition

    50. Gina Macaluso
      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 Detox

    51. Ajay
      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: 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. Loren James says:

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

    54. Nery Castillo-McIntyre
      Twitter: AMMenEspanol
      says:

      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. Un-Becoming My Mother says:

      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: 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.

        • Un-Becoming My Mother says:

          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?

          • Un-Becoming My Mother says:

            Looks like the link text didn’t work. I’ll put in some { } around my links and hopefully that will help them from disappearing here

            • Michelle Shaeffer
              Twitter: MichelleShaeffr
              says:

              LOL I forgot the comments remove all code as a security measure. If you shoot me an email through my contact form we can connect that way and I can try to help more.

    56. Un-Becoming My Mother says:

    57. Amanda
      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 all

    58. Everyn Kildare
      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”

    59. 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 Ideas

    60. Ann Cosgrove
      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 acbcDesign

    61. Araceli
      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 Bloglovin

    62. Veronica says:

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

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

    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; [...]

    Leave a Reply to Un-Becoming My Mother Cancel reply

    *

    CommentLuv badge
    139 Flares Twitter 40 Facebook 74 LinkedIn 25 139 Flares ×