Follow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

September 22, 2012

How to Add Social Icons







Adding Social Icons to your blog is a great way for your readers to connect with you. It helps build your social network. This tutorial will show you how to add these icons.

First, you have to find the image or icon you want displayed for each social profile. There are many ways to do this. You can search for "Social Icons" or "Facebook Social Icon" via web or image search. You could also design your own or pay someone else to design them. There are actually a lot of great websites that offer free social icons that you can download. Just be careful when downloading files from unknown sources. 

Both of the below sites I have used and never experienced an issue.



Once you have your icons downloaded, you may need to resize them to fit your sidebar. I use Picmonkey, Picasa or LunaPic because they are simple and free. The most popular sizes are 64x64, 48x48 and 32x32 pixels. Again, it depends on the size of your sidebar. 

Once you have them resized you need to host the images somewhere. I use Photobucket or Flickr to host my images. Locate the Direct Image Url because you will need it in a moment. 

Depending on how you want your icons displayed there are different codes for each. If you want them horizontal or side by side you could use a html table code. 

For one row of four icons you could use this:

<div></div><table border="0"><tbody><tr><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td></tr></tbody></table>

The 0 in the first line is the border size. You can customize it to your liking. 

For two rows of four icons each:

<div></div><table border="0"><tbody><tr><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL"/></a></td></tr><tr><td><a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL" /></a></td><td><a href=" URL OF SOCIAL PROFILE" target="_blank"><img src=" DIRECT IMAGE URL" /></a></td><td><a href=" URL OF SOCIAL PROFILE" target="_blank"><img src=" DIRECT IMAGE URL" /></a></td><td><a href=" URL OF SOCIAL PROFILE" target="_blank"><img src=" DIRECT IMAGE URL" /></a></td><td><a href=" URL OF SOCIAL PROFILE" target="_blank"><img src=" DIRECT IMAGE URL" /></a></td></tr></tbody></table></div>

The <tr><td> is where the next row begins.

If you want vertical icons or one on top of the other, use this code:

<a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL">
<a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL">
<a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL">
<a href="URL OF SOCIAL PROFILE" target="_blank"><img src="DIRECT IMAGE URL">

It may look overwhelming but it's actually the same code over and over again. 

To add the social icon code to Blogger, go to Layout in your Blogger dashboard. Click Add a Gadget where ever you want it displayed and choose HTML/JavaScript. Then copy and paste your new social icon code and click Save

That should do it. Let me know if you need any help with this.