Helping You, Help Yourself!

Friday, April 22, 2011

Adding Social Media Icons to Blogs on Blogger




To get started, you’re going to need the following:

A. Some cute social media icons (google exactly that or look here or here)
[Make sure they are downloaded as a group, each icon its own downloaded item, not one page in Illustrator or Photoshop with all the icons together. Trust me, it’s way easier this way!!]


B. A Photobucket account (don’t worry, it’s free!)


Steps:

(if you're technologically savvy, you can follow the shorter, green colored directions)


1. Find some icons you like a lot
(a lot, you hear me? Cuz this is a long process and you sure as heck don’t want to do it twice!!)


a. Make a list of the icons you need
(i.e. twitter, facebook, technorati, etc. I kept getting caught up in their cuteness, downloading and THEN realizing it didn’t have one of the icons I needed! Doh!)

b. Download the icons selected.

c. I had a whole list of icons I needed, so I changed their sizes in Illustrator (my preferred platform, you can use photoshop too and I’m sure a slew of other ones!) to 64x64 PIXELS (make sure you are on pixels and not inches!) so I could fit 6-7 icons side by side in a single row…cuz I’m anal like that! See what size that gets you on any of my blogs; it’s pretty small, but you may have to play around a bit to get the size you want. I personally just started a New artboard and sized the artboard to 64x64 pixels and then size the icon no larger than that of course.

Illustrator New Artboard Menu



d. I save all my re-sized images by their size: red.twitter.64 for example or red.twitter.64x64 so you know in case you have to repeatedly re-size.

e. Save Illustrator (or Photoshop) resized images as .jpg's.


2. Go to your photobucket account and upload them.


3. Open a word document and Copy these two lines of html code at the top:

 
a. you are going to need these two lines of html FOR EACH icon!
I used a blank word document and just copied these two lines over 7 times, one set for each icon.


b. SAVE this document, I recommend using social.media.icons.HTML

4. Open a SECOND word document.

(We’re getting organized here, bear with me! )

a. Now, type up a list of all your profile links. Some you easily remember, like your twitter account, but others, such as your facebook, might be a jumble of numbers at the end that must be copied and pasted every time you need it!

b. SAVE this document as well, as social.media.profile.addresses.

5. Now, here’s where we put it all together.

a. go to your photobucket account where your icons are. If you just scroll over the icon, you should get a list of links under each icon. Simply click on the link labeled DIRECT under your first icon and it will copy it for you.



b. go back to your word document with your HTML (your “Word HTML”). Go to your first set of html and highlight the red writing that says, “Your photobucket link to your icon/image.” Right click on the line and click PASTE. It should replace the red text with the photobucket link.

c. go to your word document with your profile addresses. Find the one that matches the icon address you just copied (trust me, not cool to click on your FB icon only to end up on your stumbleupon page!) COPY the correct profile address.

d. go to your Word HTML and highlight the blue words. Right click on that and click PASTE. Again, it should replace the blue text with the profile link.

6. Repeat step 5 until you have all the icons and links properly paired up in a list.
7. Go into your blogger account. Click on Add Gadget, select HTML.


8. Almost done!! Go back to your Word HTML and COPY all the text there, just as it is.


9. Return to Blogger and PASTE the code into the HTML gadget. SAVE.


10. Check your blog, see how it turned out! Hope that works for you!

3 comments:

  1. oh my, this looks a bit cumbersome, but I think I finally understand how to do it, thanks to this tutorial. Bookmarking this, and I'll be back to try this when I'm more awake! :-)

    ReplyDelete
  2. I HAVE looked EVERYWHERE to figure out how to do this. Thank you sooooo much!

    Angie

    XOXO Angela's Anxious Life

    ReplyDelete
  3. Thank you so much ,for share this type of information .I am so impresed, nice site.

    ReplyDelete

Spamming, me no likey!

LinkWithin

Related Posts Plugin for WordPress, Blogger...