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. 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.

365 free marketing tips

Comments

  1. Great info not only for mommies and ladies but for all of us who are into internet marketing. These widgets are pretty helpful in getting traffic to our social networks . Thanks Jackie.

  2. Hi Jackie, I’m not a mommy and I’m not also a woman but I wanna comment on this great piece of information. I wanna thank you for this helpful article. Instead of placing those buttons in every page, we can just place the code in the Widget and it displays on all of our pages, right?

    Thanks and best regards to all Mommies,
    Val Adams of pawn shops online

  3. We stumbled over here by a different page and thought I might check things out. I like what I see so now i am following you. Look forward to looking over your web page for a second time.

  4. Thank you very much for your post. it was helpful.

  5. Thank you so much for this!!! I just did a quick update with some icons I found to see if I could do it. I was able to resize them and make them just like I wanted!! Now that I know I can do it, I gotta find some even cuter images!!!

  6. Great post :) One problem though, how do I keep the buttons side by side with each other (horizontal), instead of stacking on one another (vertical) on Tumblr?

    Please help me.

    • Jackie Lee says:

      It’s probably the size of your sidebar… you may have to make your icons smaller so they will all fit (with room in between) in the space available in your sidebar.

  7. I got the buttons in but how do I get them horizontal? Right now they are on top of each other and it looks kinda sloppy. Is there a way to do this?

  8. Jackie Lee says:

    @ Andrea ~ my bad… my guess is you’re grabbing the wrong code from wherever you’re hosting your images… are you hosting at photobucket? Make sure you’re getting the html version.

  9. aaa my image link is always broken what am I doing wrong I have been trying to add these buttons for 2 weeks now!

  10. Love this article!!
    I’ve been trying to fix up my blog for the last couple of hours, and this article is amazing.
    I just love the big buttons!! But making them work can make my mind wind a bit. Thank you for posting this article. It takes the pressure off.

  11. I used this article to help me add Twitter, Facebook, and RSS Feed buttons to my blog! Thanks for the great instructions! :)

  12. Excellent post! I’m in the process of redesigning my personal blog to take it to the next level. This website will be a very useful resource! Thank you :)

  13. Very informative and your step by step is perfect.I’ve been looking for this so thanks for the tutorial and I’ll try this out! (I’m surprised I didn’t see this last time I was on your blog).

  14. First of all, can i just say that I’m so grateful that a blog like yours exists?! This is the most straightforward guide I’ve found and I’ve done A LOT of searching, believe me!

    That said, after following your instructions for saving/downloading the icons I’m unable to pick out/seperate the buttons I want (Facebook, Twitter, StumbleUpon, Flickr) for my blog. Have I missed a crucial step? I feel like such a ditz!!!

    Oh, by the way, I’m on Blogger.

    So sorry to be a pain ……. :(

  15. So much great information that I never would have found on my own. Thanks!

  16. Hi, there I’m not a mommy but your post saved me !! I was looking for this for days !! Thank you so much :) ) Finally I found what I was looking for explained in just a few easy steps !!
    Thank you so much :) ))
    Greetings from Bulgaria

  17. Am kinda stocked in the hosting stuff, how do i host it on Photobucket, or flicker? i mean i would like it when my website visitor click on facebook , then it redirects them to a page where they have a thumbnail of my website and some messages asking them to share it on their page.
    Thanks in advance as i wait to hear from you.
    Between my website is still in progress would be out in a week if i get all this stuff fix together.

    • Jackie Lee says:

      These aren’t the kind of buttons that do that. These buttons will take people to twitter/facebook to follow you. If you want them to share your content you’ll need share buttons. There are many plugins for wordpress that will do that (the one I use is called sexy bookmarks) I have written a post on adding share buttons to blogger if your site is there.

      • Thanks Jacie
        That was a good one but unfortunately am not blogger at least not yet my website is a hand coded html and css site.
        Any help on how i can get the share botton would be highly appreciated.

  18. Thanks for posting this tips about adding social media buttons on the blog.. I’m going to try this buttons on my blog.. It’s all easy!

  19. Rebecca says:

    I found this extremely helpful, thanks. MySocialButtons is great if you want a big pack of similar looking icons, although I only needed a facebook icon and found a sexy one at http://www.facebookicons.net.

    It’s REALLY hard to find unique icons, I found that a lot of the icons looked familiar. :(

  20. wow it was easy :)

  21. Hi there,

    Wonderful post. However you’ll have to spoonfeed me on this one. I wanted to know if you have the code for that sharing function you have. It’s really nice the way they pop up on hover. Could you share? :)

    Thank you!

    • Jackie Lee says:

      the ones I use come from the wordpress plugin “sexy bookmarks” if you’re hosting your own wordpress site you can just go into the plugins and search sexy bookmarks and it should come up, choose install and then go to the options area (once it’s installed) to pick the ones you want to feature, as well as the saying above it. :)

  22. thank….its very nice put to my site :D

  23. Going to try the social media buttons. Thanks for the post.

  24. The link is broken of Social bottons. :\
    Please fix it if you can

    • Jackie Lee says:

      Hey Moris,
      In the post… right next to the first link… is a note that says the first link is broken and you might want to try THIS one (with another link). Try that one. :)

  25. Hello Jackie,

    I am trying to manipulate the code you gave above and the images won’t show up on my blog. Here is the code I have when I took out the alt text stuff. Can you take a look & tell me what i am doing wrong?

    • Jackie Lee says:

      Here’s an easier way to do it on blogger… (I’ll do a whole post on this soon because a lot of people are having this issue)
      1.Make sure you have the images on your computer (not at flickr)
      2. Go to design and click “add a gadget”
      3. choose the “picture” gadget. Don’t fill in the title or caption if you just want the picture to show up by itself.
      4. Fill in the place you want people to click to (facebook/twitter/wherever)
      5. choose the image from your computer using the browse function.
      6. save. :)

      Now you can position the gadget wherever you want it to be on your sidebar.

      If you have multiple ones you’ll have to do multiple picture gadgets and they’ll be on top of each other, but it’s much easier. :)

      BTW your site is really cute. :)

  26. I have followed all these steps, except my husband made my buttons. They won’t show up on my blog!!! The only thing I can think of is that I’m using the wrong URL, but the URL I’m using is the one indicated on BlueHost and I don’t know what else I would use. I’m so confused! I’m not sure if I’m doing something wrong or if there’s a glitch somewhere!

  27. Wow mysocialbuttons.com is a superb place for icons, just the sort of thing I have been looking for, so much better than the generic everyday icons you see everywhere else :-)

Trackbacks

  1. [...] 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/ [...]

Speak Your Mind

*