How to install social network icons onto your blog

By Dana Fox

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:

<img src=”http://photobucket.com/facebook.png”><img src=”http://photobucket.com/twitter.png”> …. 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:

<a href=”http://www.facebook.com/yoururlhere”><img src=”http://photobucket.com/facebook.png”></a><a href=”http://www.twitter.com/yoururlhere”><img src=”http://photobucket.com/twitter.png”></a> … 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!

Follow (CLICK TO FOLLOW ALONG AND STAY UPDATED)
Dana Fox
Dana Fox
blog
About me

I am a country loving Canadian with a mind that never sleeps. When I'm not running the Wonder Forest blog ship, you can find me creating artwork for phone cases and home decor, whilst managing the daily tasks of Dana Fox Creative. Visit me at the links below if you wanna be friends!

YOU MIGHT ALSO LIKE

daily-blogging-tasks
My Essential Daily Blogging Tasks
February 05, 2016
HowtoBuild2
How To Build A Killer Brand Experience
February 02, 2016
Host
How & Why You Should Host a Twitter Chat
January 28, 2016
blogger-failures
6 Common Causes of Your Repeating Failure as a Blogger
January 22, 2016
best-blogging-tips
The Best Blogging Tips Of The Year
December 28, 2015
black-fri-bloggerssm
Exclusive Black Friday Weekend Deals for Bloggers
November 27, 2015
improve-writing
How To Improve Your Writing Skills
November 12, 2015
blogger-to-wordpress
Transitioning from Blogger to WordPress Smoothly
November 03, 2015
blog-wonderful
A Blogger’s Complete Guide to Success
October 27, 2015
  • https://www.blogger.com/profile/16456771159005890671 Talisa Tossell

    This is so handy! This is one of the things i put on my envye.com board! Thanks, Dana!

    http://talisatalksbeauty.blogspot.com/2013/08/free-jo-malone-sample-for-uk-talisa.html

  • https://www.blogger.com/profile/06436881843028034042 Melanie

    that was very helpful thanks alot dana =)
    click to visit my blog

  • https://www.blogger.com/profile/11925400078034072749 Hanna Lei

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

  • https://www.blogger.com/profile/07367812070182538115 Deanna Martinez

    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

    http://www.deannacm.com

  • https://www.blogger.com/profile/12126223327776563791 Adeola Naomi Aderemi

    Thank you so so so much !!!

  • https://www.blogger.com/profile/14001945592294838920 Fee

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

  • https://www.blogger.com/profile/12906884572790317418 thefashionsucker

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

  • https://www.blogger.com/profile/10575300524199474696 Camille L

    Thank you very much!!!

    Camille ❤

  • https://www.blogger.com/profile/03040428465658500028 sarah jones

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

  • https://www.blogger.com/profile/02011722469211535484 Jessica Hobin

    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!
    http://www.thisanalogadventure.com

  • https://www.blogger.com/profile/03851127513094450613 Farah Zeezo

    THANK YOU SO MUCH it looks so good <3

    firozablog.blogspot.com

  • https://www.blogger.com/profile/11808019316354927445 Meghan

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

  • https://www.blogger.com/profile/03996067695874381392 Sarah

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

    Sarah

  • https://www.blogger.com/profile/01226024126682885326 Carlyn Brody

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

  • https://www.blogger.com/profile/13403068891617070698 rebecca-ella

    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

  • https://www.blogger.com/profile/04489349234388812167 One Dollar Milkshake

    Hi there^^,
    Thats soo great, the buttons are so so cute with this ruffled rim 😀
    You are so awesome and your blog is just so so lovely!
    XOXO Abby
    http://one-dollar-milkshake.blogspot.com/

  • https://www.blogger.com/profile/05722895804920873943 simply cintya,

    Very helpful, thanks!

  • https://www.blogger.com/profile/15954649371305103840 daughter of zion

    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!

    Reva
    http://www.daughterziondesigns.com

  • https://www.blogger.com/profile/12182531450493922296 Rebecca Beardsley

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

  • https://www.blogger.com/profile/12817528555247305005 Emma McIlroy

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

    http://theearththroughalens.blogspot.co.nz

    • https://www.blogger.com/profile/14062213234135167030 JustLil’ Ameera

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

  • https://www.blogger.com/profile/03697490512767046885 Lauren

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

    http://laurenslittleblogs.blogspot.co.uk/
    xx

  • https://www.blogger.com/profile/10615045045991021147 Dana Carmella

    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 ♡

  • https://www.blogger.com/profile/02837572149106761161 Rosie W

    Thanks – as always :)

  • https://www.blogger.com/profile/01436140928999221508 StaceyFacex

    Wow! These are great 😀

  • https://www.blogger.com/profile/12140881704853687691 Marianney

    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.

  • https://www.blogger.com/profile/15454432391974314586 Feranmi Thomas

    This was so helpful, just what i'd been looking for.
    http://feranmer.blogspot.co.uk/

  • https://www.blogger.com/profile/01297952431633651622 Louise Gillanders

    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

  • https://www.blogger.com/profile/14062213234135167030 JustLil’ Ameera
  • https://www.blogger.com/profile/17160734493516891973 Cashmere Lace

    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

  • https://www.blogger.com/profile/12775392929816690989 Beth Griffiths

    Thank you so much. That was so helpful
    Beth x
    chroniccosmetics.wordpress.com

  • https://www.blogger.com/profile/17669058800800394439 Jocelyn

    Thank you ! <3

  • https://www.blogger.com/profile/10943179646399270703 Steampunk Suzy

    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.

  • https://www.blogger.com/profile/17276366987272558424 Rebecca Dicken

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

  • https://www.blogger.com/profile/12025946692614032929 Dipster Chy

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

  • https://www.blogger.com/profile/07958371099433341303 Divya S

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

    http://poppadomprincess.blogspot.in/

  • https://www.blogger.com/profile/11809231966213177994 Elle Panteli

    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

  • http://modernladyjane.blogspot.ie/ ModernLadyJane

    I can’t find an icon that starts with <img src=

  • http://polishpals.blogspot.com/ PolishPals

    Thanks so much for the adorable icons! They go perfectly with my blog now. :)

  • http://Ramonaappleseed.blogspot.com Ramona Appleseed

    Help! It keeps saying I have illegal characters. Trying to apply in Blogger.

    • http://thewonderforest.com Dana Fox

      Not sure Ramona, the code above should work just fine. ???

  • Sarita’s Diary

    Woooow beautiful! I have already uploaded the social media icons. Thank you Dana :)

  • http://www.petiteandpale.blogspot.com Rebecca Dicken

    I used these social icons on my last blog and I managed to get them to work perfectly, but I have some new ones and I can’t find a link starting with “img src” and once I finally get the direct link and wrap it in my social links, it ends up going to the icon picture on photobucket rather than my social network page.

    I’m not completely sure what I have done this time haha and I dont know what I can do to fix it.

    Rebecca :)

    • http://thewonderforest.com Dana Fox

      If it’s going to your picture and not your link, you have the URL of the picture inside the “a href” code and not the link to the page

  • Helen Jerram

    Hey Dana! :) Thanks so much for these icons and titles they’re perfect as I’m just learning and creating a blog! 😀 One quick question though what is the name of the font used in the side titles? Helen xo

  • Hebe Young

    I uploaded the icons for the social media onto photo bucket but i don’t know where I can dine the URL? I right clicked but it didn’t give an clues as to where I could find it!

  • danielgrant

    It has a variety of positive aspects: when buyers get into these low quantity words, they’re anxious! They have not found a solution formerly in their searching so if you provide that, they’ll most likely spend cash with you. go to website