Today’s tutorial will show you how to add social networking buttons to the sidebar of your blog. It doesn’t matter which buttons you want to use, the process is the same for all. If you’re looking for how to add share buttons you can find that at Add share buttons to blogger. Now on with adding some social networking buttons!
Step 1. Get Your Buttons
The place to grab these images is My Social Buttons. [edit: this site seems to be down. Here is another great selection of buttons]They have many networks to choose from, and many buttons for each network. I wanted an RSS, Twitter, Facebook and Stumbleupon button on my site, and I wanted one of those really cute ones ~ ya know? I decided on the heart shaped buttons and they had one for each of those and a couple other sites I’ve been debating about using.
2. Save The Buttons to Your Computer
Find the buttons you like and save them to your computer. (click save image as (in Firefox), then choose where you want to put it)
3. Host Your Chosen Buttons
Now you’ll have to host them somewhere ~ if you have your own hosting just go ahead and host them in your hosting. I created a new directory (folder) in the public html area of my site and then uploaded the images in there using FTP. If you don’t have your own hosting you can host them somewhere like photobucket or flickr.
4. Get the Button url
Grab the url for your images. You will need the url where your images are being hosted, whether it’s on your own hosting or someone elses.
5. Add the Appropriate Widget to Your Sidebar
If you have a self hosted wordpress blog go to the design/widget area and add a “text” widget to the sidebar you want your buttons to show up in. If you have a blogger blog go into the edit layout area, and “add a gadget”. Add an “html/javascript” gadget.
6. Add the Button Code to the Widget
Here’s the code you’ll need to use for your buttons.
<a href=”the url you want people to go to” target=”_blank”><img src=”the url where the image is hosted” border=”0″ alt=”text that tells people what the button is about”></a>
The first information that goes in after the “a href=” with be the address you want people to go to ~ so if it is a twitter button you will add your twitter page address there. If it’s an RSS button you will add the link to your RSS feed there.
The second piece of information ~ after the img src part is the address where you have the image hosted, whether it’s on your own hosting or a free image hosting place.
The last piece of info you need to add is the alt text ~ make sure you tell them what to do with the button, this will show up if your images don’t work for some reason ~ or if someone has images turned off on their computer. For twitter you would probably put “follow me at twitter” for RSS you could say “subscribe to my RSS feed” etc.
7. Save Changes
After these quick 7 steps you should have your social networking buttons in your sidebar! If you’ve had trouble completing these steps or you have questions, please feel free to ask them in the comment section.
Other Posts That Might Help:
[...] First is a link to a post that walks you through how to add social networking icons to a WordPress sidebar. You can read the full post here: http://internetmarketingformommies.com/adding-social-networking-buttons-to-your-blog-or-website/ [...]