Reading time: 6 – 9 minutes
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! :)
Michelle has been online since the late 80s, creating websites since the early 90s, and has coded thousands of web pages in that time. She's worked as a virtual assistant and website designer for small business owners including marketers, authors, coaches, crafters, and other solopreneuers.
Facebook
Twitter
Youtube
StumbleUpon
LinkedIn
RSS
CinchCast
Twitter: DanielleMcGaw
says:
Great tutorial Michelle! I wish I had something like this when I first started blogging!
Last blog ..Hey Cool Kid! Look at Me!
Twitter: MichelleShaeffr
says:
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.
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
Twitter: MichelleShaeffr
says:
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!
Last blog ..New England Finery Magazine
Twitter: MichelleShaeffr
says:
You’re welcome, Marie.
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!
Last blog ..When a blog has a birthday
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.
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.
Last blog ..Self Awareness Leadership – 7 Tips on How to Be a Better Listener
Twitter: MichelleShaeffr
says:
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
Twitter: MichelleShaeffr
says:
Thanks, Dina.
Twitter: lisbethtanz
says:
I always wondered how to do that! Thank you for making it so easy to understand and follow.
Last blog ..Do You “DoFollow”
Twitter: MichelleShaeffr
says:
Now you know. :)
YOU ARE THE BEST!!!!!
MWAH
Last blog ..7 Little Communication Tricks That Pay Off Big
Twitter: MichelleShaeffr
says:
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 :)
Twitter: MichelleShaeffr
says:
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
Last blog ..Website or blog
Twitter: MichelleShaeffr
says:
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!!!
Last blog ..Blogging 10 Tips!
Twitter: MichelleShaeffr
says:
Thank you, Jennifer. Cute avatar!
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! :-)
Twitter: MichelleShaeffr
says:
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!
Twitter: lynnjordan
says:
Thanks for the step-by-step details for these great plugins.
Last blog ..Are You Concerned About How To Promote Yourself During A Speech
Twitter: MichelleShaeffr
says:
You’re welcome, Lynn. Enjoyed the post that’s in your comluv siggy – body language is so important. :)
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.
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.
Interesting info!
Twitter: MichelleShaeffr
says:
Thanks, Steve.
Excellent step by step instructions! I think those icons are super cute, I might have to try this! Thanks!
Last blog ..Highlights Of The New Facebook Page Changes
Twitter: MichelleShaeffr
says:
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!
Last blog ..Attract Success By Saying “Yes”
Twitter: MichelleShaeffr
says:
And social networking icons are so fun to change! :)
You are so practical and helpful. Thank you
Last blog ..Copywriters Make Words Resonate With their readers
Twitter: MichelleShaeffr
says:
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
Last blog ..3 Ways To Maximize In-Person Networking Efforts