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!

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.
The End...Footer Design
Why Header Design Matters

 

Comments

  1. says

    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

  2. says

    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!

  3. says

    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

  4. says

    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.

  5. 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…

  6. says

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

  7. Melody says

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

  8. says

    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

  9. says

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

    • says

      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

  10. says

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

  11. says

    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.

  12. says

    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!

  13. says

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

  14. says

    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.

  15. says

    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!

  16. says

    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.

  17. says

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

  18. says

    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.

Trackbacks