Thursday, February 16, 2012

How to Add a Row of Social Media Icons in Blogger (and possibly other platforms)

Last week I promised I'd share how I added those coffee (or hot beverage for the non-coffee drinkers) cup social icons to my sidebar. No one should have to spend the amount of time I did (searching for directions and subsequently screwing them up a hundred times) to do this on her own blog. It sucked.

So anyway, before I get started, I need to let you know some basic things I'm assuming:

  • You aren't terrified of HTML. You don't have to know how to write code, but if you need a muscle relaxer and a brown paper bag to breathe into just looking at code, you should probably avoid this like the plague take a pass.
  • You've found and downloaded to your computer the social icons that you'll be using. If you haven't, I'd start by googling "social media icons". There are hundreds of free ones out there, in every shape, size and design. They're simply image files that you'll later be adding links to. I got my coffee cups here.
  • You know the URLs of the social media accounts you'll be linking to. (Hover over my coffee cups and you'll see example URLs.) If you don't have an RSS URL for your blog feed, you'll need to go to feedburner.com and create (burn) one.
  • You know how to add a gadget to your blog.
  • You have room on your blog to add a row of social icons. Hint: My coffee cups would be too large in a more narrow sidebar.

Before you start, open (in two separate windows):

Note: This procedure is written for Blogger; however, the basic mechanics might be adaptable to other blogging platforms.
  • A new post in Blogger (the screen where you type your post). Open the Compose (not HTML) editor. 
  • The Layout editor in Blogger (the screen where you can add gadgets and move things around). (Design > Layout)

In a nutshell: You will be creating a "dummy" post in Blogger, in which you'll insert your icon images and then link them to their corresponding URLs. Once that's done, you'll copy and paste all the HTML into a blog gadget, and then you'll have social icons on your blog. Yay! 

Unfortunately, it took me several hours to get my images to line up correctly. Don't be like me. 

