Pin It

Add Social Media Icons To Your Blog

Add social Media icons to your blog fairly easy with these five simple steps:

1. Pick your icons. There are hundreds of free ones on the web- you can check out some of my favorite sets HERE, HERE, or HERE. Or you can download the set I made especially for Our Mommy Moment readers

2. Resize the icons you want to use to size you want them. You can do this in GIMP by opening the icon, then at the links at the top go to image/ scale image. For small icons make them 30px, for medium make them 50px and for large make them 75px. Once they are sized go to file and select save to save your icon.
3. Once your icons are sized to your liking you can upload them into Photobucket. Now download the button code- and open it up. Then grab the direct URL of your icons and put it in the button code where it says YOUR-IMAGE-URL (and leave the quotations marks there just copy over YOUR-IMAGE-URL)
There will be four lines to add in four icons- if you need more/less icons just add/remove a line. Make sure the center tags stay the the beginning and end of the code- as this will ensure your buttons are centred.
4. Now add in the social media url in with the appropriate icon- add your social media URL over YOUR-SOCIAL-MEDIA-URL (again leave the quotation marks and just copy over the words YOUR-SOCIAL-MEDIA-URL)
5. Once all your links are added in copy the whole button code and paste it into an html/javascript gadget (to find your gadgets go to ‘dashboard’, then ‘design’ then click the ‘add a gadget link’ on your page elements)
This code will automatically put your icons side by side as long you don’t make your icons too big or add too many icons and run out of room in your sidebar. You may need to play with size to get your icons to fit properly.
Have a suggestion for a tutorial? Feel free to make a suggestion- we are always looking for ways to make blogging easier.
Subscribe to our posts, it’s easy!


  1. 1Ne PRouD MaMa says:

    Thanks for the info! I was goIng to try to create my own blog design next so this will be helpful.

  2. Mommy Head says:

    Thank you, Thank you, Thank you for doing this. And I love your button set. I totally plan to add them to my blog tonight. What a blessing you are to do this!

  3. Sippy Cup Mom says:

    Great tips! Thank you!

  4. Londoneya says:

    Thank you for the gorgeous buttons! I've added them to my blog and they look fantastic. You're a star!

  5. Mom of the Twinkies and Tot! says:

    Thanks for sharing! This has been on my list of things to figure out & add to my blog and I'm going to do it right now!

  6. Great. I was good until,
    4. Now add in the social media url in with the appropriate icon- add your social media URL over YOUR-SOCIAL-MEDIA-URL (again leave the quotation marks and just copy over the words YOUR-SOCIAL-MEDIA-URL)
    I'm kinda thick in the head. How do I get my feed link for folks so when they click on the button they are able to add feed on their end?

  7. Monkeying Around says:

    I love these they are amazing. I am trying to find some with a bit of a.Eric carle theme to theme bit can not find them anywhere

  8. vancouver website design says:

    Social Media is a great tool businesses can use to obtain valuable insight into the interests and opinions of consumers which is vital for maintaining relevancy.

  9. Thanks for this Lena – I tried to put it on my blog, but cannot get the links to work. They keep pointing back to my own blog….help?

  10. Erin,
    did you check your links? I am not sure what else it could be.

    at the very bottom of your posts there will be a feed link. click on that link- thats the link you should use :)

  11. rainbowkttys says:

    This tutorial helped me do 2 heart shaped social media blog buttons side by side in 5 minutes on my blog, whereas other sites didn't work and took HOURS! Thanks so much!!! If you'd like to check out where I installed them, please visit my fan blog for Robert Pattinson.

  12. Thanks Lena for writing this…it worked like a charm! Only one question…how do I get the email icon to work? where do I get my email url?

    Thanks again


  13. Thank you! I just added these to my blog. I feel like a genius now!

  14. just remove the spaces with the backspace. is it showing up yet? Make sure you are putting the /direct URL provided by photobucket into the code instead of the html code.

  15. Hey thanks for these social media icons.. I’d like to see some girly icons too.. please do something too…

  16. Thanks so much for this! I’ve been wondering how to add these! I was wondering if you have one for Pinterest too. I see you have a personal one but couldn’t find it in these sets.

  17. Are these social media icons still available for download? The download button doesn’t appear clickable anymore and I was just wondering…Thanks


    • Hmm, I’m not sure since Lena is no longer a contributor on my blog, but I believe there are more options in the free ones she listed in the post. Sorry for the inconvenience and thanks for asking.

Add Your Comment