You are here: Home / Blogging / How to Add Social Icons to Your Website

How to Add Social Icons to Your Website

By on | 98 Comments

140 Flares 140 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.

    Comments

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

      Reply

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

      Reply

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

        Reply

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

      Reply

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

      Reply

    12. 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! :-)

      Reply

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

      Reply

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

        Reply

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

      Reply

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

      Reply

    24. says

      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!

      Reply

    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!

      Reply

    27. 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!

      Reply

        • 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!

          Reply

    31. 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…My Profile

      Reply

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

      Reply

    34. says

      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

      Reply

    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?

      Reply

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

        Reply

    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?

      Reply

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

        Reply

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

      Reply

    38. 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!

      Reply

    39. 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!

      Reply

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

      Reply

    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.

      Reply

    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! :)

      Reply

    43. Chantilly says

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

      Reply

    47. 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 MythologyMy Profile

      Reply

    48. 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!

      Reply

    49. 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… OmnitritionMy Profile

      Reply

    54. 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!

      Reply

    55. 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!

      Reply

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

        Reply

        • 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?

          Reply

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

      Reply

    59. Lee says

      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

      Reply

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

      Reply

    Trackbacks

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    CommentLuv badge