CSS3 – W3lessons

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 Demo

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;

}