How to add social media icons to your blog

Do you make it easy for your readers to connect, like, follow you and basically find you anywhere on the internet? If not, you should- and we’re going to show you how. We’ll even learn a quick bit of html to execute. Don’t panic though- this is an easy process so don’t be intimidated by the terminology!

How to add social media icons to your sidebar

Since social networking is crucial to blogging success, having prominent social media icons on your blog is an easy way to make yourself accessible. In addition, many bloggers like to share buttons or smaller logos of other sites. Here are three easy steps to add custom icons or buttons to your site.

 

1. Find or create the icons for your blog.

You can do a google search for social icons, which will return sites like The Best Social Media Icons All in One Place or 44 Must Have Free Social Media Icon Packs. If you are the more creative type, you can create your own in Photoshop (ideal size varies based on a site, but 60px x 60px is a good size to start). For tutorials on creating your own icons, check out this list of 20 social media icon tutorials to help you along.

2. Upload your images.

Icons can be uploaded directly to your blog or you can use a photo site like flickr or photobucket. Whichever you use, you will need the link to the image.

3. Add in your html code.

Do not be intimidated by the words “html code”. This is much easier than it sounds! Once you have your images uploaded, you need to add the following into your html widget area in Blogger or in a text widget in WordPress:

<a href=”http://www.linkgoeshere.com” target=”_blank”><img src=”http://www.imageurlhere.com”></a>

That’s it! You can insert any image using this method and link the images to the appropriate link. So if you are adding in a Twitter icon, you would use the following snippet:

<a href=”http://twitter.com/TwitterName”><img src=”http://www.imageurl.com”></a>

This will have the Twitter icon link to your Twitter profile. Click the Twitter icon in the the SITS Sidebar to see this in action- and make sure to follow us if you aren’t already!

About Ashley Abele

Ashley is a mom of 3 young children, social media consultant and blogger. She focuses on strategizing for bloggers and small businesses to help them reach their online potential and subsequent sales potential as cofounder of Other Half Media. When she’s not busy creating blogger outreach programs, email or social media campaigns, she blogs her life, parenting, and frequent moves at My Front Porch Swing. Connect on @AshleyNAbele on Twitter and on Facebook.

