May 9, 2010

HOW TO: Add social networking buttons

This weeks blog how to is answering the following question that Shayna sent in: 


"I love how you have your facebook, twitter, email, and feed buttons to follow you using pictures and it opens to the link, could you share how you accomplished that?"
 
Shayna also wanted to have them in a square, as I have done with the buttons on Someday Crafts, so I am going to show you how to add the buttons linked to your social networking sites and then also how to arrange them into a square.
 
Here we go:
First off you will need to search for the icon that you need (easiest way is via Google Image Search - There are tons of free ones available), or you can right click the buttons below and save them to your desktop.  Make sure to name them so you can recognize them (which is important later down the road.  For the ones below I have them named, FEED, FACEBOOK, TWITTER, MAIL_ICON).

These icons have been sized to 52 px x 52 px which is a good size for your sidebar, you can resize images in most photo editing software.

To add these to your sidebar:
First create a post as usual.  Click the Insert Image button.

In the pop-up window click Browse and locate the images on your desktop, click open and then insert them into your post.
Next you will want to right click on the Layout tab and click open in new tab (or new window if you have an older Internet Browser).
Go to that tab.  Click Add a Gadget in your sidebar.
In the pop-up window, select HTML/Javascript.

In the Configure HTML/JavaScript box, type in your title if you want one (I used "I'm Social!") and then you will need to type this code for each image, so if you have four images, paste it four times and replace with your info:
Where do you get your Website URL?  Go to your Facebook page or other site (make sure you are logged out), select the address in the address bar and paste into the code.  If you are trying to find your Feedburner address, go to your account, you should be able to find it in there (it will start with: http://feeds.feedburner.com/ - mine is http://feeds.feedburner.com/733blog).

Where do you get your image URL? Go back to your other tab where we inserted the images.  Click on Edit HTML.
Don't get overwhelmed.  You will see a bunch of gobbly-gook.  You need to look for the image sources (if you have 4 images, there will be 4 image sources).

The easiest way to do this is to hit CTRL-F.  In the Find box type in src= and click next.  You want to select the info between the quotation marks after src=, now copy and paste it into the correct source spot in your Configure HTML/Layout Box.  If you have another image, click next on your Find box.  Continue doing this until you have all of your image URL's.  You can now close out your Post tab (don't hit Publish Post, just X out the tab - you don't even need to save the post if you are confident you did this right).

This is how it will look:
If you are OK with the images being in a row, you are done!

If you have 4 images and want them in a square shape as Shayna has requested, continue reading:
Open your html/javascript box.
Click on Rich Text.
It will look like this (I somehow managed to forget to put a space between the mail button and the feed button in this screenshot. If you want spaces between your icons, place your cursor between any two icons, click and hit the space bar).
Insert your cursor between the Facebook button and the Mail button and hit Enter.
Now it looks like this (notice the missing space between the mail and feed icon?):
Hit Save and you are done!
 Here is how it will look:
NOW YOU'RE DONE!

I hope this isn't too confusing.  Please feel free to ask questions.  OR, if you want me to do this for you, just send an email to 733blog (at) gmail.com.  For $15 I'll get it done!

I sent these directions to Shayna to give them a try and make sure they were clear and here was her response:

"I did it!!!!!!!!!!!!!!!!! OMG thank you so much, I'm still tweaking with the colors and pics I want to use but I have it done for now..."

Go check out Shayna's blog to see the awesome job she did!

Happy Blog Clean-Up!



23 comments:

  1. Love you Kim! You are so great to help us out. I'll forever be grateful!
    Happy Mothers Day!

    ReplyDelete
  2. Thank you again Kim, I have mine now at the top center so folks can see how easy it is if they stop by via your blog! It really was easy and fun and I feel so official now LOl. You're the greatest!

    ReplyDelete
  3. Thanks so much for the tut! I've always wanted to add the buttons, but just never got around to it!

    ReplyDelete
  4. Thanks so much for this tutorial! I added the buttons and it was really easy to do:)

    ReplyDelete
  5. I was trying to do this yesterday and got stumped with my RSS but I did finally figure it out. Wish I would have waited until today because it would have saved me a lot of hair pulling lol Thanks so much for this tutorial!

    ReplyDelete
  6. This is great...I am trying right now...where do I find the subscription link...Thanks for helping us with this!

    ReplyDelete
  7. Great question Holly! Go to your Feedburner Account. Click on your feed title. At the top of the page click on Edit Feed Details. The third option down is your feed address.

    ReplyDelete
  8. Thank you SO much!!!!!
    I put my twitter and facebook on my blog and I also added my email to my profile.
    Thanks!!!!
    =)

    ReplyDelete
  9. Thanks for the great instructions, Kim! It really helped me de-clutter my blog!

    ReplyDelete
  10. Thanks for the easy to follow directions!

    ReplyDelete
  11. Oh my goodness. Holly from 504 Main shared this with me when I asked her how she did hers and I just did it and I can't even believe it!!! Thank YOU!!!

    ReplyDelete
  12. Nice tutorial!

    There's one thing I can't figure out: Where do I find the URL that I have to copy/paste for the email button so that visitors can sent me a mail if they click the emailbutton?

    ReplyDelete
  13. ha! i did it! so no one has any excuses to not do it because I am soooo computer dumb!!!
    http://kimboscrafts.blogspot.com/2011/02/im-social-butterfly.html

    ReplyDelete
  14. I too am confused with the email URL? I got the FB one done but not sure how to link to my email?

    ReplyDelete
  15. To set-up the email icon this is what you put in as the url (between the quotations):

    mailto:YOUR_EMAIL_ADDRESS

    ReplyDelete
  16. Thank you so much for this tutorial! Your directions were fantastic and now I have the social icons :)

    ReplyDelete
  17. I love your blog, I am always looking to learn something new on the blogosphere and love finding blogs like yours! I think I don't need to look on other blogs after your tutorials, you are great!
    Here is my blog, http://cutebabyboutique.blogspot.com/

    Thank you again!
    Analia

    ReplyDelete
  18. Thank you so much for the tutorial...it is fantastic! I am still not able to get my email to work. I typed in just like you said...and it still does not work. Can you help me? thank you, K

    ReplyDelete
  19. Thanks so much for this tutorial!

    ReplyDelete
  20. Thanks for this AWESOME tutorial! I LOVE all the blog advice you have here and in your other tutorials. It's absolutely wonderful!

    ReplyDelete
  21. Thanks for the tutorial! I just added some buttons to my blog. I don't think I could have figured it out without you!

    ReplyDelete
  22. Thank you, thank you, thank you! I have been reading other people's posts for a while now and trying to figure out how to do this. You were so clear in your explanation and it worked! Thank you

    Melissa
    redflycreations.blogspot.com

    ReplyDelete

Blog Archive