How to install social network icons onto your blog

Happy Friday, friends! I get a lot of questions about how to install image links and buttons and things to blogs, so today I am sharing a little how-to as well as some free graphics for your sites! You will get these cute social networking icons and the matching sidebar widget titles and also learn a thing or two about putting them on your blog. They have transparent backgrounds so will blend in nicely with any layout.

click image to download

After extracting the images, you'll need to upload them to an image hosting service. You can use Photobucket for this step.

Let's start with the social network icons.
Once uploaded, all you need to do is copy the full image URLs of each image (the ones that start with <img src=") and paste them into a new HTML/Javascript widget in your sidebar, side by side like so:

.... etc.

Of course using your own image URLs instead of my example ones.

To add links to the social networking icons, you just need to wrap your <a href=> link around each image code like so, and remember to close the code with the ending </a> tag:

... and so on.

For the sidebar titles, it's best to place these inside their own HTML/Javascript widgets in Blogger. So, create a new HTML/Javascript widget in your Layout dashboard and paste in the <img src> code of your first graphic title, just as you did above for the first social network icon.

Save your widget and position it properly in your sidebar. Make a new HTML/Javascript widget and do the same for the next. Continue for each title until they are all properly in place. Click Save Arrangement at the top.

That's all there is to it!

Some new premade Blogger templates have been added to my design shop as well:

Enjoy and have a great weekend.

Need blog topic ideas? Check out 365 Blog Topic Ideas on Amazon!



  1. Thank you so much for this! I love all your blogging tips. Hanna Marie

  2. This is wonderful! I'll tuck this away if I add some more buttons onto my website, they would look great on there! It's so nice that you're sharing this <3


  3. This was actually so helpfull and needed, doing this right now!

  4. This is very generous of you! I'm sure it will help out a bunch of people x
    Maria xx

  5. Thankyou so so much for making these and letting us all have them for free, you are so generous and amazing!
    Sarah :-) xx

  6. these are awesome! I wasn't sure if I was installing these properly but apparently I am. I used your 'how to make a header' video yesterday and it was so, so incredibly helpful. Thanks so much!

  7. THANK YOU SO MUCH it looks so good <3


  8. These are adorable! Thanks so much for creating pretty, FREE things! Awesome.

  9. I always wondered how to do that! Thanks for sharing!


  10. Thanks for the free stuff Dana. I love the new premade templates too especially Tiffany.

  11. Thank you so much for this stuff! It's really helping me! I'm currently trying to make my own themes and stuff for my new blog but I seem to be failing miserably :( Your tutorials like this are really helping me though! I love all your pre-made themes! x

  12. Hi there^^,
    Thats soo great, the buttons are so so cute with this ruffled rim :D
    You are so awesome and your blog is just so so lovely!
    XOXO Abby

  13. this is such a good idea to put on your blog!
    and that new penelope layout is so beautiful.
    i love the watercolour flower elements!
    keep it up Dana!


  14. Wow thank you this is amazing! :) love your blog! X

  15. Thank-you so much! I can't believe it worked, your instructions were so good, this is the first time I've been able to do anything to do with html!!!
    I can't thank-you enough! :)


    1. hey i couldnt do it cause you know i just not smart can you help me

  16. Thank you, this is great! Always wondered how to do this :)


  17. Thank you for this freebie; the social network icons are super cute. Right when I saw them, I immediately utilized them in my blog, thanks again! :)

    lots of love, Dana Carmella
    Bloglovin' & Blog: Pretty Odd ♡

  18. These are super cute, thank you for sharing them! I love the Blogger templates too, especially the blue one. I have shared these with my followers, I think they will love them.

  19. This was so helpful, just what i'd been looking for.

  20. I just had a little peek into your shop and gosh your designs are beautiful~ I know who I'll be coming to if I ever want a re-design. Great work!

    Lou x

  21. so helpful http://justlilameera.blogspot.com/

  22. Wow I am so glad I stumbled across your name on Zoella's blog. Your webdesign as well as just beauty blog is aMAZING! I snagged these freebie social media icons and I have to say thank you SO much! I just started my blog here (dreaminlace.blogspot.com) and I added you to my blog roll to hopefully spread the word about how amazing you are! <3 I also purchased your book from Amazon! You're such a gem! Can't wait to read it! xoxo

  23. Thank you so much. That was so helpful
    Beth x

  24. First i'd like to say thank you for providing these tips. Secondly though due to me being a newbie I'm actually struggling to put these on my blog I've got as far as creating an account with photobucket and dragging the folders and license on to the desktop but beyond that I'm confused.

  25. none of mine start with the src, so confused..

  26. Thank you sooooo much!I just created a blog and this was really helpfull!Keep posting I love your blog and your tipps!

  27. I just created a blog and all the tips that you have given have really helped! Thanks so much. Much love. Xx


  28. I've managed to get the icons on my blog, but I can't link them to my social networks? I'm not smart when it comes to these things. Can you help me lol ? Thank you x x x


 photo prev_02.jpg  photo next.jpg  photo home.jpg
 photo shop-top_2.jpg

Copyright © Wonder Forest™, Dana Fox Creative 2011-

Back to Top