28
Apr
2011

How to add fixed Twitter and Facebook icon

Posted in: CSS No Comments

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.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply