Adding Social Media Icons to Your Site using CSS3

Welcome to m-sign.nl! In this tutorial we’ll discover how to add social media icons into your blog or website by using css. Usually these are added so you allow visitors they can follow you on facebook, twitter and even allow them to influence you. We’ll rebuild the media-icons and make them able to pop-up from the navigation bar when hovering them, such as they are displayed in the header of m-sign.nl.  At last we use the css3 transition attribute for a more smooth animation when hovering the icons.

The Tutorial: Adding Social Media using CSS3

While there are many popular and handy plugins to add social media to your website, as this website does in the form of the sociable and facebook plugin, you can easily hardcode this, thereby having more freedom in it’s position and icons that are displayed. This tutorial will learn how to the Social Media Icon bar that is displayed in the header of this site is made, and will explore the possibilities of the background-position attribute hovered and unhovered and the z-index attribute. There is only focused on the icon’s, which means that we will not design the header or the navigation bar in this tutorial. Have fun! The endresult is showed in the header of this site. You can also view the very basic quick demo here

.

Step 1: Grabbing the Sprite Image

Depending on what social media you are going to add to your site, you need the icons for the social media. Do think about what social media you want people to follow you. Many social media like twitter, facebook and flickr can be connected to each other.You can grab icons from the web or remake them in Illustrator or Photoshop (the latter makes it easy to adjust them to your own style). I chose six icons, from rss to youtube to be displayed on my site. Also I rotated them 45 degrees and scaled them to be medium to big of size. Depending on your own site you can scale them to what fits with your design (but please note that the css background-position values are designed for the image I use). I put all icon’s into a single image, because we are going to use a sprite technique using css background-position to use this single image for displaying multiple icons. More on the use of sprites,what they are and how it exactly works can be found in this tutorial. Now onto the important part. This is the image I’m going to use in the tutorial:

Step 2: The HTML Explained

There are three colored parts that are important for this tutorial.The focus in this tutorial is on the red part, but it is important to understand the function of the two other areas. These are not styled in this tutorial.

1. First we have the header container, which is outlined with the thick blue line.
2. Secondly we have the icon container, where all icons are put in. It is put in a container so we can simple place this container anywhere in the header were we want. This is outlined with red.
3. At last, outlined with purple, is the navigation bar. We want the navigation bar to be on the top of the icons, so the icons are behind the navigation bar when popped in, and we want the icons to pop out when hovering. Without this bar covering the icons partly, the icons will only translate up and there will be no pop-up effect.

In the HTML below we have a div with and header_container id, which resembles the blue area. The styling of this area is not discussed, so you can add your custom css styling here. However, your header should be wider than the total icon width. Within this container is an ‘iconplacer’ id which resembles the red outlined area. This is the container for our icons. Usually listed items are put into a list (<li> selector), but here I chose for the mininum of html code. Each Icon has a seperate class and is within a seperate <a> selector. At last we have the navigation id, which ich for the navigation menu. This is held into one div with the totalwrapper id. You can add any item or styling to these divs, but remember the navigation div can not be transparant because the icon’s must be able to hide underneath them.

</pre>
<div id="totalwrapper">
<div id="headercontainer">
<div id="iconplacer"><a class="rssfollow" title="Subscribe to Rss" href="http://feeds.feedburner.com/m-sign/lIzm" target="_blank">M-Sign RSS</a> <a class="facebook" title="Leichim on Facebook" href="http://www.facebook.com/leichimgfx" target="_blank">Leichim on Facebook</a> <a class="twitterfollow" title="Leichim on Twitter" href="http://twitter.com/Leichimgfx" target="_blank">Leichim on Twitter</a> <a class="deviantart" title="Leichim on Deviantart" href="http://leichim.deviantart.com/" target="_blank">Leichim on Deviantart</a> <a class="flickr" title="Leichim on Flickrs" href="http://www.flickr.com/photos/leichim/" target="_blank">Leichim on Flickr</a> <a class="youtube" title="Leichim on Youtube" href="http://www.youtube.com/user/Leichimgfx" target="_blank">Leichim on Youtube </a></div>
</div>
</div>
<pre>

Step 3: Lay it out with CSS

Now, in the html part we have seen each class and id described. Let’s style them! We first want to describe the general container, below its position relative to the header container is described. The z-index of the #iconplacer should be lower as the value of your #navigation id (here the z-index is 0). The icons shoud be clickable, and that is why we added text between each in the html. We however do not want this text to show, so we use text-indent to set up a large indent. A small margin is added so there is a little space between each icon.

/*********** Social Media Icons *********************/
#iconplacer{margin:0; position:relative; top:82px; left:425px; z-index:0;}#iconplacer a {margin-right:3px;text-indent:-10000px;float:left;

transition: background-position 1s ease-out;
-webkit-transition: background-position 1s ease-out;
-o-transition: background-position 1s ease-out;

}

As you can see the  transition attribute is used. This will make a transition between the unhovered and the hovered state.  As you can see it is applied to the background-position (since that is the one that changes when we are hovering),  the transition duration is 1 second and the way it transits is ‘ease-out’ which means that the animation starts fast and ends slowly. Currently it only works in Chrome and Opera. Now the class for each icon is described. As you can see each class is a lot smaller that the total final iconplacer container. The image on the background is positioned so, that every class has the right icon on its background: so that the right icon is in the rendered width and height that class has.

.rssfollow{
width:60px; height:50px;
background:url(images/iconsfollow.png) no-repeat -10px 10px;
}.facebook{
width:62px; height:50px;
background:url(images/iconsfollow.png) no-repeat -75px 10px;
}.twitterfollow{
width:60px; height:50px;
background:url(images/iconsfollow.png) no-repeat -142px 10px;
}

.deviantart{
width:64px; height:50px;
background:url(images/iconsfollow.png) no-repeat -205px 10px;
}

.flickr{
width:60px; height:50px;
background:url(images/iconsfollow.png) no-repeat -273px 10px;
}

.youtube{
width:60px; height:50px;
background:url(images/iconsfollow.png) no-repeat -338px 10px;
}

Now, we want every icon to pop-up when hovering. Very easy with css, we can just use :hover after each class. We can not use a:hover in general and only add a altered background -y- position. For each class the background position should be described again. Because our icons pop upwards, the x-value of course does not change in comparison to the classes described before.

/* Hover */
.rssfollow:hover{
background:url(images/iconsfollow.png) no-repeat -10px 0px;
}.facebook:hover{
background:url(images/iconsfollow.png) no-repeat -75px 0px;
}.twitterfollow:hover{
background:url(images/iconsfollow.png) no-repeat -142px 0px;
}

.deviantart:hover{
background:url(images/iconsfollow.png) no-repeat -205px 0px;
}

.flickr:hover{
background:url(images/iconsfollow.png) no-repeat -273px 0px;
}

.youtube:hover{
background:url(images/iconsfollow.png) no-repeat -338px 0px;
}

/***** end of social media additions ******/

Additionally, I quickly added some styling for the containers, and for the quick demo. This styling is very basic and ugly but discovers the possibilities.

body {background-color:#6CF;}
#totalwrapper{
margin:0 auto;}
#headercontainer{
background:#333;
height:132px;
width:800px;}
#navigation{
background-color:#FFF;
height:50px;
width:800px;
z-index:1;}

Step 4: Finished

This is the end of this short tutorial! If you like you can add more like a text with ‘follow me’, as shown in the image below.

The real demo is showed in the header of this site