Adding Social Networking Buttons to Your Blog or Website

July 25, 2009 By 119 Comments

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.

No related posts.

Comments

  1. Andrei McBreak from corporate giveaways says:
    March 28, 2012 at 7:54 am

    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.

    Reply
  2. Val Adams says:
    March 21, 2012 at 7:33 am

    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
    Val Adams´s last [type] ..Online Pawn Shops Replace Nearly Extinct Refund Anticipation Loans

    Reply
  3. Madeleine from bookmarking says:
    December 8, 2011 at 3:36 pm

    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.

    Reply
  4. iftekhar says:
    November 17, 2011 at 3:35 pm

    Thank you very much for your post. it was helpful.
    iftekhar´s last [type] ..Facebook & Skype video calling feature gets deeper

    Reply
  5. Janet Krugel says:
    October 29, 2011 at 11:14 pm

    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!!!
    Janet Krugel´s last [type] ..Special Feature: Trick or Treat Giveaway Hop (US/CAN) #tothop

    Reply
  6. E. N. A. says:
    October 13, 2011 at 11:30 am

    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.

    Reply
    • Jackie Lee says:
      October 13, 2011 at 12:09 pm

      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.

      Reply
  7. Tanya Bright says:
    October 7, 2011 at 10:32 am

    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?

    Reply
  8. Jackie Lee says:
    August 31, 2011 at 2:18 pm

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

    Reply
  9. Andrea from cleanupeatup.com says:
    August 31, 2011 at 10:45 am

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

    Reply
  10. Cindy says:
    August 28, 2011 at 1:35 am

    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.
    Cindy´s last [type] ..New Metallic Laces for the Holidays!!

    Reply
  11. Lindsay Loves Veggies says:
    August 8, 2011 at 12:29 am

    I used this article to help me add Twitter, Facebook, and RSS Feed buttons to my blog! Thanks for the great instructions! :)
    Lindsay Loves Veggies´s last [type] ..25 Questions

    Reply
  12. Taryn says:
    July 31, 2011 at 8:38 am

    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 :)

    Reply
  13. Leah from Walking Tours Rome says:
    July 6, 2011 at 11:56 am

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

    Reply
  14. Notelettes says:
    June 25, 2011 at 9:35 am

    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 ……. :(

    Reply
  15. van025 says:
    June 19, 2011 at 9:41 pm

    So much great information that I never would have found on my own. Thanks!
    van025´s last [type] ..What type of mountain bike should i buy

    Reply
  16. Radoslav RIzov says:
    June 11, 2011 at 2:07 am

    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

    Reply
  17. anna says:
    May 27, 2011 at 7:04 pm

    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.

    Reply
    • Jackie Lee says:
      May 27, 2011 at 7:10 pm

      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.

      Reply
      • anna says:
        May 28, 2011 at 3:37 am

        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.

        Reply
  18. jerry dodson says:
    May 23, 2011 at 7:13 am

    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!
    jerry dodson´s last [type] ..The Quit India speech by Mahatma Gandhi August 8th 1942

    Reply
  19. Rebecca says:
    May 19, 2011 at 12:04 pm

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

    Reply
  20. anuj from webtricksblog says:
    May 11, 2011 at 2:24 pm

    wow it was easy :)
    anuj@webtricksblog´s last [type] ..How To Add Sidebar Share and Email Subscription Box

    Reply
  21. Ziyaad says:
    April 21, 2011 at 9:40 am

    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!

    Reply
    • Jackie Lee says:
      April 21, 2011 at 10:57 am

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

      Reply
  22. caritauaja says:
    April 1, 2011 at 12:46 am

    thank….its very nice put to my site :D
    caritauaja´s last [type] ..SMSH Bantah Dituduh Boyband Plagiat

    Reply
  23. Janina says:
    March 28, 2011 at 6:41 pm

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

    Reply
  24. Moris says:
    March 6, 2011 at 5:22 am

    The link is broken of Social bottons. :\
    Please fix it if you can
    Moris´s last [type] ..‫איך פותחים דף בפייסבוק‬

    Reply
    • Jackie Lee says:
      March 6, 2011 at 7:36 am

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

      Reply
  25. from pril Bowerman says:
    March 5, 2011 at 3:13 pm

    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?

    Reply
    • Jackie Lee says:
      March 5, 2011 at 3:30 pm

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

      Reply
  26. Anne from Quick and Easy Cheap and Healthy says:
    March 3, 2011 at 9:10 am

    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!

    Reply
  27. Stuart from Web Design Chester says:
    March 2, 2011 at 3:57 am

    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 :-)

    Reply
« Older Comments

Trackbacks

  1. Add Cool Social Media Icons to Your Wordpress Sidebar says:
    August 3, 2010 at 5:28 pm

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

    Reply

Speak Your Mind

*

CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.