Como usar los botones de Facebook en los sitios web

Todos los botones y widgets (cuadros) disponibles en Facebook para mostrarlos en las páginas de un blog o sitio web.
La red social Facebook debido a su popularidad es una inmensa fuente de tráfico y visitantes para los sitios de internet.
Para darle más visibilidad a lo que compartimos en nuestro blog o sitio, debemos crear los botones que faciliten a los lectores compartir las publicaciones en su perfil y que así llegue a otras personas y que de esa forma muchas de ellas entren a nuestro sitio.
También podemos usar un widget o cuadro para promocionar nuestra página en esta red y facilitar que los lectores se conviertan en nuestros fans, sin tener que salir de nuestro sitio.
El propósito de este artículo es explicar a los lectores que nos han preguntado, como crear los botones y widgets que usamos en este sitio y de paso comentar otros existentes.
Todo el código que compartimos está disponible en la página de Desarrolladores de Facebook.

Botones de Facebook para un blog o sitio web

Los botones y widgets de Facebook forman parte de los Social Plugins, utilidades creadas para la interacción de los sitios web con la red social.
Para usarlos no se necesita poseer una cuenta para desarrolladores, ni crear una aplicación (app), solo es necesario insertar el código necesario en las páginas donde se desean mostrar.
Otra opción es usar servicios auxiliares, pero en este caso no tendrán las mismas funcionalidades.
Para usar cualquiera de los botones o cuadros se necesita insertar en la página solo una vez el siguiente script que cargara el archivo JS con las funciones para inicializar cualquiera de los botones que especifiquemos.
<div id="fb-root"></div> <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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Botón Me Gusta (Like)

Es el botón más famoso y popular de Facebook, es un pequeño rectángulo que al dar clic encima abre un cuadro para indicar que nos gusta la página que estamos leyendo.
Es opcional agregar un comentario.
Como resultado se mostrara en nuestra biografía o página de perfil una publicación con el título del artículo que posee un enlace a la página. También una corta descripción.
Los amigos que reciban la publicación podrán al dar clic en el enlace entrar directamente a la página original.
El botón Me Gusta de forma predeterminada, muestra al lado un contador con el número de veces que la página ha captado un Me Gusta y miniatura de nuestros amigos en la red social que lo han usado.

El ancho predeterminado del botón es de 450 pixeles, por lo que debemos especificar un tamaño menor para que se adapte al ancho de la pantalla de los móviles.
Para eso le agregamos al código el parámetro "data-width" con el valor 292.
Puedes usar el siguiente código para insertarlo:
<div class="fb-like" data-width="292" data-show-faces="true"></div>

Como usar el botón Me Gusta en imágenes

En el código usado para renderizar el botón Me Gusta podemos usar el parámetro "href" para especificar la dirección exacta de la página que se desea sugerir. Si no se emplea el botón usa la dirección predeterminada de la página donde se encuentra.
Otra opción es indicar la dirección exacta de una imagen, para en este caso permitir a los lectores indicar que les gusta la imagen y compartirla con los amigos.
En ese caso se debe insertar el código justo después de una imagen.
Nosotros empleamos el siguiente código, solo reemplaza la dirección url de la imagen a usar:
<div class="fb-like" data-href="https://norfipc.com/img/social/compartir-en-facebook.jpeg" data-layout="button_count" data-send="true"></div>
De esa forma lo usamos nosotros en muchas páginas y nos trae como beneficio más visibilidad de lo que publicamos.
Un ejemplo se puede ver en la siguiente imagen:



Más información en Facebook

Botón Compartir (Share)

Funciona de forma algo similar al botón Me Gusta.
La diferencia es que el cuadro de Facebook que se abre ofrece más opciones para compartir y personalizar la publicación, podemos compartirla en nuestra página de perfil o en una página que administramos.
Podemos usar el botón Compartir de forma independiente o al lado del botón Me Gusta, este último es el método que empleamos en nuestro sitio.

Para eso solo es necesario agregar el parámetro "data-send"
<div class="fb-like" data-send="true" data-width="292" data-show-faces="true"></div><br>
Más información en Facebook.

Widget o cuadro de Page Plugin

