You have seen many sites having fixed social icons in left or right side of the website. If you scroll the webpage up / down, social icons will remain at a fixed position. This is a good practice if you want to give more exposure to your social profile links like Twitter profile, Facebook profile etc.
This is possible using CSS. In this tutorial I will show you how to add fixed Twitter and Facebook icon on a website. So, first get Twitter and Facebook icon. Save the icons as twitter.png and facebook.png in images folder.
Step 1
Let’s first do the HTML part. Copy paste below code just after <body>
<div id="twitter"><a href="http://twitter.com/techyag" rel="me" target="_blank"><img src="images/twitter.png" alt="" /></a></div> <div id="facebook"><a href="http://facebook.com/techyag" rel="me" target="_blank"><img src="images/facebook.png" alt="" /></a></div>
In above code, you should change twitter and facebook link to your own profile link.
Step 2
Now we will do CSS part. To make social icons at fixed position, we will add fixed position property to IDs used for these icons.
img{
border: 0;
}
#twitter { position: fixed; top: 200px; left:0;}
#facebook { position: fixed; top: 290px; left:0;}
Done!!!
Check Live Demo
This method can also be used for WordPress, Drupal etc.