From the New Post editor:
  1. Insert your first icon image (original size, left justified*, make sure the "open link in new window" box is checked).
    Note: Use left if you're adding icons to a right sidebar (like mine). Use right if your sidebar is on the left.
  2. Highlight the image and add a link. (You might need to click the Link button twice to trigger the add link pop-up box.)
  3. Add the URL that matches the icon. (Ex: If the icon is for Facebook, add your Facebook URL.)
  4. Without spacing, insert your next icon image.
  5. Repeat Steps 2-3.
  6. Repeat Steps 4-5 for each additional icon you are adding in the same row.
    Result: You should see all your icons (however, they will most likely not be lined up correctly - don't worry about this yet!).
  7. Switch to the HTML editor. (You will need to move/delete some code to get the icons to line up in a flush horizontal line.)

    You need to get your code to look like this (click to enlarge):


    There should only be one set of justification tags (the code circled in blue) around all three images. Your top and bottom tags should look exactly like my example here. (To make the code easier to see, I inserted white space around the three different image examples.)
    Reminder: In the top tag, "left" can be changed to "right" or "center," depending on how you want the row justified.

    DELETE ALL THE EXTRA JUSTIFICATION TAGS (in between individual image code). Hint: Use Ctrl + F keys to search for the extra code. (Copy the code below when searching, if needed.)

    <div class="separator" style="clear: both; text-align: left;">

    YOUR IMAGE CODE GOES HERE

    </div>

    The only code (hyperlink tags) that should enclose each of your images is highlighted in yellow in the screen shot above. 
  8. Switch out of the HTML editor (back to Compose) to check your image spacing.
    Result: Your icons should be flush horizontally, like this.


    If they are not, go back to Step 7 and recheck your code against my example.
  9. Switch back to the HTML editor and copy all of the code.
  10. Paste the code into a new HTML/JavaScript gadget window (click Add a Gadget from the Layout screen).
    Note: You can add a title if you like.


    Click SAVE.
    Click Preview, and hopefully, your new icons will show up beautifully on your blog!
    Drag your gadget to where you want it (hopefully, at the top of the sidebar).
    Click Save arrangement and you're all done!
~~~~~
This process really isn't complicated, but until you've had practice getting images to line up in a row using an HTML editor, the trial and error can make you want to pull your hair out!

For those who've stuck around to the end, I hope this helps! And if you wind up adding icons to your own blog once you leave here, please come back and say so in the comments so I can go look!

~~~~~

Coming soon (because this post is quite long enough): How to add a Pin it button to individual posts in Blogger and why I decided to join Pinterest!

102 comments:

  1. I couldn't figure this out if my life depended on it--makes me too tired to think it's so complicated so is it okay if I just send a comment on here? I would need a muscle relaxer and a brown paper bag for sure...in fact, I need one already just reading about how to do it! But, I don't think you were talking to me anyway, however, I just bumped onto a site that said I was a blogger and I didn't even know it!!! I love the coffee cup icons though, so I'll just send you some coffee...

    ReplyDelete
  2. Wow, pretty cool! I didn't think this could be done in Blogger. If I get around to getting it to work (not a paper bagger, but not far off!) I'll surely let you know. You're awesome for sharing this!!

    ReplyDelete
  3. A tutorial that did not make my head hurt! Yay! That was so easy, thank you so much! I've added just two social media buttons to my blog (I should probably join a few more, haha) for now. You can go take a look if you want. Thanks again! :]

    http://twocolliesandamutt.blogspot.com/

    ReplyDelete
  4. I have a headache and my eyes are going goggly from all the instructions. I don't understand HTML. I just added Pinterest and Instagram to my iPhone but have yet to do anything with them. I think I'm a lost cause. My little blog is going to remain little forever sigh.

    You have a JF and Doowee YouTube channel too? !!!!!!

    ReplyDelete
    Replies
    1. I can empathize, Ms. Typist. I know some HTML (from a previous paid job), but it's still intimidating. I've been wanting to add the icons for many months, but had to gather up the courage first.

      Also, I have never owned a smart phone, and have no clue how to work phone "apps." Best of luck with that. :D

      If you have vids on YouTube, you can easily make a GLP channel! No HTML required. Just poke around over there for the directions.

      Delete
  5. Well done! You did a great jog of explaining that! You definitely saved someone alot of time and effort. Blogger can be such a bear to accomplish things like this with!

    I keep reading awful things about Pinterest. It's a real love/hate place. It sounds like way too many people pin stuff and don't give any rightful credit or even worse take credit for themselves. But it is probably like Facebook...I said I'd never get an account but I eventually gave in....so Pinterest is probably just around the corner for me ;-)

    ReplyDelete
    Replies
    1. Taryn - Yes, it seems that one either loves Pinterest, hates it, or couldn't care less. Pinterest has just published some code that sites can add, preventing any of their stuff from being pinned (like for artists and photographers). So, hopefully, the "controversy" will settle down a bit. I'm not using it for the pretty pictures, but still think it's a great resource. I'll explain later.

      Delete
    2. I have tried countless websites that claim to have the 'easiest' of methods to add media share icons to blogger and I've wanted to RIP my hair OUT of my HEAD until you came along....... I was about to give up, call it quits, adios amigos but I thought,'Hey, give this one LAST attempt'....... and I'm glad I did! Your explanation is BY FAR the simplest to understand, navigate and implement and I thank you!!!! Although my pretty icons aren't lined up quite right yet and some gi-normous and others puny, I am just THRILLED I have HTML that works! Ha! My goal for today has been met and I can now clean house, get groceries and re-enter the world of the living!

      Thank you again!

      newyorkadventuresinhomeschooling.com

      Delete
  6. Great tips! You laid this out so well. Where were you five months ago when I went through the drama of adding buttons to my site? Huh?

    I'm just kidding. This will be such a great help for many people, even if they don't blog via blogger. It was very kind of you to put it all together like this. It must have taken just as much time to write it out as it did to find the answers the first time! I applaud your hard work!

    I am wondering if it's time for me to suck it up and join the Pinterest bandwagon...

    ReplyDelete
  7. Thank you for sharing!! I will be trying this soon :)

    ReplyDelete
  8. Thank you SO much! I've been trying to do this for a very long time. Your process was painless. :)

    ReplyDelete
    Replies
    1. Melissa - Your icons look great! Thank you so much for leaving me this note. A procedure is no good until someone gets it to work...painlessly. I'm tickled that someone outside my niche has already used it. :)

      Delete
  9. Thank you again so much for your help! I was able to add these buttons to She She Shoppers today! Yeah. Your instructions were perfect. Hope to meet you one day soon.

    ReplyDelete
    Replies
    1. Rowena and Jena - Thanks for the note. So glad it worked for you; they look great!

      Delete
  10. Ahhh finally! Thank you so much! I had all my images, links etc. ready I just needed that bit of extra info to get it all to match up! Quick, simple and easy exactly what I was looking for!!
    Thaaaaaanks
    <3

    www.thecottoncandyqueen.com

    ReplyDelete
    Replies
    1. Thanks so much for leaving the note, Cotton-Candy-Queen! I love it and am so glad I was able to help. :)

      Delete
  11. Hi Elizabeth!
    I just wanted to drop you a line praising this post to the high heavens!! Seriously, it helped me SO much. My husband is actually a software engineer and made embedded buttons on my blog header that kept getting bugs :(...so I stumbled across this post and...voila! perfection. You rock!!

    ReplyDelete
  12. Devon, your note made my day! So glad you found this procedure helpful; I love your blog icons (and you've got some great photography over there, too).

    I see you are in SITS (which I read daily, but have yet to take the plunge and join). Maybe I'll see you around there sometime. :)

    ReplyDelete
  13. Thank you SO much! I was struggling for so long! Check me out, and if you like, follow me :)
    http://chelseahope1.blogspot.com/

    Thanks again!

    ReplyDelete
  14. Thank you so much for writing this! This helped me so much!

    ReplyDelete
  15. This was so great and very detailed! Extremely helpful--thank you!

    ReplyDelete
  16. Thank you for this. Really. You're a great teacher!

    ReplyDelete
  17. o...m...gosh... thank you thank you thank you! perfect!

    ReplyDelete
  18. You are my saviour.. that actually worked and first time.. just tried it our with buttons I had but can now go out out and make some more quirky ones.. thanks SOOO much x

    ReplyDelete
  19. Thank you so much! This finally worked for me. I had read several other tutorials that suggested uploading to image hosting sties and just was not working. So happy this did. Thank you!

    ReplyDelete
  20. Well I just added two social media icons based on your instructions! I am in disbelief how easy and clear your directions were. Like literally...a light bulb just went off in my head about HTML code and how to figure other things out! Thank you so much for taking the time to write up this tutorial for all of us.

    xoxoxoxo,
    Erik and Sebastian

    ReplyDelete
  21. thank you so much elizabeth for the detailed & useful post !! :-) found this post through a google search. aligning the images took me an hour but still got it done. i'm so happy ! you can see it here :
    http://aspoonfulofyumm.blogspot.in/

    ReplyDelete
  22. Finally a tutorial I understand on how to add social media buttons. Now I finally have some up and running on my blog. Thanks so much!! :)

    ReplyDelete
  23. Thank you so much for this tutorial. I was wondering how to do this and most search results do not tell you how to line them up in a row. I followed the instructions and everything came out perfectly. The screen cap of what should be left after deleting everything else is the clincher that made this successful for me.

    ReplyDelete
  24. Thank you! Maybe Blogger should hire you as a consultant.

    ReplyDelete
  25. This was amazing helpful!!! Thank you so, so much!

    ReplyDelete
  26. Thank you, thank you! I've wanted to do this for the longest time, but held off thinking I'd need to dig around in my template's code. Am overly excited about my blog's new look. :)

    ReplyDelete
  27. Thank you so much for sharing this! My sister and I could not get them lined up. We are still in the process now...I'm on the phone on the West Coast reading the instructions to her and she's on the East Coast entering all the info/icons. XX

    ReplyDelete
  28. Thank you Thank you thank you!!!!! So much easier than other tutorials. Simply genius! The hardest part was finding the pictures I wanted to use.

    ReplyDelete
  29. Thank you so much, this was so well explained! I did it in minutes, and couldn't be happier with the result. If you want to take a look at your brilliant teaching come to life, my url is http://thenonbrit.blogspot.com/ and the buttons are just under my "About Me" section on the left hand side. Thanks again!! xx

    ReplyDelete
  30. Thanks for this!! Had it done in less then an hour :)

    ReplyDelete
  31. I have been working on this for an hour and I just give up. I had someone make me the icons for the social media but they were too large and did not fit right in a row. Then they wouldn't link to my sites. I have a bit of knowledge playing with html but this just would not work for me. Glad it has for many others and thanx for trying!!

    ReplyDelete
  32. Thank you sooooo much for this post it has been more than helpful. Concise simple and easy instruction. I love you for it. Xxxx

    ReplyDelete
  33. Hello:)
    I have no HTML knowledge whatsoever, but I followed your precise instructions and ... it worked - after a few times:)

    So thanx so much for sharing.

    Best wishes,
    Diana
    http://dreamsfactory1.blogspot.ro/

    ReplyDelete
  34. After trying a number of different ways and google searches, I came upon this post and was able to solve the problems I was having and get it done! Using a "dummy post" is brilliant! Thanks for sharing and best wishes always :)

    ReplyDelete
  35. Fabulous, thank you!

    Nancy @ http://maddalee.blogspot.com/

    ReplyDelete
  36. Thank you for sharing, you made it really easy

    http://thelookbybb.blogspot.fi/

    ReplyDelete
  37. Thanks so much for this! I just followed these steps with success - much appreciate your outlining them so clearly! :)

    ReplyDelete
  38. This was awesome!! I had been struggling with several other code tutorials, found and followed yours and bam! I'm pretty proud of myself! I even made a blog button!

    ReplyDelete
  39. Thank you, thank you! You are truly awesome! I feel so proud of myself. I simply had each icon as its own gadget and it looked so blah. Now its a nice little line and I can add whatever I need to add later on.

    ReplyDelete
  40. Amazing, thank you for posting this :) http://lilybobombslovelylumps.com

    ReplyDelete
  41. Thanks, this was a great help! Best regards from Croatia!

    ReplyDelete
  42. you're a genius! I'm THRILLED at the look of my blog now!!

    ReplyDelete
  43. It took some trial and error (technology, especially HTML, hates me), but I got it! Thank you so much for taking time to write all this out!

    ReplyDelete
  44. Thank you for the uber help! I can see how this lesson will help me with other blog-projects in the future!

    http://everythingtosomeone.blogspot.com/

    ReplyDelete
  45. Thank you! Loved your step-by-steps. Very helpful indeed.

    ReplyDelete
  46. TY IT WAS VERY HELP GUL I WILL PIN THIS POST

    ReplyDelete
  47. Very thorough. In another life I might have been able to do this. I appreciate my web master more. I think you are awesome to tackle this. Good for you. I like the coffee cups. :)

    ReplyDelete
  48. Just popping in to say how much I have LOVED checking out all your (many) blogs, tricked out with social icons all lined up in a row! Thank you to EVERYONE who has taken the time to comment. I am so glad I took the time to write this post. :)

    ReplyDelete
  49. Everything was going great until I got to Step 8 and clicked on compose and my icons show up vertically on the left side of the post. When I click back to html the second code in blue appears underneath the first code in blue instead of at the bottom. I've tried moving it and going back to compose but it keeps going back.

    I want to pull my hair out!!! Help!!!!!

    ReplyDelete
    Replies
    1. Oh no, Kim! Email me all your code (as is) and I'll see if I can fix it. chroniclesofcardigan@gmail.com

      Delete
    2. Okay. Thanks! I will do that now!

      Delete
  50. Lots of Love from India!! This was so bloody helpful!! Thanks a ton! You can check out the right side of my blog..and are welcome for any feed back!
    magnefiestaofmumbai.blogspot.in

    ReplyDelete
  51. Hey! Just wanted to say thanks for the simple tutorial! I even made my own social icon images to use!!! I feel so empowered now! LOL!
    Natasha
    A Modest Fashion Blog:
    www.natashaatkerson.blogspot.com

    ReplyDelete
  52. Thank you for this tutorial. It helps a lot ! :D

    ReplyDelete
  53. Thank you for this great tutorial! So happy to avoid photobucket etc. and complicated html template editing. Thanks again!

    ReplyDelete
  54. thank you! I was finally able to set up my social media buttons thanks to you!

    ReplyDelete
  55. THANK YOU, I have finally managed to add a ROW of social media icons to my blog! :)

    ReplyDelete
  56. I can't do it!!! It's taken me hours to figure out what should be in my html code and i've deleted loads but they're still vertical! I feel like crying! But thank you for posting this, I'm sure i am just being an idiot! *bursts into tears*

    ReplyDelete
    Replies
    1. @Jess Palmer, I hope you're not still crying, because I looked at your blog, and they look pretty horizontal to me.

      Delete
    2. haha! Yes i am sorry for being such a pathetic drama queen! I actually came on here earlier to tell you i'd finally done VERY MUCH WITH YOUR HELP and to say thanks a million! But i couldn't log on earlier but am here now I am SOOO happy! XXXXXX

      Delete
  57. Hi, thank you for the tips. I've been trying to add icons to my blog and recently decided to try to add the icons to my own images. Was able to create both the image with the icon and link it to my sites. Your tips were easy to understand and very effective. Thanks!

    ReplyDelete
  58. this is THE BEST tip for doing this I've seen! Thank you Thankyou!

    ReplyDelete
  59. Thank you! it worked PERFECTLY!!
    here it is:
    http://tootiesmith.blogspot.com

    :)

    ReplyDelete
  60. WOW!! Thankyou! First time I tried to add it and it BLOODY worked xx thankyou so much for this great tute :)))

    ReplyDelete
  61. Thanks a lot for sharing this! I a familiar with html and certainly don't know coding but your tutorial was easy enough for me to add my social media icons to my blog! Thanks!

    ReplyDelete
  62. Thank you SO much for this!! I spent so much time trying to align my social media icons horizontally - and it was all those extra justification tags that just needed removing! Thank you!!!

    ReplyDelete
  63. OMG I have sleep like 3 hours and have a whole day trying to do this. Your tutorial was the ONLY one to help me. Thank you so much god bless. I gotta say it still wasn't easy but once you narrow the codes, just compare it with the image, you'll notice the difference and fix :) Thank you once again

    ReplyDelete
  64. Thank you soooooo much!!! I was giving up till I found your tutorial! :)

    ReplyDelete
  65. Thank you for this tutorial, found it while searching for one on Gogle! It made everything simple and finished in 30 minutes (I added 12 icons so I had to work more).

    ReplyDelete
  66. Thank you so much! I've been trying to figure out how to do this for weeks and your tutorial was so easy & simple to follow. Thanks again!

    Layla-ann.blogspot.ca

    ReplyDelete
  67. thank you so so so much!! fabulous tutorial!!

    www.timothycrumbs.com

    ReplyDelete
  68. Thank you so much!! You wouldn't believe how many tutorials i've read and got absolutely confused by, but yours is the most helpful- so thanks again!!!! rosegoldblush..blogspot.com

    ReplyDelete
    Replies
    1. Oh, I'm so glad it helped! And, I *would* believe, because I read them all, too! Ugh!

      Delete
  69. thank you so much your tutorial, is the best, so many others but confusing me as html noob :D

    ReplyDelete
  70. Thank you sooooo much sir.. The best tutorial so far!

    ReplyDelete
  71. A thousand blessing on your head, Elizabeth! It may have taken me forever and a day to get around it, but it was easy peasy with your tutorial. Brilliant! (that's you... brilliant!)

    ReplyDelete
  72. Thank you a million times over!! I was going the way long way of doing this & you just saved me about an hour of frustration and a huge headache!!

    ReplyDelete
  73. Thank you so much for this guide! It worked for me and my blog looks so much neater now!

    ~Su

    ReplyDelete
  74. thanks for your great tutorial...do i have to add the words "blank" and "target" to the html by myself? because those words are not included in the facebook / twitter icons html . in the Compose mode i can see the buttons. when i see the html those words are not included.
    please help!!
    thank you:)))

    happy 4th!!

    ReplyDelete
    Replies
    1. @Betty, I think you mean the target="_blank" code. If so, NO, you don't add those yourself (unless you're educated in code). Refer to step #1: Insert your first icon image (original size, left justified*, make sure the "open link in new window" box is checked). When you add a link in the Blogger editor, there's a box you can check to "open in new window." When you check that box (and you should), Blogger inserts the target/blank code for you. Good luck!

      Delete
  75. Best tutorial - thank you so much!!

    ReplyDelete
  76. Thank you SO MUCH for sharing! The most helpful tutorial ever! :)

    ReplyDelete
  77. This is such a good tutorial, I'm not really familiar with HTML but it was so easy to do! THANK YOU!!

    ReplyDelete
  78. This worked perfectly and it only took me about 30 minutes! THANK YOU SO MUCH. Great tutorial, excellent directions and the HTML graphic is perfect (would NEVER had been able to do this witout it!). Kudos, you helped me more than you could know!!

    ReplyDelete
  79. Thank you soooo much for this tutorial! You're the best!

    Jamie
    Life As I Know It

    ReplyDelete
  80. Just what I was looking for. Thanks!

    ReplyDelete
  81. Thank you! Thank you! Thank YOU!!!

    ReplyDelete
    Replies
    1. YAY! You're my 100th comment! Thank you for reading and I'm so glad it worked! (It looks nice, too; I looked at your blog.) ☺

      Delete
  82. You. Are. Amazing. You saved me with this post! I never would have been able to figure this out without your awesome step by steps!

    ReplyDelete
  83. Thank you! This was very helpful and it worked like a charm!

    www.diaryofdocdiva.com

    ReplyDelete

We love comments almost as much as Reese's Peanut Butter Cups! Thank you!

LinkWithin

Related Posts Plugin for WordPress, Blogger...