You may have noticed on our sidebar that we have included some large social networking icons – one for Twitter, one for Facebook and one for our RSS feed. We had seen this done on quite a few blogs but always thought it was just part of their WordPress theme. It was only when I stumbled upon some free social networking icons that I realized I could do this myself quite easily and you can too.
Here’s what you need to do…
1. The first thing you need to do is find some icons to use on your site. There are literally hundreds of sites now that give away free icon sets. There’s just one rule with this and that is to ensure that you find images that match. If you find a Twitter icon that looks good but it doesn’t match your Facebook icon or RSS feed icon then it really won’t look that good on your blog.
Here’s a few sites to get you started:
- 30 Amazingly Creative Social Bookmark Icon Sets
- Icon Archive
- 40 Great Social Networking Icon Sets
- 55 Cool and Free Social Media Network Icons
2. Once you have found the right icons for your site, save them to your computer and adjust the size if needed to ensure the icons will fit in your sidebar.
3. Now upload the photos to WordPress. Hopefully you already know how to do this… ie if you are using Wordpress 2.8 you simply need to click on Media–>Add New from the Dashboard menu.
4. Now head over to your Widgets page and drag a Text widget over to your sidebar. Now add the code below to that text widget. You will need to replace the urls in that code with the urls of the images you just saved to Wordpress and the urls of your Facebook, Twitter and RSS feed pages.
And there you have it. If you do try this out on your site let us know with a comment below and a link to your blog so we can all take a look.
Sign up to the Newsletter
I've got nothing to give you but good advice, tips, hints and valuable information on how you can become a better blogger.
A couple of suggestions …
If you want the link to open in a new window add this code before the rel=”nofollow”:
target=”_blank”
If you would like a message to appear when someone puts their mouse pointer over the image add this code before rel=”nofollow”:
title=”yourmessage”
It is probably a good idea to add an alt description to your image for SEO purposes, or in case the image does not show up. Add this code after the img border=”0?:
alt=”description”
Great post. I wish I would have had this information about a month ago, but at least it was fun figuring it out. ;)
Brad
.-= Brad Harmon´s last blog ..Blog Walking: The Shameless Self-Promoter Keller Hawthorne (2/3) =-.
Excellent suggestions Brad! I will be implementing some of these myself.
Brad, you never should decide if open new widow in user’s browser or not. User should have choice.
Thanks for sharing! Worked fabulously.
.-= Shawanda´s last blog ..The Only Thing My Mama Needed to Teach Me About Money =-.
I just checked out your blog. Looks great Shawanda!
if you are lazy, here is a perfect widget to achieve the same thing: http://wordpress.org/extend/plugins/subscription-options/
.-= Ovidiu´s last blog ..My new love: Cara =-.
Very nice – I like it. That will certainly make things a lot easier than going through my steps above.
Paula you absolutely ROCK! I did a search in google for “social media widget with big icons” and voila this post popped right up.
Exactly what I was looking for. Thanks for taking the time to put it together.
I’ll have these snazzy icons on my website later tonight!
Joe
.-= Joe ´s last blog ..To VC or Not VC…That is the Question =-.
No problem Joe – glad I could help.
Hello I have a small problem i did everything and all the buttons work great but it has made the titles of my other boxes links too any help would be great thank you
The problem would be in the code. You need to check that you haven’t missed anything or removed some of the code accidentally. I would start again from scratch.
This is what my code looks like
This was AWESOME. Thanks so much. I’ve searched and searched and this was EXACTLY what I was looking for! THANK YOU!
Hi, I’m a graphic designer, new to coding, but determined to learn how to customize WordPress. I need it spelled out what coding goes where.
I’ve tried out heaps of social media plugins and widgets but none made it easy to replace the icons with my own choice. They all assume you know what they’re talking about.
After endless searching and frustration trying to understand techy instructions, your post seemed to answer my needs, but I couldn’t figure out where to add the address the icon should point to (kinda important!) and it also needs a description in case a user has images turned off.
In the spirit of helping other noobs like me, this post explains exactly what should go where: http://internetmarketingformommies.com/adding-social-networking-buttons-to-your-blog-or-website/
Many times I’m not unique enough, or I simply have no vision easy methods to market professionally but I truly are unable to acquire any followers. I’ve truly taken a crack at following people to get a warm and friendly follow back, aids a bit but it just appears to be absolutely everyone who does that desires the same detail as myself, a person to look over their daily drivel.
Great post. I just wondering will you have a post where you will give move information on putting such social buttons, but it a frame – like is a massive social section. In the sidebar, of course. Thanks a lot. Just looking for a solution, but could find anywhere.
You probably need a plugin of some sort. I am sure there is something out there that does what you are after. If anyone has any ideas please leave a comment below.