Implementar el boton de «Me gusta» de facebook es tarea sencilla, lo que hay que tener en cuenta es un par de consejos que no todos saben a la hora de utilizar el que mejor convenga para tu proyecto, te explicamos las diferencias Pero, antes que nada, lo que necesitas es apuntar esta pagina: Facebook Developers Like Button Existen 2 formas de implementar el boton de Me Gusta y no necesariamente la forma mas usada es la mejor, tenemos via HTML5 o XFBML o bien podemos elegir el modo IFRAME. Generalmente introducir codigo Iframe no es lo ideal, por eso muchas personas van corriendo a configurar el boton de Facebook Like en la pagina antes mencionada y donde dice «Get the Code» eligen la opcion HTML5 o XFBML.
HTML5 o XFBML:
Implementar una de estas opciones implica cargar el codigo Javascript que facebook menciona en el header.php o bien footer.php de nuestro WordPress o la pagina html que te encuentres desarrollando, para evitar que la carga de este javascript haga en efecto mas lenta la carga de tu web o bien que corte el proceso de renderizado de la web, sugerimos cargarlo en la ultima linea del footer.php si vas a usar la version HTML5 o XFBML. Luego, insertarias el codigo del boton de Like en la pagina donde te interesaria que las personas lo presionen, esto generalmente vendria a ser en loop-single.php o bien single.php si usas wordpress, este archivo generalmente se encuentra dentro del directorio del theme que estes usando, debes buscar una linea que se parezca a
</div> <!– end entry–>
Si no estas seguro exactamente de donde, tan solo insertalo luego de la secuencia
<?php the_content()>
Sugiero usar
<span class=»facebook-like»>codigo-de-like</span>
Para luego agregar:
.facebook-like {width:100px;background-color:#404040;border-radius:5px;}
O algo similar que le permita estilizar el boton dentro de una caja con bordes.
IFRAME:
La version Iframe es inferior en funcionalidad pero retiene un aspecto fundamental que la hace la opcion ideal a elegir a la hora de implementar el boton: velocidad. Para implementar la version iframe no es necesario insertar codigo en el footer.php o header.php pero deberemos modificar levemente el codigo otorgado por facebook para que se ajuste a una pagina comun de wordpress (si en efecto queremos insertar el boton dentro de un articulo en el loop-single.php El codigo se modifica de la siguiente manera:
<iframe src=»//www.facebook.com/plugins/like.php?href=<?php the_permalink() >&send=false&layout=box_count&width=450&show_faces=false&
action=like&colorscheme=dark&font&height=90&appId=413076818708187″ scrolling=»no» frameborder=»0″ style=»border:none; overflow:hidden; width:450px; height:90px;» allowTransparency=»true»></iframe>
En vez de introducir una direccion http dentro de href= como facebook sugiere, le introducimos el call the_permalink para que wordpress introduzca automaticamente la direccion actual de nuestra pagina (generada automaticamente). Eso es todo!, puedes encerrar el codigo <iframe></iframe> entre <span class=»facebook-like»></span> y estilizarlo como explique en el ejemplo anterior.
Diferencias:
Existen ciertas diferencias entre la version XFBML/HTML5 y la version IFRAME. Para comenzar la version IFRAME no permite utilizar caras, no permite utilizar el boton Facebook Send, tampoco permite publicar en facebook con comentarios adicionales desde el mismo boton de like, para esta funcionalidad se requiere el Javascript que insertamos anteriormente, pero, que hay de esto si solo queremos usar el boton como un boton, efectivamente, sin caras, sin funcionalidad adicional? Entonces la version IFRAME es definitivamente superior, veamos porque. Facebook realiza mas de 20 calls a las librerias Javascript de Facebook Like solamente para insertar el boton en pantalla!, mientras que la version Iframe esta invocando meramente a la pagina: http://www.facebook.com/plugins/like.php creo que no necesito explicar en detalle el porque invocar a un archivo php es muchisimo mas rapido que invocar mas de 20 funciones dentro de un archivo Javascript que debe cargarse previamente. No me creen? pruebenlo ustedes mismos, inserten ambos botones, version HTML5/XFBML y IFRAME, asi es, ambos botones en la misma pagina, hagan refresh y vean cual aparece primero, en conexiones rapidas no se nota demasiado, pero en conexiones lentas, la diferencia es realmente marcada.
Conclusion:
Implementar el boton de Like es muy facil, si lo que quieres es funcionalidad la version HTML5/XFBML sera la que debas usar, sin embargo, para todos los fines practicos, aconsejo seriamente usar la version IFRAME, carga mas rapido, es menos pesada, no requiere usar Javascript adicional y es mucho mas simple de implementar. Cuentanos cual estas usando y cual fue tu experiencia.
