In this post I’m going to explain to How to display Animated Facebook Like Box using CSS3 alone.
I’m sure that this tutorial will be very useful for website owners to pull users to like their Facebook Fan Page. Anyone can easily integrate this code in your website which is in Blogger, WordPress, Typepad,Forums & other general websites
Please see the demo to see the script in action 🙂
View Live DemoContents
Step 1
You need to get the facebook like box SDK from facebook developers site – https://developers.facebook.com/docs/plugins/like-box-for-pages
Step 2
Include this javascript SDK right after the opening <body> tag.
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Place this html code in your webpage
<div id="fb-root"></div>
<div id="facebook_block">
<div class="fbcontainer">
<h4 >Follow us on Facebook</h4>
<div class="facebook-fanbox">
<div class="fb-like-box" data-href="https://www.facebook.com/w3lessons.info" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false">
</div>
</div>
</div>
</div>
CSS3 code for Animation on Hover
Place this css code anywhere in your webpage
#facebook_block {
z-index:10999;
-webkit-animation: fadeinright 2.4s;
-moz-animation: fadeinright 2.4s;
-ms-animation: fadeinright 2.4s;
-o-animation: fadeinright 2.4s;
animation: fadeinright 2.4s;
position:fixed;
padding:0;
top:35%;
right:0;
margin-right:-258px;
width:auto;
height:310px;
overflow: hidden;
background: none;
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-ms-transition: all 240ms linear;
-o-transition: all 240ms linear;
transition: all 240ms linear;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
}
#facebook_block:hover {
margin-right:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
#facebook_block h4 {
background:#39599f;
padding: 15px 10px 14px 30px;
margin: 0;
position:relative;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
font-size:18px;
color: #ffffff;
}
#facebook_block h4:before {
position:absolute;
right:8px;
top:9px;
background:#ffffff;
width:30px;
height:30px;
display: inline-block;
color: #39599f;
text-align: center;
padding-top:8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
font-size: 16px;
content: "\f09a";
font-family: "FontAwesome";
-webkit-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-ms-transition: all 240ms linear;
-o-transition: all 240ms linear;
transition: all 240ms linear;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
#facebook_block:hover h4:before {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
#facebook_block .facebook-fanbox {
background: white;
border-style: solid;
border-color:#e5e5e5;
border-width: 0px 1px 4px 1px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
padding-bottom: 10px;
}
I have used third party FontAwesome font for Facebook Icon in the Header – fortawesome.github.io/Font-Awesome/
Download FontAwesome & include it in your webpage for better user experince
View Demo & Download
How did you do that scroll of Facebook?
Using css or jQuery?
Thank you!
The concept itself is great! But in this variant it works best in Chrome. Firefox 32 shows the box onhover but no contents inside. And IE 11 is very buggy (keeps trying to hide the box on a slightest mouse onhover movement 🙂