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!

Before and After: Vita e Bella by Amy

BEFORE:  Well, I kind of dropped the ball, (hey, give me a break, this was one of my first crititques!  I didn't have my routine down yet! lol So I missed the shot! :(

 AFTER:

Note the little changes: tabs under the header, cleaner print on tagline, an About Me paragraph under the profile and further down, a cloud of tags, shortened blog entries with jump breaks. Also, Amy had begun working on making changes WHILE I was writing her critique, so when I first saw Amy's blog, it had a different background, among other things!

Before and After: Life's Lessons by Nicole W.

BEFORE 

AFTER:

Click on picture to go to Nicole's blog!  :)

Nicole's Comments:

“OMG THANK YOU!!... This was such GREAT advice! Thank you soo much!... OK OK OK!!! I THINK I'VE DONE MOST OF THE TWEAKS!!! EEEEK I'M SO EXCITED!!!  I love the way it's turned out!... I just cried a little.  lol.  I love it! I am forever indebted to you!... *CLAPPING HANDS* *BOWING* YOU ARE SO WONDERFUL!! THANK YOU THANK YOU THANK YOU!... Thank you for taking the time to do this for me.  You've taught me so much.”  



Designing and Other Services with Pricing



Right now, I'm trying to collect items that can help people re-vamp their blogs on their own: tips, tutorials and freebies for those who are design savvy.  For those who are not,  I can critique your blog to give you tips on what you can do yourself to make your blog look more organized, polished and professional.  I can also do the designing, install my designs and make the changes for you if need be.

For example, for one client, I did a critique for her. She was able to move and rearrange some things herself. I then designed a header for her which she herself was able to install. Later, she wanted me to help her organize her blog, which I went in and did for her from her dashboard.

I am offering all my services a la carte, so if there are some things you can do yourself, great!  I can help with anything else.

1.  Critiques: to help you get jumpstarted on making changes yourself. ($25)

2.  Blog title headers ($30)

3.  Sidebar headers (about, follow, links, etc) ($10 each)

4.  Badges (or some people call them buttons) ($10 each) for organizing and labeling your posts.
(See LaLa Land or tea & ink for examples of how I use my badges.  I  try to stay focused on each blog, covering certain topics and I created a badge for each topic.  For LaLa it's Books, Movies, Parenting, LaLa in the Kitchen, Humor, LaLa Lists.)

5.  Logos for your site ($50 for initial design, plus $10 for each variation, as in different sizes, elaborate and simplified)

6.  Consulting and troubleshooting services ($15 an hour, one (1) hour minimum charge) where I go in and physically do the rearranging and organizing on your blog for you or assist you if you are having issues with Blogger, including installation of my items.  PLEASE NOTE:  This is for users of Blogger only!! I do not have experience with WordPress at this time!  This can include setting up feedburner, email subscription, and google anayltics. 

I encourage you to google blog designers and compare prices.  Designers typically charge $250 as beginners, which includes a certain number of changes (I send to you, you request changes/tweaks, send back to me, I make changes, send back to you, etc) because pickier clients or clients who don't know exactly what they want can have you working for days and days, making endless changes.  After say, 4 changes, they start charging $30+ an hour.  I found one woman who was charging $750 for blogger design, including setting up feedburner and google analytics, which I've done myself and is not hard! 
I DO have experience with PhotoShop, Illustrator and Microsoft Office.

Terms of Use (TOU)

I have been working hard to get things up and running, carefully sorting through loads of freebie sites to make sure you're actually getting freebies and not freebies with a ton of restrictions and strings attached! 
As I've dived into this digiscrapping world, I have come across some terms I thought you should know.
 
CU:  commercial use.   This unfortunately comes with a slew of other meanings! Some people consider "commercial use" just putting it on a blog or site that sells things or is commercial in any way.  For example, I came across some scraps I really liked, but the creator was adamant that her items remain free (her perogative!).  This meant that she didn't want them used even on personal sites that had ads on them!  I thought that was a little extreme, but basically, if you earn money from your blog or site in any way, you want to make sure any scraps or graphics you get say CU on them and then read further!  Another version I found for this was that you could purchase them as a commercial designer but only sell them in products labeled "for personal use only."

CU4CU: commercial use for commercial use.  So this means that I can use it on my commercial site or blog AND may use them to create items for sale.  Again, always read the fine print; designers almost always make exceptions or special cases and you don't want to violate anyone's rights or TOU's. 

CU4PU: commercial use for personal use.  This is basically the same as CU: it's commercial in that a designer is using it but all her products are for personal use only.

PU: personal use only.  Again, this may only include designs for your personal perusal or printing for your scrapbook---if your personal site has any ads, you may not even be able to post finished products on your site or blog!

S4H: scrapping/share for hire.  To my knowledge, this is applicable to a small cottage-industry-type scrapping (which is what I do!), not large-scale commercialized, with a cart, online, genuine business.  I can use this person's scraps to create something for you, which you then pay me to receive.  Typically, these are projects that intended for printing. These may also have other stipulations on them.

S4O: scrapping for others.  This does not have a payment component, in that it assumes you are scrapping for friends and family for free rather then payment, which is why it is often seen in conjunction with S4H like this:  S4H/S4O and often with CU attached as well.  Other people use S4O and S4H interchangeably. 

Mostly, designers just want credit!  If you're unsure (some TOU's are insanely verbose and legalistic) please just email the designers.  There are often lots of exclusions, such as, you may use it for your commercial site and to create items for sale but only scraps, not quick pages or it may say you can only use it for commercial sale items if you alter in some way, such as color and size and add something to it.  It all depends.  Asking directly is always best!  I have seen many variations on all the labels used above. 

I can almost guarantee you cannot get for free something you can then sell "as is" or as your own, of course, that will always be against TOU or even illegal. 

Here is a dictionary for all digital scrapbooking terms. 

I will personally not be posting any items I have created; that is not my purpose here.  Now, "never say never," that could change, but as of right now, I have enough on my plate and I want to offer personalized services.