√ Facebook like box animado con css3

Facebook like box animado con css3

junio 16, 2015

Hola ...en esta oportunidad les compartiré de un like box para facebook animado con css3.

Facebook como sabemos es una de las redes mas importantes actualmente , sobre todo si tienes una pagina de facebook y deseas
hacer conoces tu negocio ya sea por facebook , es por eso que te compartiré un like box que de seguro les sorprenderá a tus visitantes .

Como ven en estas imagen al costado izquierdo el like box tiene un espectacular animación que al pasar el mouse sobre ella mustra
tu like box con un estupendo animación hecho con css3.
Este like box normal mente funciona en : Blogger , Wordpress , Typepad , Foro y otros sitios generales que circula en internet.

Ahora sigue estos pasos a continuación para ponerlo en nuestra pagina web.

1. Copia este Javascript SDK y ponerlo debajo de esta etiqueta : <body>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : &#39;841812812528433&#39;,
      xfbml      : true,
      version    : &#39;v2.3&#39;
    });
  };

  (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 = &quot;//connect.facebook.net/es_LA/sdk.js&quot;;
     fjs.parentNode.insertBefore(js, fjs);
   }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

2. Copia estos codigos de la animacion CSS3 y ponle encima de : ]]></b:skin>

#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; 
}

3. Por ultimo copia estos codigos HTML y ponle donde deseas .

<div id="fb-root"></div>
<div id="facebook_block">
    <div class="fbcontainer">
    <h4 >Sigueme en Facebook</h4>
    <div class="facebook-fanbox">
        <div class="fb-like-box" data-href="https://www.facebook.com/danydanielrt" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false">
        </div>
    </div>
    </div>
</div>

En este codigo html solo cambia mi nombre de mi pagina de facebook : danydanielrt por la tuya.
y guardas los cambios y listo . Ya tienes un like box animado .

Fuente :http://w3lessons.info/

Danos Tu Reaccion Sobre el Articulo

DanyTutos PRO

Facebook like box animado con css3

Facebook like box animado con css3

Discussion