Antiguamente llamado Like Box, Page Plugin es un cuadro usado para promocionar una página de Facebook.
La principal de las funcionalidades es que permite a los lectores indicar que les gusta nuestra página usando un botón, sin tener que entrar a Facebook, ni abandonar la página que están leyendo.
El cuadro muestra la imagen y el icono de la página, el número de me gusta y varias miniaturas de nuestros amigos que les gusta esta página.
Esto puede ser decisivo para que los lectores se interesen por esta página.
Además muestra dos botones, uno para indicar que nos gusta la página y otro para compartirla.
El Widget se puede personalizar para modificar el tamaño del cuadro y decidir qué elementos se mostraran.
Nosotros especificamos el tamaño máximo que es 500 pixeles, pero es completamente adaptable o sea que se adapta al tamaño de la pantalla del dispositivo.

Se debe especificar un tamaño menor solo si pretendemos mostrarlo en la barra lateral u otra zona de tamaño reducido.
Por supuesto, para usar este widget necesitamos crear una página en Facebook para nuestro sitio y mantenerla actualizada compartiendo en ella todo lo que publicamos.
Nosotros usamos el siguiente código:
<div class="fb-page" data-href="https://www.facebook.com/norfipc.face" data-width="500" data-height="300" data-show-posts="false"></div>
Más información en Facebook.

Botón de seguir (Follow)

Permite que otras personas se conviertan en seguidores o fans de nuestro perfil o de otro.
Solo funciona especificando la dirección de una página de perfil o biografía, no de una página de Facebook.
Yo no lo puedo emplear ya que utilizo Facebook como NorfiPC (página de Facebook) y no como Norfi Carrodeguas (página personal).

Usa el siguiente código para mostrarlo:
<div class="fb-follow" data-href="https://www.facebook.com/nombre-de-usuario"></div>
En el parámetro "data-href" es necesario especificar la dirección en Facebook de la persona a seguir.
Más información en Facebook.

---

Cuadro de Comentarios

Plugin que permite a las personas dejar comentarios en cualquier página web, usando su cuenta de Facebook.
Los comentarios se pueden moderar y también vanear personas por el administrador de la página.
Para eso es necesario incluir una etiqueta de Open Graph con el user de Facebook o con el número de identidad de la App.

Hemos usado el siguiente código:
<div class="fb-comments" data-href="https://norfipc.com/codigos/como-usar-botones-facebook-en-los-sitios-web.php" data-colorscheme="light" data-numposts="6" data-width="100%"></div>
Todos los comentarios agregados por los visitantes, se pueden ver y administrar con la Herramienta de moderación de comentarios
Más información en Facebook.

---

Botón Enviar (Send)

Es un botón que permite enviar publicaciones de forma privada y directamente con una persona en Facebook.
Para eso en el cuadro que se abre debemos seleccionar o escribir el nombre de usuario de un amigo.

Usa el siguiente código:
<div class="fb-send" data-href="https://norfipc.com/codigos/como-usar-botones-facebook-en-los-sitios-web.php" data-layout="button_count"></div>
Nosotros no lo utilizamos en nuestro sitio, pero puede ser una opción válida y útil para algunos.
Más información en Facebook.

---

Chat de Facebook Messenger

Facebook Customer Chat es un widget que facilita a los lectores, iniciar un chat con nosotros a través de Facebook Messenger, sin salir de la página donde están.
Es fácil de usar, los visitantes dan un clic en el botón, escriben su mensaje y recibimos una notificación inmediata para iniciar la conversación.
Para agregar el widget a cualquier página es necesario además del código, indicarle a Facebook solo una vez el dominio donde se insertará el widget.
Para eso entra en tu página de Facebook, escoge Configuración, Plataforma de Messenger y en el cuadro de Whitelisted domain introduce la URL de tu sitio web.
El código para insertar el widget es el siguiente:
<div class="fb-customerchat" page_id="182432635162458"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'APP_ID', autoLogAppEvents : true, xfbml : true, version : 'v2.11' }); }; (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 = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
Sustituye los caracteres de "page_id" por los que corresponden a tu página de Facebook.

Etiquetas de Open Graph

Al compartir cualquier dirección de una página en Facebook, automáticamente el buscador (crawler) escanea la información sobre los elementos de la página.
Para que Facebook detecte correctamente el título de una página, la descripción y las imágenes que contiene, necesitamos usar las etiquetas de Open Graph.
Es un protocolo de Facebook que también facilita que nuestro contenido pueda aparecer en las búsquedas de esta red social.
Si planeamos apoyarnos en nuestro sitio con las acciones de los me gusta y compartir de Facebook, debemos de usar Open Graph que convierte un simple archivo HTML en un Objeto Open Graph.
Lee información detallada sobre el uso de estos metatags: Como usar las etiquetas de Open Graph de Facebook en los sitios web