How to Add Social Media Icons & Blog Buttons to your Website

One of the most important elements to include on any website is a set of branded social media icons.

Add Social Media Icons to Website

Your icon set can include links to your RSS or email subscription options, Twitter, Facebook, YouTube, LinkedIn, Instagram, StumbleUpon, Flickr, etc. Basically, wherever you have active accounts, including a linked social media icon helps readers and customers easily find and follow you there.

How Do I Add Social Media Icons to my Website?

  1. The first step in adding social media icons to your website or blog is to search for and choose a collection that you like.ร‚ย Sites like HandyCons, Web Designer Ledger, Web Designer Depot and Icon Dock offer free social media icon collections. You also can ask a designer to create custom icons to match your current website design.
  2. Once you decide on a set of icons that you like, download the image file(s).
  3. Upload your files to a site like Photobucket or your WordPress media library.
  4. Locate the image URLs of your new icons before advancing to the next step. You’ll need to include the URLs for each social media icon you plan to add to your site, to some code in a text widget in your sidebar or header.

How Do I Find my Image URL?

If you store your images on Photobucket, you can find your image location URL in the “Direct” field in the “Links to Share This Photo” on the right side of the page (when viewing the specific image you intend to use).

Photobucket-social-media-icon-image-URL

For those uploading images to their WordPress library, simply navigate to and click on the image in your library, and then copy the text in the “File URL”ร‚ย field.

Wordpress-media-library-image-URL

What Code do I Need for my Sidebar Widget?

Popular blog platforms like Blogger and WordPress have text widgets that can easily be added to widgetized sidebar and footer areas. The code that needs to be added to those text widgets, whether it is for 1 social media icon or a whole collection, is this:

social-media-icon-code

 

(If you are having difficulty getting your icons to render correctly, you might want to try the slight variation of code below. It has the / symbol removed before the ></a> at the end.)

add-social-media-icons

The first part of the html code – www.YourWebsiteAddress.com – is the URL of the profile or page that you want someone to connect to. For example, we’d enter: twitter.com/EliRoseSocial to send anyone who clicked on our Twitter icon, to our Twitter page.

The second part of the html code – www.URLofImageLocation.com – is where you’d include the image location URL from Photobucket or your WordPress media library. Each social media icon that you want to add to your website needs the code above. These lines of html code can be repeated several times in 1 text widget, so if you have 4 social media profiles that you want to link to icons on your blog, repeat that code 4 times, changing your profile and image location URLs each time. This same code works to create badges and buttons, too. If you receive an image from an agency or brand you are working with, you can upload it to Photobucket or your WordPress media library, and follow the same steps as outlined above to turn that image into a button to add to your sidebar or post.

Eli-Rose-Blog-Button

What sites do you love for collections of social media icons?

*Post publishing Note 1: We had a reader try to use social media icon images uploaded to Picasa who wasn’t able to make it work on her Blogger blog. As soon as she uploaded her images to Photobucket instead, it worked perfectly.