Comments

  1. Miss Lori says:

    This was just what I was looking for. THANKS!

  2. I am experiencing information overload here. Too much excitement!!!! THANK YOU.

    Blessings~
    Alethea
    Blended4Purpose recently posted..My apologies

  3. I just love social media icons and I think everybody should use it.
    Sima recently posted..Simple Social Icons PSD

  4. My blog http://www.momsdrive.info needs these social media buttons. I’ll try to make those icons once I could get the chance. Thanks for this tutorial this surely helps on me.
    Jhovelen recently posted..The Beauty from Above

  5. HI there!

    Thanks so much for this. One issue though…How do I get the icons into a specific placement on my page? I want them under my logo on the right hand side but I have zero idea on how to get them there!

    Thanks so much in advance for any help you can offer!

    Cheers

  6. This worked seamlessly! I’m slowly but surely building my blog and now I can let others connect to me via my other social network accounts, having the icons neatly displayed on my blog. Thanks!
    Grace recently posted..Let’s Connect!

  7. Thanks so much for this great info, I am thrilled that I was able to upload new icons all by myself!

  8. I use Host Baby for my page..so its basacly a template.. I downlosded a set of icons that i liked and uploaded them into PhotoBucket…I copied and pasted the code in to the “Code Snippet where you can Paste or type in your code to embed videos, slideshows, social media buttons, and more.”

    Example Twitter:

    and it is still not working. Can any one help me out. Thx in advance

  9. This was perfect! Thank you so much for posting. I used the buttons from http://www.greatfun4kidsblog.com and didn’t have any issues.
    Michele Jackson recently posted..Student Incentives

  10. For me this was not easy at all sadly, this message keeps coming up – URL contains illegal characters- I can not figure out how to get around this. Or add a picture. Please help me :( Thank you.

  11. Thanx a ton for sharing this. I am new to blogging and this proved really helpful.
    Ajay recently posted..Samsung Galaxy Tab 2 10.1 : Now in India

  12. Thanks for the information, very useful.

  13. Super useful and super easy! Thanks for sharing!
    Sandra recently posted..Painting in process

  14. thanks for sharing this widget to us :)

  15. very nice, you sould also include this social media icons set : http://www.blugraphic.com/2012/06/11/22-social-media-icons-vector-psd/

  16. Lori Mariano says:

    Can someone tell me the advantages of using google+, id heard they were not going to continue it, but im out of the loop and would like to know the advantages of each social media connection…

  17. Thank you so much for all your tips. I am just starting my blog and I really appreciated all the info. Thank You!!!!

  18. Melody says:

    Every time I try to enter the code into blogger gadget it says I’m entering illegal characters?

  19. This is SUCH a great site. Thank you!!!! :)
    -Art a la Rue

  20. I was able to add 1 to my site but I can’t figure out how to add others and have them all line up not under each other……hmmmmm

  21. Can someone help I did the code just as it says but when I go to my blog it gives me red x’s that don’t go to where i told it to. I checked the properties and it’s showing that I entered my website in there twice or something but i didn’t
    This may not post right and I hope it does but I did

    and when I hit properties I end up with http://www.chaoticandcrafty.com/”http://chaoticandcrafty.com/wp-includes/images/099521-glossy-space-icon-social-media-logos-facebook-logo-square.png”

    Which isn’t whats in the code at all. If anyone can help me with this I’d appreciate it :)
    Amber recently posted..Wordless Wednesday – Things Done Daily

    • Mine does this too!! I am so glad someone else out there has this problem! Have you figured out how to change it??

      I know you wrote this almost a year ago, just thought I’d ask :)

      -Sarah

  22. Great post. I was working on this tonight but can’t figure out how to get them side by side.
    Notorious Spinks recently posted..#Quote: Lifeclass

  23. So practical. Thank you!
    Susan in the Boonies recently posted..Spaghetti al Vino Bianco: Spaghetti Cooked in White Wine

  24. If you have Photoshop or Elements I have a tutorial on my blog that walks you through how to make them! I hope it helps someone!! http://www.littlebeckyhomecky.com/2012/02/diy-social-media-buttons-for-blogger/
    Katie @ Little Becky Homecky recently posted..Striped Infant Hat

  25. I just did this LAST week…Can’t believe I didn’t just wait! I found some really cute beakers that matched my theme. And luckily they were free and even provided the psd file so I could tweak them to make my pinterest and google plus beakers! :)
    Darci the STEM mom recently posted..Footprint Lab: Playing and Designing Methods

  26. I just did this today! How funny…
    IASoupMama recently posted..The Moment a Mother is Born: Helene

  27. Great tips, thank you!
    Mimi@Irresistible Icing recently posted..Sparkle (Irresistibly You Tip 33)

  28. This is a great tutorial, I currently do have the links and think they match my design but it is on my to do list to change them around a bit.
    Shirley recently posted..{Recipes} Tropical Green Smoothie

  29. Thank you, thank you! I have links to my FB, Twitter, and Pinterest accounts, and have to say it is the first thing I look for on other blogs. It is much easier for me to follow people on facebook, as there are so many varying subscription services. Usually, if someone doesn’t have a FB page, I wind up forgetting their blog, which is a bummer all around!
    Mastering Mommy Brain recently posted..The Biggest Thank You of All – To Our Teachers!

  30. What great information. Thank you!!!!
    Leigh Powell Hines (@Hinessightblog) recently posted..Simplicity on Mondays: The 15-Minute Fresh Pasta Skillet Meal

  31. Wow. That’s really simple. Thanks!
    BarefootMedStudent recently posted..TTT: Quotes that Inspire

  32. Love this tutorial. I want to change the look of my blog, but don’t know how to change the icons (right now they match my current theme, but I had someone do it for me)!
    Aimee @ ShugarySweets recently posted..Root Beer Float Ice Cream Sandwiches

  33. Thank you for the great tips.
    Tanya recently posted..Welcome To Paper Coterie!

  34. THANK YOU … yet again. You always know what I’m trying to do to my blog next! Now…I want to insert them into my header…

  35. For the technically challenged, I have a blog-tips post offering the complete html codes in a range of button styles… all you have to do is add in your blog/website details. Here’s the post…
    http://www.greatfun4kidsblog.com/2011/09/blog-tips-your-own-social-media-buttons.html
    Hope it helps someone ♥
    Simone @Greatfun4kids recently posted..Under Canvas

  36. Does this work to replace the “icons” on the social media widget?
    Carla Kennedy recently posted..Five Sexy Reasons to Have a Cosmetic Bag

  37. I used to download the free icons but never found ones that really matched my blog’s design. So I finally just created them myself and I’m happy with how it blends in with my site.

    I usually put my social buttons below my “About” widget in the sidebar so people can find them easily after reading my mini profile.
    Jayme recently posted..How to be patient in 10 seconds

  38. No WAY! It’s that easy?? I have been wanting to make these things more obvious for some time now.

    HOW can I do this for each blog post? I’d really like people to promote each post when they like them, but my blog design comes with the most INVISIBLE social links ever!
    Luci recently posted..The Daily Whipping: Does It Get Easier?

  39. Thank you so much for this! I’ve been wanting to add these buttons. I’m disappointed that most of the sets don’t include Pinterest, though.
    Lesley recently posted..Out for a stroll

  40. Thank you for this great easy to follow step and very helpful step. :)
    lucy recently posted..Unique Memory Board DIY

  41. I totally needed this – knew everything except WHERE to put the damn things on WordPress. You’re so smart {and this is totally easy to follow}.
    MommaKiss recently posted..Camping

  42. Great tips! I have added social icons to some but not all of my blogs. I need to get on that.
    Christina recently posted..The little book of prosperity/Make money Spiritually

  43. Great tips! I would probably mess them up if I tried to make them myself lol.
    krystle recently posted..Bright Starts Ultimate Baby Shower Giveaway

  44. You’ve read my mind again. This is something that I’ve been meaning to do but haven’t sat down to figure out. Thanks for making it sounds so simple and for the additional resources!
    Christine @ Love, Life, Surf recently posted..Finding Time for Fitness

  45. I like how I have my links on my current blog, but when I eventually get my other blog going I think I may downsize to the little icons.
    Joyness Sparkles recently posted..Ribbon Flowers

  46. I love my matching ones and love when people use them…
    Dawnll recently posted..Mutiple Giveaways!!! I Have One

  47. I still can NOT figure out how to do this!!! so frustrating!
    Kristin

  48. I finally designed some that matched my design instead of using generic ones. I love them! :)
    Simply Brittany recently posted..I’m Not Okay

  49. I love the idea of having a custom set that match my own blog design, but I haven’t had chance yet, so at the moment I just use the standard buttons.
    Rachel Cotterill recently posted..Children’s Book Week – With Prizes!

  50. Thank you for this easy to follow steps!

Trackbacks

  1. […] How to add clickable buttons to your blog Free blog post planner […]

  2. [...] Add Social Media Buttons To Your Blog [...]

  3. [...] How to Add Social Media Icons to Your Blog: Now that you have your social media icons in hand, read this post to figure out how to upload them to your blog! [...]

  4. [...] Social media icons are such fun. They can be super easy to swap out and provide a way for you to quickly personalize your blog design. [...]

  5. [...] contact information. ACK! Let people reach you. You might be surprised at what comes your way. :) The Sits Girls have a great tutorial on how to add social media buttons to your blog. And please, don’t [...]

  6. [...] How to Add Social Media Icons to Your Blog [...]

  7. [...] sure your social media icons are on the top of your [...]

  8. [...] You see them everywhere, don’t you? Those sweet little collections of groovy Facebook, Twitter and RSS Feed icons, known as social media buttons. [...]

Our Story - Privacy Policy - Website Terms & Conditions