If you’re like us, you’re on pretty much all of the social networking sites. Facebook, Twitter, Instagram, Tumblr, Pinterest…there are so many out there, and you probably want to link to all your profiles from your blog sidebar, right? Here’s a simple tutorial on how to do that!
First, you’ll need your icons. You can, of course, make your own, but there are so many out there already made for you – check out our Pinterest board for a growing selection that you’re bound to find one to suit you. For this tutorial, we’re going to use the icons provided here by CarrieLoves (which are awesome – pretty much every button in every colour you can think of ever wanting – including glitter!)
Once you’ve got the icons that you want to use (or at least the top five or so), upload them to wherever you upload your images to and copy each image URL. (If you don’t have anywhere in particular to put your images, you could upload them to a Flickr account then check out our Providing a Blog Button post which explains how to find the image URL of a Flickr image)
For each icon that you want to add to your site, you’ll need the following HTML:
<a href="SOCIAL MEDIA LINK"><img alt="ALT TEXT HERE" src="RELEVANT IMAGE LINK" width="50px"></a>
Replace the “Social Media Link” part with whichever profile you want to link and put the image URL to the icon that relates to that profile. Replace “Alt text here” with something like “Follow me on Twitter” – this will help visually impaired readers understand what that icon is for. For example, here’s what we’d write to link the Twitter icon above to our Twitter profile:
<a href="http://www.twitter.com/bonjourblogger"><img alt="Follow us on Twitter!" src="http://www.bonjourblogger.com/wp-content/uploads/2013/05/twitter.png" width="72" height="72" /></a>
Repeat as necessary until you have a block of HTML for each profile. Put it all together, and leave no spaces between it if you want the icons to appear in a row.
If you’re a Blogger user, go to Layout, and add a gadget. The gadget you’ll need for this is called “HTML/Javascript”. In the title bit, write what you’d like to appear as the title – perhaps “Follow Me!”? In the Content section, paste the HTML you’ve amended for your own site.
If you’re a WordPress user, then from the Dashboard, click on Appearance then Widgets. Drag the HTML item to your sidebar, paste the HTML for your image in and click save.
Finally, check out how they look! If they’re a little bit too big for your sidebar, you can adjust the size by changing the width of the image – in the example HTML, that’s the part that says 50px.
Let us know how you get on – and if you’ve got any links to free social media icons, share them in the comments as well!
Ooooh, I am loving this! I have only recently started a new blog on Blogger and there are so many things that I’m struggling with… Thank you, thank you, thank you! for this is all very helpful, especially to us newbies :) Now I don’t have any more excuses and I will have to get myself some social media icons!
Awesome! Give us a shout on Twitter if you need any help – and if you have any other questions :)
Yea me too Maree :) Thanks to these guys we are getting a hang of this! :)
I have another doubt as I am posting this comment I can see my latest post title ticked below…Have done anything wrong with my settings?
Your comment is fine! We have a little plugin on WordPress that goes to your blog and gets the details of your last blog post, so when other people comment, they can click through to read :)
ahhh okok :) ty again!
and I love the little heart that comes with ur plugin too :)
How do you keep the icons to arrange side by side?
Hi Jena,
You would just keep the html as one block, so no gaps or line breaks between each icon set. This should keep everything in one row! Or you could put the icons you want as one image and use our image mapping tutorial to map the different items
I tried following the tutorial, and it’s so confusing. Between the image and base URL’s, and trying to figure out why the links wouldn’t work I threw in the towel. I wish this was easier :(
Hi Alisa,
Sorry you’ve not had any luck with this post! Which part are you getting confused with?
Oh super, thanks so much for that! We’ve been meaning to add new buttons to our site for aaaages but in my head it was an absolutely huge job. This makes it seem much more manageable!
So glad this helped you!
Helped a lot, thanks!
Lovely post!!!
At last I found your site and it worked perfectly!
thanq :)
Hi,
I’ve managed to get the links up there to the icons but the pictures are coming up as broken images? How do i correct this? I used flickr to upload my images. Is there something I’m doing wrong?
Thanks in advance.
Nicola
It sounds like the URL for the image isn’t right. You can find the image URL on Flickr by clicking the square with arrow coming out. Make sure you choose the HTML option, and on the dropdown, choose the original size. The image details are the tag that starts <img src=””>
Hi! This tutorial is awesome but i’m having trouble! When I copy and paste the code in and save it, the icon appears, but when I click on it it adds my own blog’s URL to the front of the link so that it goes to a page on my blog saying ‘this page does not exist.’ i have tried it a billion times and i don’t know what the problem is! ack!!
nevermind figured it out!! i needed https:// before the links.
Nice post…..thanks a lot…
THANK YOU!! I wasn’t happy with everyone’s adjusting of my blog, and I’ve finally learned out to do it myself!!! Feeling proud and loving the simple explanations!!
I’m trying to do it on Tumblr and I’m struggling! Please can you help? x
I’m not too hot on Tumblr, but the easiest way I found to do it was to create the links for your icons (so getting the code together with all the profile details you want to show on your page), then paste that into the description section. I’m sure there’s a much better way to do it, but it’s probably quite specific to each theme :)
Hopefully this image makes it a bit clearer what I mean…
Great post!
I’m wondering if you can help me get my social media icons in one row. No matter how small I make each icon, after three it cuts to a new line. I’ve tried leaving no gaps in the HTML. Nothing’s working!
My blog is: http://www.shelbichic.blogspot.com
Any help or advice would be greatly appreciated.
Thanks,
Carissa
It looks like you’ve sorted it now! I suspect that the images that you were using were bigger than the ones you have at the moment, so only three would fit in the width of your sidebar.
It works perfectly!
Just one question: is it possible to have the links open in a new tab, instead of navigating away from my page?
Yes! We’ll be doing a more indepth post about links and new windows soon, but if you add in target=”_blank” into your link (so it says <a href=”http://www.bonjourblogger.com” target=”_blank”>), then each link should open in a new window.
Thank you for sharing, works a treat!
Hi, I’ve been trying to get this to work through wordpress, with the logo html from my flickr but it doesn’t work. It comes up with text beside it and when you click the image it just goes to the logo on flickr. Im more than likely doing it wrong though, so is there any chance you could help me do it?
This was so helpful to someone who has never used html before so thank you for making it so simple!
This was a HUGE help! Thankyou sososo much!! xxx
Extremely useful. Thanks for sharing. Would be great if we could add a counter too :D
Ami @www.thrillingtravel.in
Thanks so much for such a helpful tutorial, fantastic explanations! I’m having a problem where everything works and looks amazing on my pc but I asked a colleague to check the links in his pc and we discovered that the images are not showing up for him, even though they’re working for me. Is there anything I can do?