74 Comments

  1. Kristin @ Peace, Love and Muesli

    I found a plug in for my social media icons, called social media widget. It allows for custom made icons but I haven’t been able to get that figured out yet.

    Reply
    • admin

      It’s funny how some things that are meant to make things easier, end up being more work. Good luck figuring it out! Also, keep in mind that you are adding another plugin to your site. The more plugins you have, the slower your page load time.

      Reply
  2. Emily Suess

    That’s a good reminder about the plug-ins. I use a TON of them. Time to clean house, I think.

    Your branded social media icons are awesome, by the way!

    Reply
  3. Linda Yarbrough@The Media Mix

    What a good resource blog post on social media. You are so detailed in this “how to guide” for adding customized social media icons and links to a blog or website. Good job. I’ll be Tweeting to this blog post link today!

    Gotta say that I am most intrigued by the graphic and code you show to: Add Eli | Rose to Your Blog. How has that worked for you? Do you have a way to tell how many bloggers have used it?

    Reply
  4. angela

    Yours are adorable!

    I need to get on this. I have a couple, but they’re not uniform, which isn’t a good look.

    Reply
  5. Nancy

    Visiting you from My Reflection of Something. Great information! Thank you.

    Reply
  6. Jen {at} take2mommy

    I just carefully followed your instructions here. Word for word. Slowly. Wrote the code, inserted URL addresses here and there…and it worked! I can’t believe I did it. Thank you so much for the easy-to-follow instructions!

    Reply
  7. Deborah

    As always you are precise in your instructions. I have used many of your recommendations and I am pleased with all of them. I will continue to keep an eye on your site for additional tips and helpful information. Thank you so much.

    Reply
    • admin

      Thank you Deborah! We are always happy to help.

      Reply
  8. jillsmo

    Once again, Eli Rose has all the answers I need.

    THANK YOU!!

    Reply
  9. Anastasia @ Eco-Babyz

    Thank you, that was very helpful! How would I add code to have words displayed when hovering over an icon like ‘connect on facebook’ or ‘subscribe by email’?

    Reply
    • Admin

      That’s a great question, and makes me want to write a “quick tip” post about it! ๐Ÿ™‚

      You’ll add code to the img src line. After the /” and before the />, put this:

      alt=”Subscribe via RSS” title=”Subscribe via RSS”

      Be sure to keep a space just before the alt and after the RSS”.

      Reply
  10. Ashley @ It's Fitting

    Here’s a quick question for you… how do you get your social media icons to live where yours do (top right corner?). I’d like to keep that prime sidebar realestate and I have some room next to my header that I can use. Thanks for any help!

    Reply
    • Admin

      Here on Eli Rose, we have a widgetized area in our header. On my personal blog (which is on Thesis), the code is in the Thesis OpenHook area.

      Reply
  11. ali cross

    Thank you SO much! This was unbelievably easy and PERFECT. I’m beyond proud of my new ninja icons!

    Reply
  12. Natalia

    This is excellent! It’s super easy for me to do, but really makes things look good! I was wondering, though — is there a way for me to link to an email address? Thanks ๐Ÿ™‚
    ~Natalia

    Reply
    • Admin

      Yes you can. Here’s what you would use:

      mailto:YourEmailAddress

      Reply
  13. Gia

    Wowww!!! Thank you sooo much for this! It was so easyyy! ๐Ÿ˜€ ๐Ÿ˜€

    Reply
  14. Megan

    Hi! Thanks for the info! Ive used the code you provided to put three different embedded pictures into the footer of my blog (they are lined up horizontally). How do I centre the three images?

    Reply
    • Admin

      To center an image, you would add this before the html for that image:

      …and this at the end of the html for the image:

      Thanks!

      Reply
      • Adam

        Hey there,

        I, too, would like to know how to centre my icons. I followed your instructions to set them up and they are perfect, thanks! Now all I need is to centre them and I’m good to go.

        Reply
        • Admin

          Hi Adam,

          The HTML tags you’ll need to center something are

          . You need to place the opening tag (
          ) at the start of your icon code, and the closing tag (
          ) at the end of your icon code.

          Reply
  15. Mel

    Thank you for a helpful how to…
    However i followed the steps in the photo bucket option above and all i get when I click on the Social Media Link… is to photo bucket

    Once the icon is on the website how do you link it to your social media platform?

    Kind Regards,

    Mel Houghton

    Reply
    • Admin

      It sounds like you are grabbing the wrong line of code. You’ll need to grab the code from the “direct link for layout pages” line in order for it to work.

      For your second question, use the code in the section entitled “What code do I need for my sidebar widget” as your guide.

      Reply
  16. Erin @ 3 Meadow Lake Cottage

    I don’t know what I’m doing wrong!! I’ve spent hours trying and re-trying. I’ve followed your steps to the letter. And it won’t work!!
    Do you see anything wrong with my coding?

    I’d REALLY appreciate your help!!!

    Reply
    • Admin

      Look like you the need the http: before that line of code.

      Hope that helps!

      Reply
  17. Ashley

    Hi! I’ve tried several times to add the code to my blogger account and it won’t show up. The few times I’ve been successful it says the image has been deleted from photobucket but it’s still there.

    Any idea what I’m doing wrong?

    Reply
    • Admin

      Without seeing the code, it’s hard to tell. The thing with HTML is you can have just 1 character incorrect and the whole thing won’t work. You might try be re-uploading your image to Photobucket though since there seems to be an issue with that.

      Reply
      • Mama Mimi

        I am having the same problem. All the links work perfectly but the picture won’t show up. I even tried re-uploading the photos like you suggested. HELP! =)

        Reply
        • Admin

          Chances are, an extra set of ” have been added into your code. If you could take a screenshot of your HTML and send it to us, I’d be happy to take a look. Info(at)EliRose(dot)com. Thanks!

          Reply
  18. D

    Is it legal to use the icons on your website? Do you need to ask for permission or pay to link them to your website?

    Reply
    • D

      -I know it may be a stupid question. But I wanted to know in general and I can’t seem to find out anywhere. I would rather be safe and ask a silly question, than be sorry and find out I was wrong later

      Reply
    • Admin

      Yes, it’s legal. The websites with the free icons put those out there to garner traffic (pageviews) to their site. Those pageviews are their “pay” for giving you the free icons. And there is no such thing as a silly question!

      Reply
  19. Colleen

    I love this, thank you so much! Question: I resized the icons down in photoshop and uploaded to Photobucket, yet they still show up on my sidebar in the original size. I wanted them smaller to fit in one row. Thoughts??

    Reply
    • Admin

      Hmm, so you changed the direct URL to the new, smaller Photobucket icons, correct? Could you by chance copy/paste your HTML and email it to us? I don’t mind taking a peek. Info(at)EliRose.com

      Thanks!

      Reply
  20. Jenny Brown

    I have followed these instructions but just keep getting red x’s on my site. Can you help me figure out what I am doing wrong? I can email you the code if you want to look at it. Thanks!

    Reply
    • Admin

      Sure thing! I just popped over to your site and hovered over the Xs, and it looks like you have incorrect URLs. I should be able to tell you exactly when I see the code. Thanks!

      Reply
  21. Angela

    Thank you so much for this post! I’ve been wanting to add social icons to my blog and you made it so easy!

    Reply
  22. Cristina

    I followed your steps exactly and it still didn’t work. ๐Ÿ™ I just end up with a a little square that the picture isn’t showing up. I know it’s something on my end because I’m not quite sure what I’m doing. Any guidance would be much appreciated!

    Reply
    • Admin

      Hey Cristina! We’re happy to help. If you could take a screen shot of your code and email it to us at Info(at)EliRose(dot)com, that would be great.

      Reply
  23. Kate

    This worked wonderfully. Is there a way to make it open in a new tab? Thanks in advance

    Reply
  24. Meredith

    This helped me so much! I’ve been wanting to add buttons to various social media sites for a long time. Thanks for the clear instructions!

    Reply
  25. Marche' Robinson

    Thank you so much for this! I wanted to know how to make the buttons change color when you hover over them? Thank you!

    Marche’

    Reply
    • Admin

      No, I’m sorry. I do not know the coding for color change.

      Reply
      • Marche' Robinson

        Ok. Thank you! I will try and figure that out ๐Ÿ™‚

        Reply
  26. michelle

    Once I include the urls for the codes, where do I put the codes?

    Reply
    • Admin

      The HTML is added to a text widget in your blog or website.

      Reply
  27. Christina

    I’m getting little red “x”s instead of the pictures…I followed your instructions to a “t”, and I’m using Picasa…don’t know if that matters…help?? ๐Ÿ™

    Reply
    • Admin

      Can you send us your html? Info(at)EliRose.com. We’re happy to take a look. It’s likely there is an extra set of ” in there.

      Thanks!

      Reply
  28. Jenn J McLeod

    Okay, it’s only taken me about 4 hours!!!! But I feel I have had a victory. Given I am new to this and my DIY attempts have sent me grey, I have looked and looked for someone to really help in a genuine way. YOu are a treasure. Actually, at 53 I was already grey. the last thing I expected at my age was that i would need to be learing all this, but a debut novel means getting active on social media and I have been strgllung until now. I so depserately wanted to have little buttons like other people. Noew I do. not eactly as I would have liked (in the header area. I think I am not brave enough to attempt CSS edits – I think thats what they are called.)
    Now, if only I can find out how to add the gorgoeus SHARE line of icons. Any tips? Am off to share your site on FB with all my writer friends.

    Reply
    • Admin

      Hi Jenn,

      It looks like you are on self-hosted WP. Have you searched Plugins for social sharing buttons? That’s the place to find that type of functionality within WP.

      Reply
  29. Alicia

    I am sure you have answered this before, but I cannot get my icon to link to the facebook or pinterest page. I have no problem getting the icon to show up. I believe I have entered the correct URL. Any tips?

    Reply
  30. Alicia

    I actually figured it out! Thanks!

    Reply
  31. Cassandra

    Oh my goodness! THANK YOU THANK YOU THANK YOU! After trying and trying with other posts yours was the easiest way to make my personal social media widget work. It looks almost exactly as I wanted it to look and works like a gem!

    Reply
  32. Jen

    Hi, thank you for the blog. I have also spent a long time trying to get it to work for blogger. I don’t know if “direct link for layout pages” is still an option in photo book, I couldn’t find that option anywhere, just “direct link” … The only way I have managed to get an icon to display on my blog is to paste the code into an Image widget on blogger (text and html just shows the text) and add the direct link url. However, to add more than one it displays them vertically rather than horizontally and I also can’t change the size that way. Any advice appreciated!

    Reply
    • Admin

      Hi Jen,

      With Photobucket’s design update, they now label it simply as “Direct link” instead of “Direct link for layout pages”. If you wanted to send your Blogger login info plus a link to your photobucket icons, I’m happy to play around with it for you.

      Our email is Info@EliRose.com

      Reply
  33. Ruth

    I’d really like these snazzy buttons but I can’t seem to get them to appear! I just read the last comment from a blogger user and perhaps that it my problem…photobucket has changed and updated the way it works. I can’t seem to figure out how to add them as a link though! I have successfullly uploaded them to photobucket but that’s as far as I’ve gotten. Blogger is so frustrating to me!! I would be so grateful if yo could help.
    Thanks!
    Ruth

    Reply
    • Admin

      Hi Ruth,

      When viewing an individual image on Photobucket, there is a grey box a bit lower down on the right side called ‘Image Links’. The line called ‘Direct Link’ is what you’ll need to copy/paste.

      Hope that helps!

      Reply
  34. Kiersten

    Hi! So I have social media links for FB, Twitter, Pinterest, and Goodreads. I’ve been trying to add one for Bloglovin, but for some reason it keeps trying to redirect to a page on my blog which, obviously, it can’t find. I’m using the same code, except replacing it with the link to my Bloglovin, and the link to the correct photo. I wondered if you would have any idea why this particular site isn’t working?

    Reply
    • Admin

      Hi Kiersten,

      I haven’t personally used Bloglovin so I can’t say for sure, but it would seem like there would be a subscription-type web address for people to subscribe to you via Bloglovin. Kind of like how you have an RSS feed address for your blog. Because the linked icon is working, just redirecting people back to your site, it seems like it’s an issue of finding the correct URL for your Bloglovin subscription vs anything else.

      Reply
  35. E.W.A.M

    Hi there,
    I keep trying and it keeps giving me a picture with the message “Sorry. This person moved or deleted this image”. But i didn’t, its right there. Not sure what i am doing wrong.

    Reply
    • Admin

      Can you send us your HTML code you are entering? Email it to info@EliRose.com. Thanks!

      Reply
  36. Bridget

    Hi, thank you for your tutorial. I am excited to get some cute icons up on my site. Unfortunately I am having some problems. I have tried adding the code several times but I can’t seem to get the picture to appear. Instead there is just a small image icon where the picture should be. When I click on it, the link works fine. I have tried reloading the picture into my WP library and have even tried using a different picture with always the same result. Please help! Thanks!

    Reply
    • Admin

      Hi Bridget,

      Check to see if there’s an extra set of “” showing up in your code. Also, you can send your code to us and I’m happy to take a peek. Info@EliRose.com

      Reply
  37. lauren

    i’ve almost got this working, but no picture. thee is a little box on my page and you click and it takes you to twitter, just now pretty button? what have i done wrong?

    Reply
    • Admin

      Try removing the final / sign at the end of the img src line. Thanks!

      Reply
  38. Susan B. Bentley

    Thank you so much for this – so great to be able to use a bit of html that works instantly! Cheers!

    Reply
  39. Parasol Dreams

    Hello !!

    Just ran across your post and tried diligently to put it to good use. I tried using a link directly from my wordpress media library. Didn’t work. Then I tried linking it from a photobucket account. Still not working and nothing is appearing on my header. You have any ideas or would it be possible to show you my code to see if I am doing something wrong?

    Thank you so much for taking the time to read my comment. I appreciate it!!

    Reply
  40. Craig

    Hi there great information, I will definitely be using Photobucket from now on. I used Hupso social media icons on a website I own and when I looked at the html code, it’s like the mouseover function has repeated itself. I think I’ve got a whole lot of code that should not be there. What do you recommend as a social media icon set? This not a wordpress site as well.

    Reply
    • Admin

      Hi Craig,

      We’d recommend doing a few Google searches for “free social media icons” to see what some of the available options are. Since it’s just some html code to add the buttons, it shouldn’t matter if your website is WordPress or not. Just look for some type of text widget area to place your buttons.

      Good luck!

      Reply

Trackbacks/Pingbacks

  1. Bloggy Basics - Button Up - My Reflection of Something | My Reflection of Something - [...] Rose, one of my favorite social networking blogs, has a great post about using this method of sharing. 2.…
  2. Part Two: Are You Ready To Start Doing Reviews and Giveaways on Your Blog? | Freelance Writing by Jessica - [...] a check mark next to show share buttons. This will add share buttons under each blog post you make.…
  3. Blog Design Tutorial: Social Network Icons Made Easy - My Reflection of Something | My Reflection of Something - [...] If you need help installing these icons on your blog, or just want to learn more, I suggest reading…
  4. Is your business ready for social media - [...] way for your customers to become aware of your social media presence and follow you there is by adding…
  5. How To Add Social Media Buttons to Your Blog | Polka-Dot Pasta Sauce - [...] Adding Social Media Icons [...]
  6. Free Social Media Icons | Carrie Loves Design - [...] Need to learn how to install the icons on your blog? Hereรขโ‚ฌโ„ขs a great tutorial from Eli Rose. [...]

Leave a Reply to Megan Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sign Up For Insider Tips!

Subscribe to our mailing list.

Read our privacy policy here.
* indicates required
Interests

Pin It on Pinterest

Share

Share this post now!