Monday, August 13, 2012

How to Add Custom Social Media Buttons to Your Blog

Craftiments:  How to Add Custom Social Media Buttons to Your Blog


First things first, you need to download your icons and save them wherever you store the images used on your blog..... Picasa Web Albums, Flickr, Photobucket, etc.  It's a bad idea to link directly to the site offering the icons because you will end up with a broken link if the image is ever moved or deleted.

Now it is time to write the button code. To make the code easy to understand, I have dissected it into it's essential parts.  Please click on the image to make it larger.


Anatomy of a Social Media Button

Craftiments:  Anatomy of a Social Media Icon

  1. Inside the <a> tag, you link to your social media profile page using the href attribute.  href="URL of your social media profile"
  2. Add target="_blank" to open the link in a new browser window.
  3. Inside the <img> tag, you link to your social media icon image using the src attribute.  src="URL of your social media icon image"
  4. Add height and width attributes to specify the size of your image in pixels.  This is where you resize your icon to fit your blog.  You can make the icon smaller, but I would not recommend  going larger than its original size.  height="height in pixels" width="width in pixels"
  5. The alt attribute is required in the <img> tag.  It specifies alternate text for an image in the event the image cannot be displayed.  For example, the user has a slow internet connection, or in the case of a blind person using a screen reader.  alt="text describing what the button does"

OK! OK! You can think of me as one of those meanie school teachers who wanted you to understand the material instead of just memorizing it!  NOW that you understand the parts of the code, you may copy and paste, and fill in your info where appropriate.

<a href="URL of your social media profile" target="_blank"/><img src="URL of your social media icon image" height="desired height in pixels" width="desired width in pixels" alt="text describing the button"/></a>


Add Your Buttons to the Sidebar in Blogger
  1. Open the Dashboard and click on your blog's name.
  2. Click Layout located in the list on the left side of the screen.
  3. Click Add a Gadget located above the sidebar.
  4. A new window will open.  On the Basics tab, scroll down to find HTML/JavaScript and select it.
  5. Add a title if you want one.  In Content type your button code as shown below.
  6. Click Save.  Back in the Layout screen, drag your new button gadget to the location where you want it in the sidebar.   Click Save Arrangement in the upper right corner of your screen.
Craftiments:  Button Gadget

And that is it! Don't hesitate to shoot an email if you have questions.


