Personalizar la caja de like con CSS

PERSONALIZAR LA CAJA DE FANS DE FACEBOOK CON CSS

Buenas, aquí con otro tutorial de lo que seria el cambio de estilo a el boton tradicional de "me gusta" fb, muy sencillo y util para un aspecto personalizado de el mismo, utilizando como base fundamental los estilos css.

Sí te gusta el resultado, lo puedes añadir perfectamente en Blogger o en otra plataforma. En Blogger sería de está forma, ves a Blogger→Diseño→Añadir Gadget y copia y pega el siguiente código que ves abajo a continuación o seguidamente:

<style> .facebookOuter { width: 280px; height: 150px; border-radius: 3px; position: relative; background-color:#f4f4f4; padding:5px 10px 15px 0; } .facebookOuter, .facebookOuter:before, .facebookOuter:after { background: #f4f4f4; border: 1px solid #ccc; } .facebookOuter:before, .facebookOuter:after { content: ""; position: absolute; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .facebookOuter:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #ccc; } .facebookInner { height:155px; overflow:hidden; } </style> <center> <div class="facebookOuter" style="float:center;"> <div class="facebookInner"> AQUÍ DEBERÁS DE COLOCAR EL CÓDIGO IFRAME DE TU CAJA DE FANS </div> </div> </center>

1. ¿Para colocar el iframe que te he resaltado en el código en mayúsculas? 
2. Debes de ingresar en Like Box: Desarrolladores. 
3. Una vez ingresado en dicho enlace, sigue estás instrucciones: 
4. Añade tu URL de tu página de Facebook Fan.
5. Añade el ancho de la caja, el height (la altura). 
6. Show Faces: Yes, Show Stream: No, Show Border: No, Color: Light, Show Header: No.
7.  Y finalmente le das al botón → Get Code. 
8. Ahora, selecciona la opción de código → Iframe, y coloca, inserta o copia y pégalo en la sección de la línea resaltada anteriormente. Y guarda el gadget que acabas de añadir, y listo.
9. ¿Te Gusto? Comentar es agradecer.

¡Compártelo!

Tweet