In this tutorial I will show you how to add social media icons to your Blogger blog. This tutorial includes free social media icons to get you started.
Join the list to download these free social media icons.
In this tutorial, I’m using Photobucket to host the images. Feel free to use your preferred image hosting site.
1). Upload your social media icons to Photobucket. Keep Photobucket open.
2). In a new window or tab, log-in to Blogger and in your dashboard, select Layout.
3). Select Add a Gadget in your “sidebar-right” area and then select the HTML/JavaScript gadget.
4). In the HTML/JavaScript box, paste the following code (do this for each social media icon):
<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>
5). Head back over to Photobucket and copy the direct link for your icon.
6). Going back to your HTML/JavaScript gadget in Blogger, paste your direct link where it says Image Direct Link Goes Here (do this for each social media icon and keep it within the quotation marks). It should look something like this:
<a href="URL Goes Here"><img src="http://i1079.photobucket.com/albums/w506/beautifuldawndesigns/icon-facebook-51.png" /></a>
7). Now it’s time to add in your social media URLs. Leaving the HTML/JavaScript gadget open, in a new window or tab, head over to your social media profile and copy your personal URL.
8). Now, back in the HTML/JavaScript gadget, paste your URL where it says URL Goes Here (do this for each social media icon and keep it between the quotation marks).
9). Select Save once you’re finished. The finished code should look something like this:
<a href="https://www.facebook.com/BeautifulDawnDesigns"><img src="http://i1079.photobucket.com/albums/w506/beautifuldawndesigns/icon-facebook-51.png" /></a>
Note: If you’re using an email/contact button, place mailto:youremailaddresshere between the quotation makes where it says URL Goes Here.
Happy blogging,
Thanks! This helped me fix my email icon! Should be the easiest, right? lol
Thanks so much for this tutorial!! I found these gorgeous free vintage social media icons and was able to add them to my blog easily because of your great instructions!
http://maepresss.blogspot.com
I am not having luck with this, and Meapress, I want to use your vintage Icons. I am missing how the photobucket is used and where I am getting my direct link. please help. thanks, sb
This is the first tutorial I’ve actually been able to make work! Thanks! Is there a way to change the size of the icon? Mine ended up huge!
I was able to resize the image in photobucket by clicking on the edit button. Then resize, then you can play with the size that you want.
this tutorial really helped me a lot and it actually worked … considering i dont even know html before this. so so happy. thanks a lot.
thank you thank you THANK YOU!!! I was going cross eyed trying to figure out another tutorial before I found yours…a click here and there and voila, I was finished in no time, you ROCK! Giving you a shout out on my blog this coming week!
http://www.leroylime.blogspot.com
It worked perfectly! It’s just how do you get them a little bit smaller????
ohmygoodness! i’ve been trying to do social media icons for-evah!! i’ve been so frustrated the last few hours and i’m so glad i found your site!! all of my buttons work now!! thank you
thanks for this! so easy and helpful! What do you use for RSS Feed for your URL? Thanks much! Julie
Thank you so much, you just saved me the headache of a THIRD try at installing these darn icons! Awesome!
Thank you! You’re a life saver! I’ve been on Youtube for hours with no hope of finding this information. Thank you for helping and sharing. Hoping to have my blog up and running soon. All the best.
Thank you soooo much! I’m so bad a this kinda stuff! You’re tutorial is so easy to understand and very helpful!
Leah @ loveandshorts.blogspot.com
many, many thanks. This was wonderful and super helpful!
THANK YOU SO MUCH!
waw ton of thanks for the tutorial, It solved my problem earlier..
This was the easiest and best how-to for this project! Thank you very much!
Wow, I tried this several other times unsuccessfully using instructions from other sites and it finally worked using your instructions! Thank you!
http://brainstorminbloom.blogspot.com/
Thank you sooo much! Your tutorial helped me so much and this has been something I’ve wanted to do for a long time!
Best tutorial ever. Thank you so much!
Thank you so very much!
This was a great help!
http://www.sproutza.blogspot.com
how do i add the buttons to my blog site? its not blogger, its tumblr if that matters. i have been looking for the link you need to add the image of the button and then making it a clickable link to your website…cant seem to find anything.
This tutorial works like magic to my site www. travelersfootsteps.com. Thanks so much. More power!
Thank you so much!! This was awesome, helped heaps. My blog looks so good thank you!
I spent a day trying to figure out how do to do this before I found your tutorial. Thank you so much for making this simple!
thank you!
Your tutorial was a great help – it was easy to follow and I had social media icons added to my blogs in no time! Thanks for the tutorial!
Thanks for this tutorial! It works like a charm! 🙂
http://www.limited-edition-since2012.blogspot.pt/
Thanks a million! I never knew it could be so simple 😀
For anyone who is having problems with Photobucket, or simply does not want to create an account, use tinypic (tinypic.com). You don’t need to signup. Simply upload the pic, and copy the “direct link”
how i do take care of the checkered background. I love these icons but dont know how to get rid of background! HELP PLEASE
nice post
This was a fantastic, simple walk through on installing the icons for my blog! can’t thank you enough!!
Thank you so much! Definitely a very helpful and well laid out tutorial!
http://www.flyingfarandfree.blogspot.com/
Thank you for this post! I’m new to blogging and this helped me a ton!
Great tutorial! I used it on my blog http://www.my-diy-diary.blogspot.com
Thankyou so so much! .. I really appreciate the help– 🙂
Thanks so much! This was super easy and helpful! My blog looks a million times better!
Thank you for this. It was super helpful!
Thanks for sharing this great tutorial!Awesome and it looks great on my blog….http://placeofmytaste.blogspot.com/
So so so glad I found this – thank you so so so much! #lifesaver 😀
Thank you thank you thank you. We are not even going to talk about how many hours I spent trying to figure out how to make this work. I have linked to this tutorial from my blog. Just plain fantastic!
Dear Tiffany, thank you so much for this excellent tutorial! I was flagged to me by a blogger friend and worked perfectly!
http://www.notjustaprettydress.com
Thanks for a great tutorial! My blog looks so much smarter and neater now!
thank you! Your instructions made it so easy.
Thank you so much for the easy to follow directions!
Thankyou! These tutorials are SO appreciated. AND, the pictures help SO much too!!
Thanks so much! This totally worked for my blog.
prettydubs.blogspot.com
Thanks so much for this straightforward tutorial. xo
THANK YOU SOOOOOO MUCH!!!!
Thank you so much. I was able to successfully create social media buttons but could not figure out how to get the email to work.
Thank you!!
Thank you so much for this tutorial and your free social media icon pack! I found your icons through another tutorial, but this one helped me even more!!
Thank you so much for this tutorial. It was easy to follow and very helpful.
Thanks for such an easy tutorial! I put social media icons on my blog today and could not have done it so easily without your instructions.
Hi! thank you so much for this!! must have the 10th tutorial I tried, and it´s the first who actually works 🙂
After trying many other tutorials I got it! Do you know how I can make icons smaller on blog page? There is no part in code that has width = ##…. I love my icons, I just want them to be a little smaller.
I couldn’t get it to work with the email button. Am I supposed to paste exactly (mailto: YOUREMAILADRESSHERE) where the url is supposed to be. When I did that it, the email icon showed up on my blog, I clicked on the button, and all that did was open my own email program with YOURADRESSHERE in the subject line. Also, am I supposed to put all the html code in one gadget? I think that’s one I’m supposed to do because otherwise they”ll just appear stacked. Yours is the second tutorial I’ve found and it’s way more helpful but I’m still having difficulties 😛 Please help!
Hi,
Thank you so much for the tutorial. I am having a little trouble though. Perhaps you will know what I have done wrong? Ok, so I followed the tutorial, posted the pics to Photobucket, copied the direct link and pasted it in to the blogger HTML and then copied the URL into the HTML as well. Everything looks good on my blog. The social media icons are there and when I hover over them they do show the correct link…but when I click them nothing happens or it says “UNAUTHORIZED” (when I click pinterest) and it says “UNTITLED” at the top when I click Email. I am at a loss. I don’t know what I have done wrong. Please help me if you can. Thanks so much!
http://www.a2ndlifevintage.com
Sam
Such a great tutorial! Thank you!!!
I can’t find my blogspot RSS feed URL…do you know where I can get this information?
Thank you so much!
Amanda
http://whathopesanddreamsaremadeof.blogspot.com/
amandamacy.hall@gmail.com
THANK YOU so very much for an easy and concise tutorial! You have helped me tremendously! I was getting a headache looking at some of the other tutorials on the web. 🙁
Hi Tiffany,
thank you for that tutorial. Loved it. So easy to follow.
Can’t wait to have the little icons up and running…
Cheers
Nadine
Hi, thank you for the tutorial!
I was able to get the icons up but they are not linking to the sites. How do I get them to go to the sites when clicked?
Thank you!
So easy to use! Thanks so much for this great tutorial!
Thanks! This was so easy once I found your instructions.
Oh my goodness thank you so much for this great tutorial on how to put social media icons on Blogger. I have spent hours on the net following tutorials that didn’t work! Yours is perfect! I am pinning this to Pinterest right now! Thank you, Thank you, Thank you!
Thank you so much! This worked so well and was so easy to follow!
Thank you for the tutorial, but how do you make the icon images smaller?
THANK YOU 🙂 I have been looking for this for ages and now it is fixed!! thank you very much, I will keep on browing your site, I think I will find other precious help!
thankyou so so much this is an amazing tutorial worked first time 🙂
Thank you so much for such an amazing tutorial! I have been wanting to add these buttons to my blog forever, but never found a tutorial I could follow! I really really appreciate it!
Hi Tiffany,
Thank you very much for this fabulous tutorial. It was easy to follow, however i had my pictures uploaded on Flickr and now though the code is correct the pictures appear like a cartoon landscape picture(!)
I dont know what is wrong!
x
Thank you!!! So simple & easy to follow after being so confused why I couldn’t get this to work originally!
OMG thank you so much for this awesome tutorial !!!!
pnktini.blogspot.com
Hi all – I guess this is a pretty dumb question… but i am having trouble with the first step! When I am saving them, it’s saving ALL of them as one photo as opposed to the individual icons. What am I doing wrong?
babystepsinbabymaking.blogspot.com
Worked wonderfully! Thanks!
Thanks for these buttons! I used them on my blog and think they look so nice. 🙂 http://cosycarolina.blogspot.com/
Thanks a million! This was a great tutorial! :o) I’m so happy that I added my social icons to my blog now!! YAAAAY!!!
SOOO helpful! Thank you times a million!
Thanks for these great instructions!
I posted a link to your post on my blog. Thanks so much for sharing!
Mrs. Lopez of http://lovinglifeinpink.blogspot.com
http://lovinglifeinpink.blogspot.com/2013/05/new-blog-bling.html
Thank you so much! You’ve saved me! I have one question though- is there any way to resize the icons with code without manually going in to edit each picture? I tried adding in one code to do that, but it just was not working and I had to redo the entire thing! As you can see on my blog, I definitely need it to be tweaked! http://www.subscriptionmaven.com
Thank you so much for such an easy to follow tutorial! Love it! BlueKiwiCat @ readingandlaughter.blogspot.com
This is a great big “THANK YOU” for this wonderful tutorial. I’ve been wanting to add the Social Media Icons for a long time, but other tutorials I’ve read just made me more confused. Yours was so straight-forward and easy to follow. Thank you so much!
Thank you so much! This tutorial really helped me.
http://cashmereconfession.blogspot.com/
Thank you so much for this!
Thank you beyond words!!!! I’m so excited, because of you and your easy well directions… it’s working for me!!! I’m so happy! Thank you!!
Wonderful tutorial! I’d been meaning to do this forever and the instructions were so easy to follow.
http://www.CareyOnLovely.com
Wow, I thought this was going to be a lot more difficult. Thank you so much!!!
Julie @ wideworldofspeechtherapy.blogspot.com
Yay! I just did it! Thank you so much =)
Thank you SO much!!!!
Thanks so much! I keep putting off adding buttons because I had no idea how to do it! You made it so easy!
So useful and clear – thank you very much. (I found you via carrieloves)
Hi! Thank you so much for your wonderful tutorial! I spent about 2 hours working on adding my social media buttons from another site and gave up. I found yours and installed them in 15 minutes! You rock!
I do not know whether it’s just me or if everybody else encountering problems with your site. It appears as though some of the written text on your posts are running off the screen. Can somebody else please comment and let me know if this is happening to them too? This might be a issue with my browser because I’ve had this happen before.
Kudos
You are a dear! Many tnx for breaking the art of placing social media icons on blogs; You really simplified it for me. No where else have I gotten a self-explanatory break-down which I was able to comprehend like yours. Bless you! 🙂
I’m somehow still having trouble with the email icon. I received a “Sorry, page not found” notice when I inserted my email address where “URL Goes Here”. Any suggestions?
Love this tutorial, but I have a quick question: when using the RSS Feed icon, what do you put in for the “URL Goes Here”? Thank you!
Please!! I need your help! I´ve tried it a number of times – and this is what I put in the content box
1
And nothing happens – could you please let me know where I´m going wrong? Thanks very much!
Thnx fo sharing.
It took me 2 weeks to find out.
With you tutorial half an hour !!
Grtz,
Chris
I’m having trouble uploading the icons to photobucket, I’m not really sure what I’m doing wrong, any tips?
This is amazing! Thank you so much for posting it! I can’t even begin to wrap my head around HTML so I’m glad I found this so I can still have a cute blog! 🙂
Great tutorial! I followed all of the steps and the buttons look great on the site. However, when I click directly on the Facebook, Twitter, and Pinterest social media buttons – it simply goes back to my website domain with a blank page. However, when I hover my mouse over the button or right click to open the link in a different tab – it leads me to the correct social media page.
Has this issue happened before? Do you have a way of solving it? Thank you!
Wonderful tutorial thank you, it worked perfectly!
http://greenpenguincrafts.blogspot.co.uk/
Great tutorial – now have pretty pink social media icons on my blog!
http://www.whatilovetodayx.com
excellent tutorial, I loved it and I will use it right away on my blog
Thank you for this post…….
like the way u explained 🙂 .But my problem is still there, just look at my site IP Definition. Actually I want an html code for the social media button to appear in this navigation menu. Will you please help me!
After a day and a half of twiddling about on the net, almost tearing my hair out….I now have my social icons in place and looking terrific. Thanks so much for taking the time to explain all these things for us non-technical people.
I’m in the process of giving my blog a 100%-DIY makeover, simply by using online tutorials and free widgets/sites. It’s starting to look really good (if I say so myself!) and I’ll soon be sharing with others how I did it, and will include a link to this article.
Thanks again,
Kate
http://www.thelifeandtimesofanordinarygirl.blogspot.com
Thank you for this post, I got it right the first time, which is amazing with my HTML skills. THANK YOU!
Thank you Tiffany!! We’ve tried for so long to put up social media buttons on our side bar, but we’ve never managed to until we found your post!! We’ve tried so many tutorials, but most are too confusing or don’t go into enough detail! Your steps are the right balance of everything and thanks to you, we now have social media buttons!! Definitely sharing this post with our friends!
Check out our website to see the buttons!!
http://www.mkstyleramblings.blogspot.com.au
Thankyou for such a great and helpful tutorial!! <3
Happy Weekend!! 🙂
Love
Charu
http://www.myglossyaffair.com/
Thank you. so simple to follow. really pleased that I have finally managed to do it 🙂
Thank you so much! This works properly for me. You can check mine at http://myesemsy.blogspot.com/ 🙂
aaagh! my icons have come up but i can’t seem to click it?? where have i gone wrong???
Thank you very much your tutorial was the first that did work on my blog. Thank youuuuuuu veeeeeeery much!
xoxoxoxoxoxoxoxo Sofia
Thank you so so much. I went through 6 tutorials before trying yours. This is the easiest by far.
That’s awesome Delia. Glad I could help!
THANK-YOU SO MUCH TIFFANY! You have no idea how many months it took me to figure this out. You made it extremely easy for me and you are GOD SENT! I really can’t thank-you enough for this extremely helpful post! I am currently re-vamping the layout of my blog! Have a great day! http://beautybyberrz.blogspot.ca
I’m happy this tutorial helped! 🙂
Finallly thanks to you my social media links look so fancy. I hav ebeen dying to do this for months but couldnt find correct links anywhere. Thank yo uso much. Much love. My blog is http://www.nadiyanajib.com do visit.
How to crop these icons?