Primp My Blog: How to Add Social Media Buttons to Your Sidebar

Now that your blog is getting beautiful, you’re going to want to share it! Adding buttons to your blog requires a tiny bit of know-how, but it can make a big impact for your readers.

I’d also like to take a moment to share that you can now follow Her New Leaf on Facebook! I plan to use the page to communicate with my readers, find out what you want to read more about, and even provide some exclusive content for Facebook followers only!

The buttons that I use in my own sidebar are courtesy of Isa Maria of The Academy. I had been searching high and low for a cute set of icons that included a button to link to my Pinterest, and when I discovered Isa Maria’s adorable icons based on the Pantone Color of the Year, I knew they were perfect and couldn’t wait to share. Please click over to her blog and subscribe to her newsletter, they are full of wonderful tips and advice for your blog or business!

I wanted to share this fantastic resource with you all, so I decided to put it together with a teeny, tiny html primer. Don’t be scared! Way, way back when I was a wee geek of twelve, I taught myself enough html to create my own pages on Angelfire and Geocities. Remember those? So if I could do it then, you can do it now!

Rather than just giving you code to copy and paste, I figured I’d break it down a bit and teach you so that you can add a bit of html to your blog design repertoire. But if you just want to copy and paste and get it over with, I promise not to hold it against you. ; ) You can scroll to the bottom of this post to find out how.

Edit: Several of you have reported having trouble locating the URL for the buttons – that’s because you need to create it yourself by uploading the images to your own image hosting service. WordPress users can use the built-in Media Library, Blogger users can use an external service such as Photobucket. This is where you’ll find the image URL.

From your WordPress dashboard, go to Appearance > Widgets, and click and drag the “Text” Widget from the box on the left to your sidebar box on the right. It will open up a blank box.

From your Blogger dashboard, go to Design, then click “Add a Gadget.” Select “HTML/Javascript” from the menu. It will open up a blank box.

First, we’re going to learn how to create a link. You can use this basic html tag in your blog posts, email, anywhere you can use html.

<a href="URL of link">Text to Link</a>

Your link will look something like this:

My Facebook!

You can also edit this tag slightly so that your link will open in a new tab or window. This is helpful since you don’t want your readers to leave your blog to look at your pages.

<a href="URL of link" target="_blank">Text to Link</a>

But we want to show our cute buttons, so you’ll need this tag to place an image:

<img src="URL of image">

Finally, we combine the two tags to add a link to the image:

<a href="URL of link" target="_blank"><img src="URL of image"></a>

This is the same code, with my links as examples:

 <a href="http://www.facebook.com/pages/Her-New-Leaf-Blog/
329109590455030" target="_blank"><img src="http://hernewleaf.
files.wordpress.com/2012/01/facebook.png"></a>

Continue adding links and images until you have added all of the buttons you want! Make sure you test all your links because one incorrect character is all you need to send your readers to the wrong place!

Enjoying the Primp My Blog series so far? Consider adding my button to your blog!

Advertisements
This entry was posted in primp my blog, tutorial and tagged , . Bookmark the permalink.

