Adding Social Networking Buttons to Your Blog or Website
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.
Step 1. Get Your Buttons
The place to grab these images is My Social 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.
Need some help getting started? Wherever you are I can probably help. Whether it's Squidoo, niche blogs, or an authority blog, one on one help is available!!
If you enjoyed this post, make sure you subscribe to my RSS feed!
Other Posts That Might Help:
Hey
Awesome post, very informative!
I will get this implemented on my blog asap, looks awesome!
I have added you to my rss feeds, tons of great info:-)
Talk soon,
Paul
An interesting post indeed. Buttons helps you save your favorite sites easily.
Good pointers! Having the option for your blog posts to be spread through social networking is powerful stuff, only makes sense to have it available to your readers.
Great info! Thanks for helping out by explaining this clearly.
I will get these tools implemented on my blog ASAP!
Thanks for finding that site!!
Thanks for laying this out so clearly. The speed of which social networking is growing is hard to keep up with if you don’t have these kind of tools.
nice info. social networking can bring a new visitor
Thanks for the article.
I have myself been looking at the most effective way of adding a social bookmarking plugin. Some have been pretty poor as in the majority of users won’t know how to use them, so in the end I’ve decided to try out addthis.
Seeing as most sites do use this one, I figure if any visitors are going to bookmark your site,it would be this one they know best. My site is mainly for computer programmers and computer science people, so I might have a better chance than most, but even so it is nice to make the procedure as easy as possible for them.
Lots of good points inyour article, so again, thanks for sharing
So that’s how to put those shiny web 2 buttons! Thanks for the info, we’ll start adding for Facebook and Twitter!
Why don’t you guys give a try to http://www.addthis.com?
After you open your free account, you can generate your own bookmarking button that contains almost all of the social bookmarking sites and social networks, email option, print option, etc. There is a forum on the site where you can read explanations how you can customize the button, if you want. I got the button on my website and I am pretty happy with it.
P.S. I am not an affiliate of the site. Just want to help!
An interesting post. This is easy to do and you show step by step how easy it is. Thanks for that and I hope to use your advices in near future. Social networking buttons can do some quite good job for you and to your website. I wonder how beneficial could it be from the traffic side of view. I mean: how any adding to a website is making it more popular. Because I think some small steps can always help a little bit, giving the whole image more and more beneficial ratings.
adding button to the website or blog is very useful in terms of traffic to the site
thanks
This may seem strange but I couldn’t see the image above, I am using FireFox 2. anyways, what I read was very good and I enjoyed it. I was thinking about print it out, do I have permission to do that?
You have given a step by step procedure on how to make internet marketing easy. It proved to be fruitful. Adding buttons will definitely some traffic to your website.
Hi Jackie,
Great post! I am having some challenges with these showing up on my site. I recently changed out my theme and added some twitter plug ins. I don’t know enough yet to know what might be the problem. This is the code I folled in your directions above but no image. The image could only be saved as a png so I don’t know if that is it or what. Maybe I’ll have to go back to my original theme.
Thanks for anything you can offer.
Bernita
Follow me @bernitaburdick on Twitter!
Hey Bernita,
It shouldn’t matter if you saved it as a png or not ~ as long as when you do the code you have the .png at the end of the image url ~ it should work.
If you still have problems let me know and I’ll take a look at it for you.
Jackie
Follow me @momtohanna on Twitter!
Social networking can bring in new visitors and is the key so a succesfull blog. Great post.
here’s no reason not to do it. Unless you have something against social media in which case you shouldn’t own a blog anyways
Nice post. You’ve provided a more detailed procedure on how to improve marketing side of your website.
This is a great resource for anyone looking to improve their reach online using social networking. It is a great way to improve traffic and business to your site.