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: https://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=”https://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=”https://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.
Great tutorial Michelle! I wish I had something like this when I first started blogging!
Thanks Danielle. WordPress makes most things really easy and we don’t need HTML but for a few things like this, it’s a little tougher.
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
You did a great job following the steps, Diana. Thanks for letting me know about the quotes issue. :)
This is awesome Michelle. You make it sound so easy. I can’t wait to give it a try.
Thanks for sharing your expertise!
You’re welcome, Marie.
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!
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.
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.
Awesome! I had to peek at your blog — I *love* the icons you picked. They match so perfectly with your blog theme.
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
Thanks, Dina.
I always wondered how to do that! Thank you for making it so easy to understand and follow.
Now you know. :)
YOU ARE THE BEST!!!!!
MWAH
Aw, thanks.
Wonderful step-by-step instructions! Anyone can follow these and feel like they are a little techie! LOL Thanks for such awesome content :)
You’re welcome, Martha, thanks for stopping by!
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
Yes, this is one of the few things WordPress doesn’t make super easy to do without code. Glad this was helpful for you. :)
Great tutorial Michelle! You have such a fantastic blog! Rock On!!!
Thank you, Jennifer. Cute avatar!
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! :-)
I’ve found that too, and I try to remember that when I’m writing — don’t skip the basics because we’ve got to start with square 1!
Thanks for the step-by-step details for these great plugins.
You’re welcome, Lynn. Enjoyed the post that’s in your comluv siggy – body language is so important. :)
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.
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.
Interesting info!
Thanks, Steve.
Excellent step by step instructions! I think those icons are super cute, I might have to try this! Thanks!
There are so many cute choices! :)
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!
And social networking icons are so fun to change! :)
You are so practical and helpful. Thank you
You’re welcome. :)
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
You’re welcome. And I’ll keep sharing! :)
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.
I appreciate that Kate, thank you.
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.
I really like NetworkedBlogs. I’ll write up a step by step for that one.
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.
Thanks for stopping by, Keith. Glad you found your way here.
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.
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. :)
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!
Thanks, Terri, I’m glad it was easy to follow. :)
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!
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!
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!
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/
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!
Nice sharing,
Thank you.
Yay! Thanks so much. This is perfect.
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!!
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
It works it works it works
See me jumping up and down
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
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
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?
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.
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?
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.
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.
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!
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!
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
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.
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! :)
Oops! Well the code didn’t show in my previous comment, but it was a div code with “ul” and “li”
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?
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!
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!
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.
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!
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.
woohoo! Thank you for such a simple explanation! I did this in just a few minutes and love the way it turned out!
gina~
Awesome! Glad this was helpful for you, Gina.
Thanx a ton. I am a newbie to blogging and this turned out really helpful.
I just want to add FB like button.
Thank you SO much for this tutorial. So easy to follow, and I was able to use even in my wordpress.com blog.
Amazing tutorial! Nothin like those stupid forums… Thank God!
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!
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!
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?
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
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.
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! :)
This was incredibly helpful! Thanks for the tutorial. It was exactly what I was looking for :)
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
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.
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
Thanks so much for this! It was so helpful, especially with the step by step images :)
A very old post but still very relevant. Thanks for the information. Lee
Michelle, very informative and helpful. Great roadmap as to how to do these things. Thanks.