63 Responses to Primp My Blog: How to Add Social Media Buttons to Your Sidebar

  1. hemborgwife says:

    You have sufficiently boggled my mind with this! Maybe one day I will be brave enough to try this out!

  2. Amy Bishop says:

    Thanks for this post! I used this code to start a new “featured on” section of my toolbar similar to yours. What an easy tutorial. Thanks!

  3. Joanne P says:

    Thanks so much. At first I’m like huh and then I figured it out. You made it so easy. Awesome.

  4. Shay says:

    OH THANK YOU! I have seriously been scouring the internet for the past 3 weeks looking for clear, helpful instructions on how to add buttons and coming up with nothing. You are wonderful!

    Thanks so much!
    xoxox Shay

    • So glad that I could help you, Shay! That’s exactly what I’m trying to do with this series – put “tech speak” into clear, plain English to teach bloggers how to DIY their blogs! I hope you’ll keep reading!

  5. So cool!! Thank you for the tips 🙂

  6. Took me a while to figure out, and with the help of my roommate I finally got some icons on my page! Thanks for the directions and cute icons 🙂

  7. jodie says:

    i may be (*read “am”) really dense about these things… so maybe i’m missing something really obvious here. i’ve messed around a little (a very little) with the html on my blog so i feel semi-comfortable with it, but what i’m not seeing here is the code to get the images plugged in… i downloaded them from the other blog (it was a zip file and all that’s included are images that are pngs)…. how in the world do i plug that into the html code to make the links work?? i’m lost. jydardeau at yahoo dot com please help! 🙂

  8. SheilaG says:

    Wow, I’ve been trying to figure out how to do this for weeks! Is there a way to customize the colors to match my theme? Or if I wanted to make my own buttons, how do I get the logos on there?

    • Sheila, You will need to use some image editing software (like Photoshop) to do this – there are also free online options like Picnik. Isa Maria, the designer I linked above, also offers her services for custom requests, you can contact her for pricing!

  9. sara says:

    Does Blogger have a built in media library? I need the html code for the image…

    • Sara, I’m not familiar with Blogger but there are plenty of free image hosting sites out there: Photo Bucket and Picasa, just to name a few. You’ll need to upload the buttons on your own to create the URL.

  10. Thanks so much for this fun tutorial and the awesome pantone colors as well!!!

  11. Pingback: Pantone Colour of the Year Social Media Icons : The Academy by Noisette Marketing

  12. Zara says:

    Hi, I have managed to get the link to go in the right direction but the icon is not showing up, it’s just a box with an ‘x’ in it. I cannot figure out what i’m doing wrong. Also I cannot figure out how to even find the HTML code for the icons I downloaded (the turquoise set). I’m completely clueless with all this and would really appreciate your help 🙂

    • Zara, you will need to upload the buttons to an image hosting site first. There are lots of free options out there such as Photo Bucket or Picasa. Once you upload, to will be able to see the URL for the image and insert it into the code.

  13. MaJo_BV says:

    Hi Kira!
    Thank you so much for this TUT. I’d been wondering for a while how I could do this, and finally thanks to you I know how ^_^. Your tutorials is clear and easy.
    Just one thing… How can I make the buttons stay one next to the other (aligned horizontally)? Now they are one below the other (aligned vertically).
    I’m adding the link to my blog in the website box, so that you can check it out and see what I mean.
    Thanks again!

  14. Pingback: Primp My Blog: How to Add a Pin It Button to a WordPress.com Blog | her new leaf

  15. emilie says:

    Great tutorial, I’ve just added the icons, thank you so much !

  16. Pingback: Primp My Blog: Making the Most of Your Free Blog Template | her new leaf

  17. Rhianna says:

    Thank you so much for this much needed tutorial!! I have blogger so I had to do a little research…I used Photobucket for my images. For those that are using Blogger, once you upload your image to photobucket, you need to copy “direct link” from the photobucket image and insert that after img src=” This is what was confusing me, so I thought I would share 🙂
    So, now I have buttons!

    • Sorry for the confusion Rhianna, I’ve been creating and editing images since I was around 13 so sometimes I forget that not everyone knows these things! Thanks for reminding me to be extra thorough. ; )

  18. hugw says:

    i still dont understand how i can publish my own icon for a link like that….
    how did you do this- “http://hernewleaf.
    files.wordpress.com/2012/01/facebook.png”?

    and is there a way to make the icon bigger?

  19. Pingback: Freebie Friday: Free Buttons for Your Blog | her new leaf

  20. Intellection says:

    So glad I stumbled upon your blog! Love this page, so helpful and easy! I’ve been meaning to find out how to add those cute little buttons for so long 🙂

  21. Wendy says:

    Hi Kira! Thanks for sharing. I too would like to add a tumblr icon to the mix – can you please share your fee structure with me? Thanks so much! Wendy

  22. Pingback: Primp My Blog: What’s Up Next? | her new leaf

  23. Pingback: Don’t be afraid: making icons for your blog | ~say hello there~

  24. Paige says:

    great tutorial took me a little while to get, and i found Flickr doesn’t work for this, but i got there in the end! will defiantly be following your tutorials in the future, thanks!

  25. Martha says:

    Great Post 🙂 Trying to pimp my blog so this is just what I need!

  26. This was EXTREMELY helpful. I just spent an hour or so “primping” my blog, and boy, what an improvement! Thank you so much!!!

  27. Hannah says:

    Your tutorial was crazy helpful! I haven’t even touched HTML code since I played around with it in Myspace years ago. I wrote up a little post giving you credit for the tutorial (as well as credit to Isa for the buttons).

    The only question I have is that the buttons (I used the ones from The Academy) seem to be appearing as rather large, and a little pixelated (spelling?) on my site. I used Flickr instead of Photobucket, but I didn’t think that would make a difference. Any thoughts/suggestions?

    • Hi Hannah, glad you found this helpful! Your problem might be caused by your choice of host – Flickr is mostly for hosting photographs which are saved in a different file format (JPG) than other graphics (PNG, GIF), so I think what may be happening is that your icons are getting converted to JPGs when you upload them. Try Photobucket, you shouldn’t have any issues. Hope this helps!

  28. Beth says:

    Thanks for the great tutorial! Thanks to you I was able to easily add those cute icons to my blog. I’ll be using some of your other tutorials soon.

  29. jcharbour says:

    How did you get space in between your icons?

  30. jcharbour says:

    Also, How do you set-up the RSS one?

  31. angela says:

    need a youtube honeysuckle if possible

  32. Ashlie says:

    Hello, i was wondering if you can tell me how to get the images to sit side by side on bloggers side bar?

  33. Nicole says:

    Hi, Kira! Finding your blog came at the perfect time–this is just what I needed! When I enter the html code into the text widget and hit “save,” the website urls disappear from the widget and I’m just left with the sharing icon images (they don’t link to anything). Do you have any idea what might be going on? Thanks so much!

    • Hi Nicole! Make sure that you have every piece of the code above, every letter is important! Be sure that you have the complete urls, starting with http://. If you’re still having trouble, feel free to email me at kira@hernewleaf.com, I’d be happy to help!

      • Nicole says:

        Thanks, Kira! Turns out it was a little quirk with copy-pasting from Word. An FYI to anyone who encounters the same problem I had: just type the urls into the text widget or copy them from the actual web page instead of copying them from a Word doc. 🙂

  34. This was so helpful! Thanks so much!

  35. Thank you so much for this helpful information! I found your blog through ‘Freshly Pressed’ and thanks to your help I now have social media buttons on my blog AureliaDiesel.com!

  36. Brittany says:

    Argh! The twitter one wont work for me.. i paste the html in the box and it shortens and changes it. All that shows up is the icon but not linking to twitter. Any ideas? Pinterest worked fine but this wont for 45 minutes! ahhh So happy I found your blog randomly and hope I figure this out!!! 🙂 Thank you

    • Brittany – I clicked thru to your blog and it works fine for me! Takes me right to your twitter profile – great job!

      • Brittany says:

        I was jumping up and down when it worked.. i typed it manually like another blogger mentioned in the comments above! YAY!! so happy..took an hour 😉 I will make a post about this tomorrow hopefully..i really want a linkedin and email icon so i notified your friend

  37. winterlust says:

    Thanks so much for this post! I’ve been looking around all day and I couldn’t believe how easy it was to add some links.

  38. onelmon says:

    Thank you very much for the easy step-by step tutorial and sharing Isa Maria’s blog with us, following her blog too now! It works! Thanks again! =D

  39. krista says:

    Thanks so much for these! used them on my blog and gave you a shout out and a button 🙂

Discuss!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s