2011
How to add fixed Twitter and Facebook icon
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
Hi,
I love designing WordPress Themes and Drupal Themes.
Share this post
