How to Add Social Icons to Your Blogger Blog
Do you want to add social media icons to your blog so that readers can find you elsewhere on the web? Here are step-by-step instructions.
Overview: You will add an "HTML/Java Script" gadget to your sidebar, and these instructions will walk you through writing the HTML code. I'm no HTML expert; if I can do it, so can you. The idea is to link publicly available images of social media icons (which you will host on Photobucket) to your own social media pages.
Basic Tutorial
Step 1: Find a set of icons you like.
Google "free social media icons" and you'll find great links to free icons. Here are two I like: The Ultimate Roundup of Amazing Free Social Media Icon Packs and 50 Free Social Media Icon Sets. Download the set of icons, which often include different sizes. The buttons I use are 32 x 32 pixels.
![]() |
Circular set I used to use from Blog Perfume. The new set I use is at BrandiGirlBlog |
- Open a Photobucket account if you don't have one. Set it to public.
- Upload the specific icons you want to use to your account.
Step 3: Write HTML code that will link these images to your social sites.
- Open a separate text file or word document to write your code.
- The code for each icon will follow the format below (in this example, the red link is my Twitter page and the blue link is my Twitter icon on Photobucket). The rest of the steps will show you how to create this code.
- To get this code, go to your Photobucket account. Go to the image you want on Photobucket (e.g., Twitter icon), click on it, and you will see a box like this on the right part of the page. Click your cursor inside the third box that says "HTML code." This will copy the code, but you will need to tweak it a bit.
![]() |
click on the third line (HTML code) |
- Paste the code into your working document. It will look like this:
- Replace the first link (the one highlighted in red) with your social media link. To get your social media link, go to your site (Facebook Fan page, Twitter profile, etc.) and copy the address from the browser bar. Your finished code for one social icon will look like my Twitter code above.
- Repeat this process for each social icon you want to use. If you have three icons, Facebook, Twitter, and G+, you will have three paragraphs in your code. At the end of this post are instructions for a more sophisticated look and specific instructions for an RSS feed icon.
- Copy the entire finished code. You will be pasting this into your Blogger gadget.
Step 4: Post the code onto your blog.
- In Blogger, go to Layout --> Add a Gadget. I recommend placing the gadget in the upper part of your sidebar.
![]() |
- Find and select the HTML/Java Script gadget.
- Paste your code into the Content box. You can leave the title blank, or you can add a title like, "Find me on the Internet" or whatever you want to say about your icons. I think most people understand what the icons mean, so I don't use a title.
- Save and you're done. Admire it on your page. (And check to see that the links work).
Advanced Tutorial
1. Code for RSS Link
Before adding an RSS icon, you need to create an RSS feed. (An RSS feed is a way to syndicate your content. Readers subscribe to your feed and your posts show up in their readers of choice).
- To create/find the link for your RSS feed, go to www.feedburner.com. It may ask you to sign in with your Google account. Look for a box that will offer to burn a feed for you instantly. Insert your Blogger address and hit "Next." You will then see a screen like this:
- Pick a name for your feed address, then hit "Next." Feedburner will confirm that your feed address is "http://feed.feedburner.com/nameyoupicked." This is the link you use for your RSS icon (it will go where the red link was in the HTML code).
2. Create a text that appears when someone hovers over your icon.
If you hover over the icons on my website, you will get a message like, "Follow me on Twitter" or "Follow me on Pinterest." To get this effect, add the following (purple) text to your HTML code:
3. Add spaces between your icons.
If you find the icons look too squished together, you can add some space between each icon by adding the following at the top of your code. Play around with the number of pixels to change the spacing (this code sets it at 3px):
4. Center your icons.
If you want to center your icons, add the blue bolded code in front of your first paragraph (your first set of icons):
Hope this has been helpful. If you're an HTML expert and have an easier way to do this, please let me know. Let me know if you have any questions or issues with these instructions. Thanks!
If you enjoyed this post, you may also like:
- Five Ways to Increase Your Page Views
- 8 Ways to Make Your Blogger Blog Look and Act Like a Website
- Improve your Blog's SEO Title Without Giving Up Your Creativity
Awesome, I learned a lot reading your write-ups. To test it, I'm gonna use my newly created blogger blog. Thanks!
ReplyDeleteThank you for stopping by...hope it works out for you.
DeleteHere is a sorted reference of social icon sets with description, size, file type and download link sorted icons sets You might find it useful.
Deletenice info Obat Bius
DeleteI tried it on mine. The first Social icon I tried here on my blog:
ReplyDeleteCash for iPhones Review
Thanks so much!
Very nice... I like the ones you picked.
DeleteGlad to came across your blog, thanks!
DeleteMari Bergabunglah Bersama MandiriQQ, menawarkan Berbagai Jenis Permainan Menarik.
Delete1 ID untuk 7 PERMAINAN ( NEW GAME : BANDAR SAKONG!!! )
Dapatkan Berbagai Bonus Menarik dari MandiriQQ..!!
- Bonus TurnOver 0.5% tiap Minggunya
- Bonus Referral 20% Dibagikan Setiap Minggunya.
- Minimal Deposit hanya 20 Ribu
- Minimal Withdraw hanya 50 Ribu
Untuk info lebih lanjut Silahkan hubungi Cs MandiriQQ
PIN BBM : 2BE2B4BA
Line : mandiri_qq
yahoo : mandiriqq@yahoo.com
Link : | www.mandirikiukiu.info
Me, too! I am going to try this out - I always wondered how to set up buttons like yours! Cool!
ReplyDeleteThank you for the great tutorial!!
ReplyDeleteHi! Love this! Just a question...where's the Pinterest icon that you use located? It's not in any of the sets that I looked at, including the one on Blog Perfume.
ReplyDeleteIf you Google, "Pinterest social icons," you should find some square icons. The round one I made from the one that Pinterest provides (I used Photoshop to scale it down to the same size as the other icons). If you would like a copy of it, please send me a note in the "contact me" section, and I'll email it to you.
DeleteThank you very much! I was going crazy till I found this, SO happy now! :)
ReplyDeleteI havent done it all yet, but I'm very satisfied for now, check it out if you'd like
http://coffeewithmel.blogspot.com/
Very nice, I like them!
DeleteEasy to follow and works perfectly. Thanks!
ReplyDeleteGreat!
Deletethank you
ReplyDeleteThanks for stopping by.
DeleteIt hasn't worked for me, not sure what I have done wrong!
ReplyDeleteHi Twilight Creative, I just checked out your site and it looks like the icons worked. Let me know if you have any questions.
DeleteMine won't work :/ The thing thats confusing me is what do I replace with the red coding? like my twitter.com/username ?Thats the part of the code that throwing me off :/
ReplyDeleteYes, go to your Twitter home page and copy the URL that is in the browser bar (that way you make sure it is an active link that goes to your page. For example, when I type, http://www.twitter.com/username, the address automatically changes it to a secure https). That address is what replaces the red coding. Make sure you keep everything else the same (all carets, quote marks, etc). P.S. You can contact me through the "contact me" page with any additional questions.
DeleteThanks Sylvia for the lovely post. worked great for my blog
ReplyDeleteThanks for stopping by. Your blog looks great.. I'll have to try some of those yummy looking recipes.
DeleteThanks! :)
ReplyDeleteYou're welcome!
DeleteTHANK YOU! YOU MADE MY DAYYYYYYYYYYY
ReplyDeleteThank you!
DeleteHi Sylvia, I just used this tutorial and it worked perfectly. Your instructions were so clear and precise. Huge thanks :)
ReplyDeleteAwesome; glad to be of help.
Deletethank you so much for this. you are my hero.
ReplyDeleteAww, thanks!
DeleteWow ! Thanks, that was perfect.
ReplyDeleteCool, glad you stopped by!
DeleteThank you so much for doing this tutorial!!! So easy! However my buttons are HUGE. When I saved them they weren't that big but on my blog they are in a colomn rather than a row, I guess because there isn't enough room. I don't know enough about HTML to figure out how to fix that. Any suggestions?
ReplyDeleteWhat may have happened is that you downloaded the buttons in a large size. Button designers will offer different sizes (64x64, 32x32, etc.) The size I use is 32 x 32 pixel, which is pretty small. If you have Photoshop, you can resize your images. Otherwise, try going back to your downloaded icons and see if there are other smaller sizes available. Good luck!
DeleteThanks so much! This was so easy to follow for a complete newbie like me!
ReplyDeleteI'll be sure to recommend it to others! :)
Thanks!
Deletenice article thanks.
ReplyDeletedo visit my blog www.thegeeksolutions.in
Thanks for visiting!
DeleteAll You LikeHi there, I discovered your web site via Google even as looking for a similar topic, your website came up, it appears to be like good. I have bookmarked it in my google bookmarks.
ReplyDeleteThis was so great! I was looking for a way to put some buttons on my blog and this was reaaally helpful :)
ReplyDeleteThank you so much! Your instructions are super clear and extremely helpful. My new blog design will soon have really cool classy and tidy look! I can't thank you enough :).
ReplyDeleteHave a great weekend!
Thank you thank you thank you sooo much...broke my head over this fr hours last night..and with your help i finished it in a matter of minutes...thank you
ReplyDeleteThank you for making this so easy. Until I read your site I've been at it for 3 hours, banging my head against a wall. Now I have two shiny new social media buttons on my site. So Proud.
ReplyDeleteThank you!!!! Brilliant.
ReplyDeletemy only problem was that the older sites with icon sets don't have pinterest on them...so i found another site through google. but the instructions were perfect! thanks.
DeleteThank you, thank you, thank you! It worked!
ReplyDeleteYou're welcome! That was my reaction too when I learned to do this. HTML is a bit of a mystery to me, but it's like baking a cake. Follow the recipe, and voila.
DeleteThank you so much for this. Until I found your post I was pulling my hair out! I followed your instructions and 30 minutes later it was up and running.
ReplyDeleteHappy to be of help!
DeleteThe same as Ellie happend to me!!
ReplyDeleteTHANK YOU!!! :D
You're welcome!
DeleteThank you! Thank you! Thank you! God send!
ReplyDeleteThanks for sharing! Your instructions were easy to follow.
ReplyDeleteI tried doing this and my site looks great with the icons, but for some reason it keeps trying to direct each link to a page ON my blog and says that the site is not found. I followed your instructions exactly! What went wrong?
ReplyDeletehttp://brightsycamore.blogspot.com/
Thanks for stopping by! I just checked your site and clicked the buttons. They worked fine for me...took me to your Twitter, Pinterest, etc. pages. Looks great, by the way!
DeleteHi Sylvia! Thanks for this awesome post/tutorial! Just wondering, do you have any post about how to create a hover effect for social media icons? Thanks!
ReplyDeleteHi Mina, Thanks for stopping by. It's not a full tutorial, but if you look above at my advanced tip #2 ("Create text that will appear when someone hovers over for icon"), you will see the code that I use for my buttons to create that effect. Just add the text that is highlighted in purple into your HTML code, and change the text appropriately for each type of button. Good luck.
DeleteThanks so much! I've tried so many different ways, write-ups, tutorials, etc on how to do this with a specific set of social media icons that I wanted to use on my blog ... your tutorial was the magic one. So easy to follow! Def'tly going to take a look around your blog to see what other helpful hints you have shared. best-jenn
ReplyDeleteAwesome. Thanks so much for stopping by!
DeleteThis comment has been removed by the author.
ReplyDeleteThank you. I like your site...very cheery!
DeleteGreat thank you. I got that working. Do you know how to open the links in a new window?
ReplyDeleteI don't know how to do it specifically. When I test my own social icon buttons and some of the other ones from the people who commented here, they open up in a new window for me. Perhaps it has to do with your general Blogger settings?
Deletegadgetsgods.blogspot.in is the blog only on gadgets u like
ReplyDeleteHi, great tutorial but for some reason, I seem to be having some problems. I followed your instructions to the T but the hover box will only display one word of my text and when i put the quotation marks over the whole of my text i.e "follow me on twitter" it won't display any of the text. I don't know what has gone wrong. Please can you help? My blog is:
ReplyDeletehttp://www.ohsewfashion.com
Thanks x
If you send me your code (use the contact form above), I can take a look at it to see if I can help. The buttons look great though!
DeleteThank you! I just sent you the code. I really appreciate this x
DeleteThank you! It works perfectly.
ReplyDeleteThanks to this tutorial. I learned a lot/ More Power! :)
ReplyDeleteYour directions were very helpful, except when I tried it and then clicked on my pinterest button it says the page does not exist. Any ideas?
ReplyDeleteIf you send me the code you used (go to my Contact Me tab above), I can take a look and see if I can help. Also, send me a link to your Pinterest home page (where your boards are).
DeleteThanks for replying. I'm on my way out the door now, so will do it when I get back.
DeleteThanks!
ReplyDeleteHello Mam can you say how put your Categories wedget?
ReplyDeleteThe categories widget is actually the "Labels" widget. When you write a post, make sure you add labels to each post. (At the side of the draft page, there is a column titled "Post settings," click the "Labels" and write any keywords you want about the post, whether it's a category or a topic). Then in the Layout section, click "Add a Widget" and find the "Labels" widget. When that opens, you can change the title of the widget (I changed it to "Categories" which I thought was more descriptive than "Labels". You can call it anything, from "topics" to "index" etc). Then just click the options you want (you can show all labels, or selected labels, and you can list them or feature them as a cloud, as I do). Blogger automatically gathers the information from all of your posts and will display your labels for you. Hope this helps.
DeleteThanks for reply, Yes I understand mam! Today is Diwali festival here in India, So happy Diwali to you and all of your family.
DeleteHappy Diwali to you and your family too!
DeleteOne question. When you start receiving high traffic after starting your blog?
DeleteI started this blog in April 2010, but didn't really start to post seriously and consistently until about a year and a half later in September 2011. At that time, I took several steps (which I describe in my post, Five Ways to Increase Your Blog views, http://www.sylvialiuland.com/2012/10/how-to-increase-your-blogs-page-views.html) that immediately started getting me more views. It still took a year of steady work to keep getting more views on a slow, incremental basis.
DeleteUPDATE: Feedburner no longer supported by Google
ReplyDeleteThanks for the update. As I understand it, Feedburner still works but Google may be phasing it out, starting by eliminating some support for developers. So far, it still works for a basic blogger's purposes, but the writing is probably on the wall that it may be on the way out.
DeleteThanks, thanks, thanks!!! I can't say it enough...you ROCK!!!!!! So easy and straightforward. A huge help for html newbies like me. More power to you!
ReplyDeleteThanks so much, this tutorial is so great :)
ReplyDeleteYou my new friend are amazing! I swear I have tried a million different HTML codes and NOTHING worked except yours! I have no idea if it was me or them but yours was super easy and you're the best! Thanks so much!
ReplyDeleteAs newbie in blogger, this article mean so much for me. thank you for this guide. I'll follow it
ReplyDeleteThank you very much!
ReplyDeletenice post
ReplyDeleteThank you so much for the tutorial, I was wondering if you have an extra piece of code for aligning them to the center, I manage to have the space between them with the explanation you wrote. Can you tell me how to center them on the sidebar. Thank you! http://ushiche.blogspot.com
ReplyDeleteHi Marielle,
DeleteYour blog looks great. I wasn't able to put the suggested HTML text in these comments, so I edited the article. Go to the end of the "Advanced Tutorial" section for instructions on how to align them to the center.
Thanks for stopping by!
Sylvia, thank you so very much for taking the time to write about this topic. This well thought out post is very clear, concise and informative. The only icon code I needed to find elsewhere was for email (just in case you would like to add that instruction to your collection. I appreciated this; my Blogger blog looks so much better now!
ReplyDeleteYour blog looks great. Those social icons really pop. Thanks for stopping by.
DeleteThis tutorial was VERY helpful. I am not a fan of coding. So to be able code some nice icons to my blog really has given me confidence to try some harder stuff! Thanks! -Desiree
ReplyDeletehttp://desireefrey.blogspot.com/
Thanks, Desiree. Your blog looks great, and thanks for the link back.
DeleteHey I saw your site, it is very beatiful and eye pleasing do suggest some tips to me.
Deletehttp://prasantmishra.blogspot.com
Sylvia,
ReplyDeleteThank you so so much for your help with this!!
I looked at different website on how to add the social buttons on blogger, I and can honestly say that your post was the easiest, best explained and definitely most helpful!!!
I'm really happy with the way my icons look, and although your suggestions were really good ones, I would like to share the website where I found mine, just in case other bloggers are interested! ;)
The icons are simple, but come in all different colors which is pretty neat!
http://www.carrieloves.com/2012/12/free-social-media-icons-updated/
Thanks again for such a great article!
Sandie
@ http://lifeinpositudiness.blogspot.com/
wow nice blog
ReplyDeletehttp://ramalingamaero.blogspot.in/
Thanks!
Deletelove it
ReplyDeleteThanks!
DeleteNice, and thanks. :)
ReplyDeleteThanks for stopping by!
DeleteI tried to do this but I am getting little rectangles and not a button? Any help would be appreciated! Thanks :D
ReplyDeleteWhy don't you send me your html code through the contact form (above) and I can see if I can help.
DeleteThank you again! I have done so many searches trying to find instructions. I found this when I found you article about adding a contact page.
ReplyDeleteGlad it was helpful.
DeleteI didn't think it was possible, but I did it! Thank you for your easy to follow instructions! I don't think I love the one's I picked but now that I know I can do it, I can find some that might look even better, I kind of like the one's that say follow me along side the icon. Thanks again!
ReplyDeleteHere's my blog www.reallifeformom.blogspot.ca
The icons look nice!
DeleteI keep coming back to this post to use this technique on all my blogs. It's so easy and straight forward! Thank you for this! http://twoityourself.blogspot.com/
ReplyDeleteThanks for stopping by; glad you have found it useful!
DeleteThank You! All of your tutorials are so helpful! I was able to do it on my blog here... www.california-diy-diva.blogspot.com BUT how do I do the email one?
ReplyDeleteHi Kay, thanks for stopping by and I apologize for not responding earlier. I haven't tried this yet, but here's a link that may help: adding an email icon
DeleteAbsolutely great, thank you very much! :D
ReplyDeleteYou're welcome. Thanks for stopping by.
DeleteThis was just what I was looking for. Thank you sooooo much! :D :D :D
ReplyDeleteThanks for stopping by. Glad it was helpful!
DeleteFor some reason, the icons do not show up on my blog and I have followed your steps perfectly....
ReplyDeleteIf you want to send me your code that you have written (use the contact form on this blog), I can see if I can help you. Also, send me the link to your blog.
DeleteI tried to contact you by email, but it didn't work. The issue is that you are using a dynamic template, and I don't think they support the HTML widget. If you use a static template like Simple, your code works fine. Sorry I can't be of more help.
DeleteGreat information......
ReplyDeleteI want to tell you that I am new in the field of blogging so I don't know much.
Can you please tell me how I can add categories and sub categories to my blog..
Mail me at ashishrana941@gmail.com
Thank you
Hi Ashish, I sent you a separate email with some suggestions. Hope they help.
DeleteI followed your instructions step by step but I don't see any icons on my blog... I'm new at this.. stylishego.blogspot.com. Please help! I adore your blog! Thanks for providing incredible for information for new bloggers as myself!
ReplyDeleteHi Bri - I just checked out your blog. It looks great, and it looks like you figured out the buttons.
DeleteHey!
ReplyDeleteI followed these instructions, because I am trying to amp up my blog, but I can't figure out what I am doing wrong.
My issue is that when I go to add a gadget, I get "gadgets" "more gadgets" and "add your own". I go to the add your own, and the thing is an http:// and then the code I want to put in. When I put in my codes it says that my link contains illegal characters.... I'm not sure what I am doing wrong! Can you help?
Thanks
you add HTML gadgets that already exist in "Basic" section, not "add your own", i just installing my icons as well and it's working like a charm: my first icon can be seen here: http://ciupercomania.blogspot.ro/
Deletebut as i stay and thinking ... i think there is a more easy way to add our icons, without image sharing sites and such. how? simply post as image (with gadget >>> image) and hide a link behind. i'm mistaken anything?
You could post it as an image but then your icon would not necessarily be the size you want it to be and you wouldn't have several icons next to each other. It's worth trying it out though.
DeleteHey! Just wanted to thank you so much for this post! I am over the moon now that I have icons on my blog :D xx
ReplyDeletewww.gemstrends.blogspot.co.uk
Glad this was useful to you. Your blog and icons look great.
DeleteTruly nice and useful tutor. Thanks for sharing.
ReplyDeleteRegards
Spicy Tech Tips
good tutorial, bad student :(
ReplyDeleteDo you have any specific questions? You can use my Contact form.
DeleteThank you
ReplyDeleteGlad this was helpful and thanks for stopping by.
DeleteBig THANKS and HUGS! I've managed! Now all social icons are on my blog! GREAT! Thanks again! and be my guest! www.laremise238.blogspot.com
ReplyDeleteVery nice looking blog, and the buttons match nicely. Glad this was helpful.
DeleteThis has worked perfectly! Thank you
ReplyDeleteThank you for stopping by!
Deletereally helpful post for beginner ..thanks.Fashion Elongation
ReplyDeleteThanks!
DeleteHey check this out I got another set of really great social media follow buttons. i am loving it.
ReplyDeletesource:http://weblogcode.blogspot.com/2014/01/attractive-social-media-icons-for-website.html
Thank you SO much! This was unbelievably helpful for my blog.
ReplyDeleteGREAT post!
-Adrienne
theprepsterlife
So glad it was helpful!
Deleteust wanted to thank you so much for this post! I am over the moon now that I have icons on my blog.. !! :)
ReplyDeleteAgen Poker Online Indonesia Terpercaya
Thanks for stopping by!
DeleteI always wondered how to set up buttons like yours Jersey Indonesia ! Cool!
ReplyDeleteWow, amazing tutorial. Thank you very much for this info on putting social icons, nice and perfect for my legal blog.
ReplyDeleteGlad it was helpful!
DeleteGreate pieces. Keep posting such kind of info on
ReplyDeleteyour blog. http://www.hukumislam.web.id/
this is good article and this is working
ReplyDeleteplease check my site with video tutorials
http://riqqle.blogspot.com/2014/10/how-to-add-social-media-icon-for-blogger.html
Hi Sylvia Liu,
ReplyDeleteI love your article, Today I decide to social icon on my blog, and searching many query on google finally I found you post, truly your post prove very helpful and i easily add social icon on my blog by help of your article ..
Thanks for you article..
Regards
Mohd Arif
Thank you so much for stopping by and leaving your comment. Glad this was helpful!
DeleteI see other blogs with the icons on the tabs row. I want to do the same, but I don't know how. Do you know by any chance? http://www.thewonderforest.com/p/contact.html For example, this blog right here.
ReplyDeleteI'm sorry, I don't know how to do it on Blogger, but that's not to say it can't be done.
Deletethanks you so much... this is nice share...
ReplyDeleteI tried this however, I got 3 issues: the icon is too big, the width="50px" etc.. shows right next to the icon on my page, and although I put my facebook URL in the code it doesn't go to my facebook page instead it goes to my Blog site, although I am 101% sure I put my facebook url, I did it many times too. Still didn't work, can do I do?
ReplyDeleteSorry I did not respond earlier. If you are still having this issue, please email me at artbysylvialiu (at) gmail (dot) com and I can help you figure it out.
DeletePlease I want to know how to place your AdSense code in between your post on your blog using blogger
ReplyDelete