Add Social Media Icons

Add Social Media Icons | Bonjour, Blogger! image 4

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

facebook rss twitter
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!

Hayley Constantine

<p>Hayley has been blogging since before most people knew what a blog was! She started Bonjour, Blogger! in May 2013 as a way to share her knowledge and experiences – if you ever have a question, get in touch!</p>

  • Maree

    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!

    June 10, 2013 at 5:21 pm Reply
      • KreativCharm

        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?

        September 3, 2013 at 9:01 am Reply
          • KreativCharm

            ahhh okok :) ty again!
            and I love the little heart that comes with ur plugin too :)

            September 3, 2013 at 6:48 pm
  • Jena

    How do you keep the icons to arrange side by side?

    August 5, 2013 at 1:46 pm Reply
  • Alisa

    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 :(

    September 12, 2013 at 10:01 pm Reply
  • Emma @Ladieswhat

    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!

    November 9, 2013 at 12:44 pm Reply
  • Kavines

    Helped a lot, thanks!

    January 23, 2014 at 9:02 am Reply
  • Kaarunya

    Lovely post!!!
    At last I found your site and it worked perfectly!
    thanq :)

    January 24, 2014 at 12:09 pm Reply
  • Nicola Bishop

    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

    February 2, 2014 at 11:41 pm Reply
  • Devon

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

    February 3, 2014 at 8:14 pm Reply
  • Devon

    nevermind figured it out!! i needed https:// before the links.

    February 3, 2014 at 8:27 pm Reply
  • sadia

    Nice post…..thanks a lot…

    February 8, 2014 at 2:04 pm Reply
  • Lena

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

    February 13, 2014 at 8:27 pm Reply
  • Hanna Schofield

    I’m trying to do it on Tumblr and I’m struggling! Please can you help? x

    February 17, 2014 at 4:20 pm Reply
  • Carissa

    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

    February 22, 2014 at 7:46 am Reply
  • Michelle

    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?

    February 22, 2014 at 7:10 pm Reply
  • Heather

    Thank you for sharing, works a treat!

    March 25, 2014 at 8:08 pm Reply
  • Claudia Fox

    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?

    April 4, 2014 at 12:48 pm Reply
  • Emily Munns

    This was so helpful to someone who has never used html before so thank you for making it so simple!

    December 16, 2014 at 9:49 am Reply
  • Imaan

    This was a HUGE help! Thankyou sososo much!! xxx

    May 5, 2015 at 11:40 am Reply
  • Ami

    Extremely useful. Thanks for sharing. Would be great if we could add a counter too :D
    Ami @www.thrillingtravel.in

    September 15, 2015 at 10:42 am Reply
  • Holly England

    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?

    May 6, 2016 at 11:07 am Reply

Leave a Reply