If you are not sure how to install social media icons on your website, today we will walk you through the process of uploading them online, inserting a tiny code in your widgets to display them, and finally, adding few final touches to customize them.

If you are scared of “code” because you never tried HTML before, do not be afraid. Just copy and paste the code in the example below and change the URL and name of the social media icons to reflect your own. The process is extremely simple, even a 12 year old can do it.

In this article, you will learn how to:

1. Upload one of those 15+ gorgeous sets of social media icons we talked about in a previous article, to an image hosting site (free)
2. Use a code to display them on your website
3. Do some customization for additional functionalities…

Learn how to install social media icons on your website, blog, or portfolio:

Step 1: Uploading the icons

First, you will need to upload your social media icons to an image hosting site. Uploading all your icons online will allow you to get the “Direct” file URL, which is a complete URL to the site where each icon are stored. The “Direct” link is similar to the URL of your web page or post.

We will be using a direct URL to install social media icons on your site.

The uploading process may differ slightly depending on the website platform you are using.

1. If you are using WordPress site, you need to upload the icons to your Media Library. Once uploaded, click on Edit>Expand or on the file itself to grab the direct file URL. The link should end in the file extension for the type of file you have uploaded (such as .png, .jpg, .gif, .ico, etc)
2. If you are using Blogger, you need a photo-sharing site like Photobucket (a third party site). We do not use Blogger as although it allows us to upload any photos on its server, however it does not allow us to directly link to it the way want them to; so, you need Photobucket (it’s free).

Once you have uploaded all your social media icons to Photobucket, you need to grab the direct link URL of each icon file. To do this, view your album and then hove your mouse over the photo. Photobucket will pop-up different URLs; you select the “Direct Link” URL from other options.

When you are ready, simply click on it to copy the direct link in Photobucket.

Step 2:- Inserting the image links

You need to place the social media icons where you want them to appear on your site. Usually, people place the icons on the sidebar, and that is what we are going to do.

1. If you are using WordPress, add a new text widget to your sidebar by opening up a Widgets Area (Appearance> Widgets).
2. If you are using Blogger, add an HTML/JavaScript widget to your sidebar by going to the Layout area of your blog.

No matter which platform you are using, copy and paste the following script into the new widget area you just created. Just select the code, and then, copy and paste it:

<a href=”http://www.yourwebsitetolinkto.com”>
<img src=”http://www.PhotobucketDirectLink.com/imagename1.jpg” />
</a>

This is the only code you need to use a social media icon on the sidebar of your site.

• The first part, “href” part, is the actual link to whatever website you want to link to, Facebook or Twitter, for example.
• The second section, the “img” section, is the location where your social media icons are hosted. Change the img URL on the example above to the direct link to your own icon.

Keep both the website URL and the icon URL within the quotes.

After this, you repeat the whole process for every social media icons you want to use on your site.

Step 3: Customizing the social media icons

The basic code above will get your icons to show up on your sidebar, but they will look plain and simple. If you want nothing more, simply copy and paste the code above and save. But if you want something more, then you would be interested in:

a) Open the link in new window: – If you want the link to open in a new window, rather than in the same window, you need to add a “target.” Insert the _black parameter to tell your blog to open the link in a new window.

<a href=”http://www.yourwebsitetolinkto.com” target=”_blank” >
<img src=”http://www.PhotobucketDirectLink.com/imagename1.jpg” />
</a>

b) Using different size icons: – Maybe you want to use different size social media icons on your sidebar. The social media icon pack that you downloaded from our previous article – – has icons in wide range of sizes (16px/32px/64px/128px/256px up to 512px).

Maybe the icon pack does not have a size you want to upload. You can manually resize your social media icons with a photo editors like Photoshop, GIMP, or Picasa. After resizing, you are still not sure if you will be using this particular icon on the site just yet.

Maybe, you just want to test how it displays on your site first.

Manually resizing your icons and uploading them on the server repeatedly could be time-consuming. Instead, you can set the new height and width for your icons by adding a parameter in the same code. You can insert both a height and width setting, but doing just one will take care of the sizing.

In this example, I have set the width to 28px wide. Change the 28 to whatever number you wish to use:

<a href=”http://www.yourwebsitetolinkto.com” target=”_blank” >
<img src=”http://www.PhotobucketDirectLink.com/imagename1.jpg” width=”25″ />
</a>

c) Adding alternate text to your icons: – In case the icon does not load for whatever reason, you can set the alternate text to tell the browser what the icon is. To do that, simply add the alt parameter like the example below.

<a href=”http://www.yourwebsitetolinkto.com” target=”_blank” >
<img src=”http://www.PhotobucketDirectLink.com/imagename1.jpg” width=”25″ alt=”Write a description for the social media icon here” />
</a>

d) Centering the social media icons:- Let us say that you want your social media icons to appear at the center. How can you do that? Just add a DIV (division box, a CSS term) around the anchor HTML element like the example below.

<span style=”text-align:center”>
<a href=”http://www.yourwebsitetolinkto.com” target=”_blank” >
<img src=”http://www.PhotobucketDirectLink.com/imagename1.jpg” width=”25″ alt=”Write a description for the social media icon here” />
</a>
</span>

Step 4: Save your work and complete

Finally, once you are happy how your social media icons look on the sidebar of your website, save your work by saving your widgets. Go grab a coffee and come back to check out those beautiful social media icons on your site.

Related article: 15+ Gorgeous Sets of Social Media Icons