How to install social media icons

I’ve been getting a couple of questions about installing/using the social media icons I made, so today, let’s talk about how to get those up and on your site. This will also work for any social media icons you have (they don’t have to be mine) or any photo you want to use on your sidebar, like a blog button.

If you’ve never used HTML code before, don’t let this post scare you – this process is very, very simple. What you’re going to do is upload the photos to an image hosting service, and then use a little bit of code to link to them on your site.

 

 

Step 1: Upload the icons

To start, you need to upload your photos to a site that will host them for you. We need to do this so that it’s online, and has what’s called a direct file URL, or a direct link to that specific photo (just like every post you write has a specific URL for it, so, too, does every file you upload). That direct file URL is what we’re going to use.

If you’re on WordPress, you can upload the icons to your Media Library. Once it’s uploaded, you’re going to click on Edit/Expand, or on the photo itself, to find the file URL link. It should end in the file extension for the type of file you’ve uploaded (like .jpg for JPEGS, .png for PNG files, etc).

If you’re on Blogger, you have to use a third party photo sharing site like Photobucket. Why can’t you use Blogger? Because as of right now, Blogger will host any photo you upload, but doesn’t allow you to link to them the way we need them to; so, go ahead and use Photobucket instead (it’s free).

Once the photos are uploaded to Photobucket, you want to view your album then hover your mouse over the photo. A pop-up with several different URLs will appear; the one you want to click on is the “Direct Link” URL. When you’re ready to copy it, simply clicking on it will copy it for you in Photobucket.

Once the icon photos are uploaded, we need to make note of the file URLs for Step 2. At this point, you may want to open up in a new browser tab/window to work in for the next steps. I find it easier to flip back and forth between tabs to grab the photo URLs, rather than writing them down.

 

 

Step 2: Insert the image links

Next, you need to insert the image URL links in the spots where you want the icons to appear on your sidebar.

If you’re on WordPress, open up your Widgets area in a new tab (Appearance > Widgets) and add a new Text widget to your sidebar. If you’re on Blogger, go to the Layout area of your blog and add an HTML/Javascript widget to your sidebar.

For both, you want to copy and paste this code into the new widget you just added. You can select the code, then copy and paste it right from here:

<a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>

This bit of code is the basic requirement for using a photo/social media icon on your sidebar. The first part, the a href part, is the link; change the a href URL in the example to whatever website you’d like to link to, like Facebook or Twitter.

The second part, the img src section, is where the photo/icon is housed, so change the img URL example to the photo/file URL for your own icon. Make sure you keep both the website URL and the photo URL within the quotes.

Then, you’ll need to repeat this step for every icon you use.

 

 

Step 3: Customize the code

The basic code will get those icons onto your blog. If you need it done simply and quickly, just copy and paste and save. But there is more you can do here that you might be interested in.

For example, let’s say you don’t want the link to open in the same window; it will do that the way the code is now. If you want the link to open in a new window, you need to direct it to do so by adding a target. The _blank portion tells your blog to open up a new window for that link:

<a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>

Or maybe you want the icons to be a different size. Mine are 52px wide, which may be too big for your tastes or blog layout. You can open up a photo editor, like Photoshop, Photoshop Elements, Picasa, or GIMP, and manually resize them, but maybe you don’t know what the final size will be; maybe you want to see what they look like up on your site first.

Rather than manually resizing them and uploading them over and over, you can set the width or the height for your icons with code. This is great if you need to tweak them to fit on your sidebar because all you would need to change is the number (versus uploading your icons over and over). I can insert both a width and a height setting, but doing just one will take care of the sizing adjustment for me; the photo should maintain it’s proportions.

In the example below, I’ve set the width to 25 pixels wide, so change the 25 to whichever number you like:

<a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" width="25" /></a>

You can also set some alternate text, should the photo not load for whatever reason. To do that, add the alt section like below:

<a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" alt="Alt Text or Photo Title Goes Here" /></a>

What if you want your button to link to an email address? A simple email link looks like this:

<a href="mailto:youremailaddress@domain.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>

And finally, let’s say you want it centered. You can add code to do that, like this:

<span style="text-align:center"><a href="http://www.WebsiteToLinkTo.com"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a></span>

Here’s what everything looks like all together:

<span style="text-align:center"><a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" width="25" alt="Alt Text or Photo Title Goes Here" /></a></span>

 

 

Step 4: Save and finish

That’s it! Make sure to save your widgets once you’re done!

 

 

A couple things to remember:

1. Don’t forget change the website and photo URLs for your own widgets!

 

2. You only need to copy one of these code boxes for your icons, not all. I included individual codes to explain what each part did and to make it easier on you if you have a specific preference. You don’t need all of them on your sidebar, just one.

 

3. If you’re using several icons and want them to sit next to each other, run all of the codes together. Don’t hit Enter to create a new line for the next icon; just paste the second icon’s code right next to the first one and repeat till all of your icons’ codes are in place.

 

4. All of these little bits of code are called tags. Most tags will have an opening and closing tag to tell a website to turn it into whatever you’re looking to do, like a link. The opening tag details the information you want to happen, while the closing tag tells it to end where you want it to end. It’s extremely important not to leave off that closing tag. Closing tags will look like this </closing> and either be a separate tag at the end, like with a link, or will be a forward slash (… />) at the end of the opening tag, like an image source. Here’s what I’m talking about:

<a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" /></a>

Even though these two closing tags look different, they do the same thing, which is end the code.

 

5. Speaking of closing tags, their position is pretty important. You want to make sure to reverse the order you used for the opening tags, otherwise you’re going to get errors. If you’re copying and pasting the codes above, you don’t have to worry about it – it’s already set up properly for you. But if you’re typing them in manually, you’ll need to be aware of the order.

Here’s the right way:

<span style="text-align:center"><a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" width="25" alt="Alt Text or Photo Title Goes Here" /></a></span>

And here’s the wrong way:

<span style="text-align:center"><a href="http://www.WebsiteToLinkTo.com" target="_blank"><img src="http://www.PhotobucketDirectLink.com/test1.jpg" width="25" alt="Alt Text or Photo Title Goes Here" /></span></a>

See the closing tags at the end? /A needs to come before /span, not after. Remember to reverse the order for the closing tags, not repeat the order of the opening tags!

 

 

For more quick reference HTML codes, check out the W3 Schools website. Enjoy!

 

 

50 Responses to How to install social media icons

    • I actually figure it out! I just wanted to say thanks so much for the awesome tutorial. It worked perfectly and the only site I’ve ever got to work. I blogged about how easy it was…wereparentsnj.blogspot.com

      Thanks again

  1. omg thank you so much for such an easy understand post. thanks to you i added cute buttons to all my social media sites! thanks so much for sharing and your help!

  2. Brandi, I cannot thank you enough for this tutorial, not to mention the FREE icons! I’m somewhat tech-savvy, but am completely intimidated by everything HTML-related! However, taking your instructions one step at a time, I was able to add your cute little icons to my page–I was SO proud of myself! Anyway, I just wanted to say thank you so, so much for taking the time to create and share your work.

    I’ll be posting this tutorial and the link to the icons on my page. :)

    Happy Holidays,
    Dara Shultz

  3. I do have one question, but first THANK YOU! I was going crazy over the wekend trying to figure out how to install buttons/badges. I attempted to resize your PNG images, but there was no change in image size when I replaced “25″ with a different number. Any thoughts?

  4. Oh my goodness I’ve been trying to do this for the longest time and with your help I did it in minutes!! Thank you!!! Still have a lot of other things I want to do but I’m one step closer!!

  5. Hi there, I wonder if anyone can help? I’ve followed this awesome advice to finest detail but I just can’t get it to work… Instead of the icons on my blog, there are error type icons like the one that shows when a picture hasn’t loaded. I don’t really understand why it is doing it though :S I thought it might because my side bar was too narrow or something, but I’ve tried making the icons smaller and the sidebar wider but it doesn’t change anything. So I’m getting quite frustrated now =/

    Would anyone be able to help?
    Thanks!
    Lucy recently posted A Bit of Geekery Never Hurt AnyoneMy Profile

    • Hey Lucy – where did you upload your photos? If it’s to Blogger, it’s not going to work. You need to use a third-party service like Photobucket, then choose use the direct link for the photo.

  6. Brandi,

    I appreciate your tutorial and got it to mostly work. When I put the code in my web design page (wysiwyg, but it let’s me add the custom code) I see the icons. However, when I view the actual site, only the alternate text shows. The links works, but just not image. :(

    Any help would be appreciated.

    Thank you,
    Stacey

    • Hey Stacey – the best that I can figure out is that the site you’re using to host the photos isn’t properly displaying the image.

      I see some, like your Facebook and Pinterest buttons, are showing just fine, so I’m wondering if those are standard icons included in your template. For the ones right below that line of icons, the ones that aren’t showing, I’d probably try uploading those icons to a site like Photobucket and grabbing the direct link from there. Not every host will allow the image linking you need. Blogger is definitely one, and yours might be the same; I’m not familiar enough with the way your host works to say for sure.

      Using Photobucket isn’t an elegant answer, because who wants to use a third party site just for a few icons, but I know it works. If that’s not something you want to do, look again at your hosting. Is there a media library with links available to you? It would look similar to what you pasted, but the way to tell if it’d work is to post that image link in a browser. If the image comes up, perfect, use that one. The image link you’ve got for the icons right now doesn’t bring up anything for me, so it’s not the one you need.

      Try that and let me know if it works.

  7. Got it! My files extensions weren’t quite right. Now that I have figured it all out, I will use the icons you made, it was just easier to start with the ones the template had. By any chance do you have an etsy, instragram, or houzz in the silver glitter? If not, I will use the colored ones, because they are great, too!

    Thank you for your help,
    Stacey
    Stacey recently posted A New NameMy Profile

    • Krishna, that’s most likely a WordPress plugin, or a part of the site’s code itself, and different from what I’m showing in this post.

      If it’s a plugin, and you have a WordPress blog, you can search and install it onto your blog. If it’s part of the site’s code, you’ll need to contact a web developer to do that. If you’re not on WordPress, you won’t be able to use that same plugin. There may be some hacks or ways you could do based on your platform, but I can’t say for sure.

      • thanks for the information Brandi. Actually my template is on PHP AJAX So will this plugin work on my template or not????

        • Hey Krishna, the honest answer is that I don’t know. I’m not a web designer or developer, so I’m not able to give any advice about it. If it is a plugin, which I don’t know if it is or not, it’s probably for WordPress users only. You’d want to talk to your template designer about what, if any, plugins are available to you.

  8. Thank you for this info Brandi ! Even though there are a lot of social media plugins via WordPress sometimes they just don’t quite fit the bill in overall presentations and some of them just look downright tacky ! Really glad that you have the Etsy and Pinterest icons included in your pack. I was hard-pressed to find them elswhere ! Great tutorial thank you !

  9. Brandi: Great post!! I’m on WordPress.org and can’t figure out how to line up my social media icons. I am at the “text” box widgets in the sidebar but they are all separate, and I’m not sure where to “run the code together” AND have each icon link to a separate website (Facebook, Twitter). Can you help?

    • Hey Joy! Okay, do you have each set of codes (one for each icon) in their own separate text widget boxes? If so, put them all together in one text widget. Just copy and paste them next to each other so that the entire code for one icon sits next to the code for the next (that’s what I meant by run them together). If you want the icons to have a little extra breathing room, you can add a space in between each set of code. Save, then look at your site! Let me know if it works.

  10. This is a fantastic tutorial! i’m just wondering how do i get rid of the white & gray squares behind the icons & make it only white so it blends in with my background? i can’t figure it out!

    • Thank Kandis! As for the white and gray squares, those usually indicate a transparent background in Photoshop – it’s odd that they showed up on the final icon, unless the designer intentionally put them there (or something went wonky somewhere). Are those the original icons? If you’ve got Photoshop or Photoshop Elements, you can bring the original icons in to it and erase or replace that white/gray background. If not, I’d reach out to the designer!

  11. Hey Brandi! Thank you for this tutorial its extremely helpful. I know there are simple wordpress plugins that will do the trick but customized icons look and feel so much more professional on my blog. And luckily I am familiar with html so the code doesnt scare me :)

  12. Thanks so much! I have it all done except one little problem. Between my facebook icon and my pinterest icon is some code showing on my blog! it says . the html code is written that way between the two buttons, I know that usually signals for the person to go to a separate page to sign up but I don’t understand why it is showing up. Any advice for me?

Leave a reply

  Am Not Spammer

CommentLuv badge

There are no icons to display.