73 comments :

  1. Great tutorial! Sarah @ dwellonjoy.com

    ReplyDelete
  2. I used the titanium ones for my blog. Thanks so much for the tutorial! I never would have figured this out on my own.

    ReplyDelete
  3. Thank you SO much for this tutorial. I've tried to add social media buttons in the past and have just given up...until now. I added them successfully thanks to your clear explanation. :-)

    ReplyDelete
  4. What great info. I just did my own buttons yesterday for the first time. These look way better then the ones that you get from facebook and twitter. I have a link party on Wednesdays, and I would love it if you would link this post. It is called Wednesdays Adorned From Above Link Party.
    http://www.adornedfromabove.com/2012/08/pink-honey-beeswax-lip-balm-and.html
    I hope to see you there. Have a great Day.
    Debi Bolocofsky
    Adorned From Above
    www.adornedfromabove.com

    ReplyDelete
  5. brilliant, thank you!

    Will eventually do this for my blog, now I know how! :)

    ReplyDelete
  6. Thanks so much for the tutorial! It's something I have wanted to add to my blog a long time ago.

    Lynn

    ReplyDelete
  7. Great post and tutorial! Thanks for sharing at the Pomp Party! Pinning to our Pomp Party board!

    ReplyDelete
  8. Thanks for the help. Thanks so much for linking up at One Creative Weekend! Enjoy your weekend.

    ReplyDelete
  9. Great tutorial, I've got mine all set up now. Thanks for sharing!
    Terrie - HearthandWhimsy.com

    ReplyDelete
  10. Useful tutorial thanks! for posting


    custombuttonco.com

    ReplyDelete
  11. Kirstin, you are amazing!! Super sweet for offering the icons.. and DOUBLE sweet for the tutorial!

    Thanks for sharing this at The DIY Dreamer.. From Dream To Reality!

    ReplyDelete
  12. What a great post!! Thanks. I would like to invite you to enter my HomeGoods 50 dollar gift card giveaway. The card can be used at TJ Maxx and Marshalls as well.

    Please visit my site to enter :)

    ReplyDelete
  13. This is absolutely fantastic! I have been looking for buttons everywhere. Even tried making my own, but didn't love them.
    Thank you thank you!!
    Dani - www.inspiremotivatelove.com

    ReplyDelete
  14. Thanks for the social icons and the tutorial. I choose the Pink Flambe ones for my blog and I have design my own YouTube and aNobii icons in pantone.

    http://la-casita-de-cristal.blogspot.com.es/

    ReplyDelete
  15. wonderful thanks!!!
    Do you use a hosting company? Im just starting out and not sure what to do or what I want to do..im so crafty and artsy... this is what I have so far for anyone who could give some advice(www.UniqueDesignsAndFinds.com) Also how do you get the tiny tiny Icon to show up on tabs at the very top og your browser or by the www in the address bar? meg_jones25-at-hotmail-dot-com

    ReplyDelete
    Replies
    1. No hosting company, I just sat down and started playing around in blogger. I think your site looks great! The little tiny icon that shows up in the address bar is called a favicon. You can add one by opening Layout in your Dashboard. The favicon widget should be in the top left corner. All you do is upload a small, square image when prompted.

      Delete
  16. I love these buttons!! I am having a TERRIBLE time trying to make them work though (keeping in mind, I have zero clue about html code). I have tried uploading them into Picasa and couldn't get them to show up so then tried Photobucket and the links it gave me wouldn't display the image correctly (either a broken link image showed or there was still html code displaying after the image). Can you shed any insight?

    ReplyDelete
    Replies
    1. Please email the code that you are using to me and I will take a look.

      Delete
    2. Thanks Kirstin!! I enlisted the help of someone who knows MUCH more about html code than I do and he was able to make it work for me :) Thank you so much for the free buttons!!!

      Delete
  17. Love these. But what I love EVEN more is your buttons at the bottom of your blog post! The "pin it" "tweet it" etc - really very cool!

    Could you post an idiot proof guide to doing those? And maybe email a link to grabaspoon(at)live.co.uk in case I miss it?

    Thank you SO much in advance :)

    ReplyDelete
    Replies
    1. Unfortunately, I put those share buttons in my footer, which requires editing the html of your blog template. It was very involved, with a lot of trial and error on my part, and at this point I don't even remember all the changes that I made. Not to mention, if somebody doesn't have a good understanding of html, they could really mess up their template. Sorry I can't be of more help. If you want to try it, google the following: add custom share buttons footer blogger

      Delete
  18. Hi there! Thanks so much for sharing! This is very helpful and considerate of you! I kinda feel like a dork since it looks like all your other readers didn't have a problem installing the buttons, but I think I'm stuck on the source of the image. I tried using the URL that you have for each button through google docs and it doesn't seem to be working. Do I download and save each button on my computer first? If so, how do I get the URL after it's saved to my computer? Thanks so much again and I hope you're having a great weekend!

    - Julia {http://www.roastedrootfood.com}

    ReplyDelete
    Replies
    1. I have the same question! I must be missing something here!

      Delete
    2. I just figured it out... upload the image to photobucket. click 'share' then 'links' and it will assign the image a url that you can then paste into the html code as the image source :)

      Delete
  19. Hi Kirstin,
    Thank you so much for the wonderful social media buttons. I have been looking for something just like them but never thought I could put them on myself. With your fabulous tutorial I now have the best social media buttons on any blog out there. Plus, I feel like I learned something! That's always fun. You have a fabulous site. Thanks again for sharing your talent with the rest of us.
    Aidan xo
    www.conjugatingirregularverbs.com (if you'd like to see your buttons in action!)

    ReplyDelete
  20. Could these buttons be added to a WordDoc, like on a resume, perhaps? :) Thanks for the tutorial!

    -Courtney (www.415bond.blogspot.com)

    ReplyDelete
    Replies
    1. I know you can convert a word doc to html to publish it on the web, so it seems you could do it. But I don't know the specifics. Sorry I can't be more help.

      Delete
  21. Hi! Thanks so much for these buttons! I added them to my blog today. I still have a question though. How do I create a link for my readers to e-mail me using the button? I'd appreciate your help if you have some time! Thanks again!

    Dominique from gusto & grace

    ReplyDelete
  22. THANK YOU SO MUCH FOR THIS!

    This is great!
    I too am curious about how to get people to email me from the envelope icon.

    Also I really like your sharing icons at the end of the post. Can I use these icons for sharing instead of connecting? And if so- how?!?!

    ~Alicia from Love-ful (aliciamariechristensen.blogspot.com)

    ReplyDelete
    Replies
    1. I will be writing a post on the email button very soon! Yes, you can use the icons for sharing, but it is much more complex and involves editing your blog template. I had to use several tutorials I found on the web and don't feel that I am qualified to teach it to anyone.

      Delete
    2. http://www.craftiments.com/2012/10/how-to-add-custom-email-contact-button.html

      Delete
  23. Thanks for this! wonderful :)
    http://photosbylmb.com

    ReplyDelete
  24. I have been looking at everyone's icons saying I want to do that with my blog, you're so sweet, Thank you for sharing!

    ReplyDelete
  25. Thanks so much! This was very easy to follow and my buttons are up and running!

    ReplyDelete
  26. Hi Kirstin - these are fantastic! I would love to use them on my own blog, but (of course) - I want to give credit where owed! When you say "link back to my blog" - how do I do that? IE, write a post saying I used these buttons, etc? I'm clearly new at this one (!) and my apologies if I am missing something very obvious. Thanks so much in advance, for any insight!

    ReplyDelete
    Replies
    1. Thank you! No need to link back if you are just using the buttons on your blog. That request is for bloggers who want to write a blog post about the buttons.

      Delete
  27. hi thanks for the tutorial, I followed it step by step but now the button pictures are not showing up on my site..the links are fine but the icon pictures don't show up..please help..thanks!

    ReplyDelete
    Replies
    1. Please email the code to me and I will take a look at it.

      Delete
  28. Thank u so much! You are amazing in providing tutorials. I have no idea what I am doing, but just follow step by step and I can actually understand them! Thanks again!

    Ida

    ReplyDelete
  29. This was sooo awesome!! It worked perfectly and I semi-understood what I was doing, which is really quite impressive! THANK YOU!!!

    ReplyDelete
  30. Thank you, thank you, thank you! A simply written tutorial. Love it! I have no excuse not to do this now!!!

    ReplyDelete
  31. I got all my buttons to work, except the email! Do you know what the HTML should look like for the email icon? Thank you so much for the cute icons and the user tutorial!

    ReplyDelete
    Replies
    1. Karyn, check out this post:
      http://www.craftiments.com/2012/10/how-to-add-custom-email-contact-button.html

      Delete
  32. Hi Kirstin,
    Thank you SO much for your great tutorial and your other post with the pantone 2012 follow buttons. I had follow buttons that I've used for awhile but were no longer working (exactly because you stated, the images I had linked directly to another site). I was able to update my follow buttons and I like these even better than what I had before. This was so very helpful and I really appreciate you sharing! Sharon

    ReplyDelete
  33. great post! Do you know how to add custom social media share buttons? I want my readers to click on an icon and be able to share my blog. Thanks so much!! Oh yeah I found your blog on Sverve :)

    ReplyDelete
  34. Thank you so much! I have wanted to add these to my blog and your tutorial was so easy! An extra thank you for the e-mail tutorial, too. ;-)

    ReplyDelete
  35. I'll be hanging out here this weekend, figuring out how to add my social media buttons. Disappointed people got greedy with your icons, they were so cool. I had hoped to use them. At least I get to use your tutorial :)

    ReplyDelete
  36. Thank you so much for this tutorial! I love my new icons! :)

    Blessed Bashert

    ReplyDelete
  37. Hi there, I'm really struggling with this. Your tutorial is extremely well written and I'm sure I'm doing something very obviously wrong but I can't work out what. Tried Flickr and Photobucket to save your images and still same problem. Nothing shows up on Blogger (After saving)
    Any help you could shoot my way would be amazing. Thanks so much :)

    ReplyDelete
  38. Thank you so much for this blog! made my life a whole lot easy! And i used your rose smoke social media icons! will be definitely recommending you :) xxx

    ReplyDelete
  39. Thank you so much! I've been trying to figure this out forever! It's perfect!

    ReplyDelete
  40. Hiya! Thankyou so much for this post, I really had no idea how to put social media icons on my blog up until now! I absolutely love the free icons you created and have used them on my blog! :)
    Courtney - from www.styledbycourtney.blogspot.com xx

    ReplyDelete
  41. Hey! this post is amazing and really helped me, I've written a blog post about it with a link to both your blog and the free buttons post, basically saying thank you... so thank you!! haha xoxo

    you can check it out here- kaskainwonderland.blogspot.co.uk/2013/09/ooo-i-want-some.html

    ReplyDelete
  42. mine doesn't work :( the image is not showing up, it's just a question mark. please help!

    ReplyDelete
    Replies
    1. Michelle, I can't email you personally because you are a no-reply blogger. Please send the code you are using to me via email and I will take a look. Thanks!

      Delete
  43. Many many thanks I used your icons successfully!

    ReplyDelete
  44. Thank you so much! You are a life saver!

    ReplyDelete
  45. Holy cow! This is by far the most helpful tutorial I've found on this subject. Thanks so much for writing it. I really appreciate the actual explanation of the HTML as so many sites just chatter about it and never really explain it as simply as you have.
    I'm trying it out right now. Wish me luck! Thanks again!

    ReplyDelete
  46. They worked! I can't tell you how much I appreciate you digitally holding my hand through this. Wow. I'm headed to bed with a serious sense of accomplishment!
    One question: what do I plug into the place for the social media site url when I want to use the email icon? Thanks again!

    ReplyDelete
  47. Thank you so much. I have been searching for a tutorial like this. You were so helpful and you made it so easy.

    ReplyDelete
  48. Help! Where do you get the url for the social media icons?! Am I missing something or just totally thick when it comes to HTML?

    ReplyDelete
  49. thanks for the awsome tips. i've managed to make the first twitter tab and link it up but the image isn't showing up, just a blue question mark - any ideas what i've done wrong. i'm linking to a flikr image of a twitter logo.

    ReplyDelete
  50. I know that this is an older post, but I still wanted to thank you for everything you share here. I am working on reformatting my blog and don't know much about HTML. Your tutorial worked awesomely and I love your buttons! Thanks for helping me out.

    ReplyDelete
  51. This was a great and easy tutorial to follow. I have one question. I would like the buttons to line up in a row, rather than stacking on themselves. How do I do that?

    ReplyDelete
  52. I've also tried uploading my icons to a Picasa web album, and experimented with adding only one to my sidebar which is not showing up correctly. Am I suppose to share the album on Google+? Also when I click on the image within the album the web address does not show .png ending. I am so confused, and have endured this every time I've tried uploading icons.

    ReplyDelete
  53. WOW! I feel like a REAL programmer now! LOL! I never thought I would be able to do this. THANK YOU SO MUCH!

    ReplyDelete
  54. i cant get the pictures to show up :( help!

    ReplyDelete
  55. Thanks si much for these great social media buttons! I am still trying to figure out how to change the size, when I look at the HTML I do not see any width ir height! Thanks so much!
    Cathy
    www.threekidsandafish.com

    ReplyDelete
  56. Thank you so much for sharing this and for your lovely buttons. :) They're now proudly displaying on my blog. :D

    ReplyDelete
  57. Great tutorial although i have the same problem as some other commenters as the pictures won't show up.... Do you know why? Thanks

    ReplyDelete
  58. Thank you so much for these buttons! Your tutorial really helped me streamline my social media links. And they almost look custom made for my site. Plus they were so easy to use. I appreciate your efforts so much!

    ReplyDelete