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!



Comments

  1. says

    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!

  2. says

    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!

  3. says

    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?

  4. says

    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

  5. says

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge