Adding Social Networking Buttons to Your Blog or Website
Jul 25
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. [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.
If you enjoyed this post, make sure you subscribe to my RSS feed!<
Are you ready to take Undaunted Action? But don't know where to start?
If you're ready to take action, join us in the safety of a friendly caring community. Join us in the K.I.S.S. Club! Your business will never be the same!
Other Posts That Might Help:
Hey, I just wanted to tell you that this is a really great blog, people like you that see to it that others get the help they need are rare and one of the reasons why I do what I do. I appreciate your comitment and wish you the best. Adding social networkign buttons can be very helpful and important to any marketing campaign, good stuff!
Whitney Segura’s @Internet Marketing Blog´s last blog ..Network Marketing Your Way to the Top
Follow me @GardeningFun on Twitter!
Thank you for your post, however, I have just started using Tumblr and I find a lot of information Im finding online as how to add social media buttons dont specifically tell you how to do so in Tumblr.
In tumblr you have to know some sort of CSS or HTML to modify your blog, and I know neither. Is there a way to get these “Follow Me” buttons on my blog as well as the Share buttons on the botton of every post?
ChrisFACE´s last blog ..Shutter Speed 4”- f-40- ISO 200Tried to take a picture
Follow me @chrisfaceprjct on Twitter!
IF you go to your tumblr account and go to customize. Then choose info ~ in the big box there you can add the code for these buttons. You would just use the whole section of code from number 6 in the post ~ just stick it in the description area. Then use the < p > (with no spaces between it) to space them out. Hope that helps.
Follow me @momtohanna on Twitter!
I actually did what you suggested to add google analytics to my blog. Thank you soooooo much for your help. I thought I was gona have to learn HTML or CSS and embed the code for the buttons in the blogs “custom HTML” section of the theme. I will try and let you know how it goes.
Thanks again.
ChrisFACE´s last blog ..I know its called snail mail- but damn! My e-mail inbox doesnt
Follow me @chrisfaceprjct on Twitter!
Social media icons are essential to blogs – this is a great way to tell people that they can follow you in multiple way. I found some really cool social media icons by just searching Google images (ie. search for “social media icons” or specifically “facebook icon”). I think it’s fun to find an icon “family” that is unique and different so that it really stands out and is memorable. Or you can take an existing icon family and change the colors to be greyscale to create a classy, subtle look.
Hi Jackie,
It’s been so long since I did this before. The buttons I have are a png and are not showing up in the sidebar. I created a folder in the html area of the site and saved them there. I files in you code exactly. Any ideas?
Thanks
Bernita
Bernita @ Egypt Costume´s last undefined ..Response cached until Thu 5 @ 15:53 GMT (Refreshes in 15.35 Hours)
Follow me @bernitaburdick on Twitter!
you saved your buttons on your server? If so you should have urls for them ~ just use the code above to create the html to make them show up.
Follow me @momtohanna on Twitter!
This is what I have put in a widget.
For the life of me it won’t show up. Am I missing something?
I’m on overload right
Bernita @ Egypt Costume´s last undefined ..Response cached until Fri 6 @ 0:32 GMT (Refreshes in 23.16 Hours)
Follow me @bernitaburdick on Twitter!
Okay the code didn’t show up..lol
Bernita @ Egypt Costume´s last undefined ..Response cached until Fri 6 @ 0:32 GMT (Refreshes in 23.13 Hours)
Follow me @bernitaburdick on Twitter!
yeah you’re missing the piece of code that points to the image.
(I could see the code you used in the email version) You have to not only point to twitter, but also the image. The full code is right under step 6.
Follow me @momtohanna on Twitter!
One quick question – how do you get the icons to appear horizontally (as they are in your current sidebar)?
I keep trying to add alignleft, aligncenter, and alignright – but they end up appearing diagonally instead of horizontally. This occurred regardless of how small I made the images (so it isn’t a sidebar width issue).
Is there something I am missing?
Thanks!
Trish@Financial PLR´s last blog ..How to Kick Your List-Building Efforts Up a Notch
Follow me @trishlindemood on Twitter!
this format is part of this theme. You should be able to just not put anything (like
or
between each of them and they’ll show up right next to each other though. Just put each bit of code right next to each other with no spaces in between.
Follow me @momtohanna on Twitter!
Thanks so much for this post!
I have been looking for this exact information for a while – but could only find info on adding the icons after each post.
This makes it super easy to understand how to add these icons to the sidebar!
Thanks again!
Follow me @trishlindemood on Twitter!
Hi Benny ~ I didn’t get a 404 error when I tried it, but I did update the button in the sidebar to go through feedburner ~ so try it again. If it doesn’t work try the RSS icon in the address bar ~ that one worked for me in chrome and firefox.
I seem to be having a problem , subscribing to your RSS feed. It comes up with error 404. Let me know if its a known error or if its just me . Ive tried Chrome and Firefox. Im using Eset Firewall and im not sure if its turned on . Im not that good with Laptops. Ill bookmark your site and see if you have responded. bye now
hi
thanks for the detailed and step by information. i have connected to my twitter, facebook and linkedin account from my website.
Thanks for the great tutorial! The social buttons that I use are sorted so well very few now that I know are not useful if you don’t use them often.
Jermaine@Facebook Login´s last blog ..Facebook Login Troubles
This is an absolute traffic tip..thnx for guiding
Hey Neil,
Glad I could help ~ and your buttons look great.
Follow me @momtohanna on Twitter!
Hey thanks a ton for this post, I’ve looked up this query so many times and almost all the results were about adding the social ‘bookmarking’ icons at the bottom of your posts to share. Only a few had the ways to link to your profiles. This is certainly the best and simplest post of them all. I managed to get them up and running on my site now: http://quadrosneil.wordpress.com
Follow me @quadrosneil on Twitter!
Great post. Thanks for the info, will add it to my new site.
Pink Laptops´s last blog ..Pink 4 Laptops
thanks you for information
for sharings
huh ~ thanks for the heads up. The front page is there, but then when you click through it’s a 404 error ~ it may be a small glitch ~ we’ll see.
Follow me @momtohanna on Twitter!
Also the site mentioned (mysocialbuttons.com) has no images hosted on it. Might be going through some changes but thought i’d let you know.
mark´s last blog ..Facebook login problems?
Follow me @highrescovers on Twitter!
Hi, i think this is a great tutorial, http://www.freesocialbuttons.com let’s you add them by just entering your social network page text and does all the hard work for you, or freebuttons.ws has a good selection too
mark´s last blog ..Facebook login problems?
Follow me @highrescovers on Twitter!
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.
Follow me @http://www.orbitmedia.com/ on Twitter!
Nice post. You’ve provided a more detailed procedure on how to improve marketing side of your website.
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
Social networking can bring in new visitors and is the key so a succesfull blog. Great post.
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!
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!
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.
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?
adding button to the website or blog is very useful in terms of traffic to the site
thanks
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.
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!
So that’s how to put those shiny web 2 buttons! Thanks for the info, we’ll start adding for Facebook and Twitter!
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
nice info. social networking can bring a new visitor
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.
Thanks for finding that site!!
Great info! Thanks for helping out by explaining this clearly.
I will get these tools implemented on my blog ASAP!
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.
An interesting post indeed. Buttons helps you save your favorite sites easily.
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