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!

Having social media icons prominently displayed on your blog makes it easy for your readers to follow you. Learn how to  add social media icons to your blog.

How To Add Social Media Icons To Your Blog

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!

The End...Footer Design
Why Header Design Matters

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

  3. I just love social media icons and I think everybody should use it.

  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.

  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!

  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.

  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.

  12. Thanks for the information, very useful.

  13. Super useful and super easy! Thanks for sharing!

  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 :)

    • 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.

  23. So practical. Thank you!

  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/

  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! :)

  26. I just did this today! How funny…

  27. Great tips, thank you!

  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.

  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!

  30. What great information. Thank you!!!!

  31. Wow. That’s really simple. Thanks!

  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)!

  33. Thank you for the great tips.

  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 ♥

  36. Does this work to replace the “icons” on the social media widget?

  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.

  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!

  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.

  40. Thank you for this great easy to follow step and very helpful step. :)

  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}.

  42. Great tips! I have added social icons to some but not all of my blogs. I need to get on that.

  43. Great tips! I would probably mess them up if I tried to make them myself lol.

  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!

  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.

  46. I love my matching ones and love when people use them…

  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! :)

  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.

  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