There are two types of social networking links I recommend adding to your blog or website:
- Links to your social networking profiles so readers can connect with you.
- Links that allow your visitors to easily share your content with their followers and friends on social networks.
In this article I’ll share how you can add any set of social networking icons to link to your profiles to your WordPress website.
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 basic style of
icons the plugin uses.
If you’d like to get a bit more personalized and use a set of social networking icons of your choice, 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/
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.
<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:
