One of the most important elements to include on any website is a set of branded social media icons.
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?
- 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.
- Once you decide on a set of icons that you like, download the image file(s).
- Upload your files to a site like Photobucket or your WordPress media library.
- 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).
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.
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:
(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.)
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.
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.
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.
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.
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!
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?
Yours are adorable!
I need to get on this. I have a couple, but they’re not uniform, which isn’t a good look.
Visiting you from My Reflection of Something. Great information! Thank you.
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!
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.
Thank you Deborah! We are always happy to help.
Once again, Eli Rose has all the answers I need.
THANK YOU!!
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’?
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”.
Thanks! Perfect and worked well!
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!
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.
Thank you SO much! This was unbelievably easy and PERFECT. I’m beyond proud of my new ninja icons!
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
Yes you can. Here’s what you would use:
mailto:YourEmailAddress
Wowww!!! Thank you sooo much for this! It was so easyyy! 😀 😀
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?
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!
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.
Hi Adam,
The HTML tags you’ll need to center something are
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
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.
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!!!
Look like you the need the http: before that line of code.
Hope that helps!
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?
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.
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! =)
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!
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?
-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
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!
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??
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!
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!
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!
Thank you so much for this post! I’ve been wanting to add social icons to my blog and you made it so easy!
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!
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.
This worked wonderfully. Is there a way to make it open in a new tab? Thanks in advance
Yes! Here’s a post on how to do that. http://elirose.lizjostes.com/2011/10/make-social-media-icons-open-in-new-window/
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!
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’
No, I’m sorry. I do not know the coding for color change.
Ok. Thank you! I will try and figure that out 🙂
Once I include the urls for the codes, where do I put the codes?
The HTML is added to a text widget in your blog or website.
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?? 🙁
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!
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.
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.
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?
I actually figured it out! Thanks!
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!
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!
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
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
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!
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?
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.
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.
Can you send us your HTML code you are entering? Email it to info@EliRose.com. Thanks!
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!
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
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?
Try removing the final / sign at the end of the img src line. Thanks!
Thank you so much for your help!!
~Anna
Thank you so much for this – so great to be able to use a bit of html that works instantly! Cheers!
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!!
Sure! You can send your code to Info@EliRose.com. Thanks!
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.
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!