Para que los buscas uno por uno. Aquí te muestro todos los widgets de Facebook para páginas web como los botones «Me gusta» y «Compartir».

Aprende a instalarlos en tu web siguiendo los pasos que se muestran de forma clara en este articulo.

Y no le hace que plataforma uses (Blogger o WordPress, da igual) pues estos gadgets son universales y por ende se insertan gracias a unas simples lineas HTML.

---

Anuncio:

Botones y demas plugins de Facebook oficiales:

Se trata de los que son producidos y distribuidos por la misma red social de manera estándar. Puedes encontrarlos todos aqui.

Para ponerlos en una web hay que instalar primero el SDK for JavaScript, un proceso demasiado sencillo.

Instalación de dicho SDK en Blogger, WordPress, etc

Copia esté código y ponlo en tu sitio:

<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/es_LA/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

El código HTML debe servirse en todas las páginas por lo que es recomendable ponerlo en el «Footer» o en el «Body» general del sitio.

La mayoría de las plataformas de desarrollo web permiten hacer esto, está lista da enlaces hacia un Gif que muestra como hacerlo en los mas famosas.

Si usas una que no aparece intenta allí averiguar si es posible hacerlo, si no tendrás que poner el código manualmente en las páginas de tu web en donde vayas a mostrar un plugin (algo igualmente sencillo).

Es decir, insertarlo como cualquier otro código de widget.

– Botones «Me gusta» y «Compartir»

Una vez que ya tienes el SDK en tu web ya puedes instalarle todos los widgets de Facebook a esta.

Algo de lo mas común, los botones de Like y Share.

Procedimiento de inserción:

1. Dirígete a la página oficial del gadget.

2. Haz clic en: Configurador del botón «Me Gusta».

3. Revisa los parámetros.

• URL para indicar «Me Gusta»: Lo mas recomendable es dejar vació el campo, así el botón funcionara con la página en donde se encuentre.
• Width: Deja también vació este campo (por defecto).
• Diseño: Elige una opción a tu gusto.
• Tipo de acción: También a tu gusto, pero sin duda es mejor usar el «Like».
• Es recomendable dejar marcada las opciones «Mostrar caras de amigos» e «Incluir botón «Compartir».

4. Haz clic en obtener el código.

5. Copia el segundo y ponlo en tu sitio exactamente donde quieres que aparezcan los botones.

Su código por defecto es el siguiente:

<div class="fb-like" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

– Botón «Seguir»

1. Ingresa a la página oficial del widget.

2. Haz clic en: Configurador del botón «Seguir».

3. Analiza los parámetros.

• URL del perfil: Añade lo que va después del facebook.com/ en la URL de tu página o perfil personal.
• Width y Heigth no se llenan a menos que el espacio donde vas a poner el widget sea muy pequeño.
• Lo demás es a tu gusto y/o necesidad.

4. Da clic en obtener el código.

5. Copia el segundo e insertalo en tu web precisamente donde quieres que aparezca el widget.

Su código por defecto es el siguiente:

<div class="fb-follow" data-href="https://facebook.com/laurldetupagina" data-layout="standard" data-size="small" data-show-faces="true"></div>

– Botón «Guardar»

1. Dirigete a la página oficial del gadget.

2. Haz clic en: Configurador del botón «Guardar».

3. Revisa los parámetros.

• Enlace de un sitio web o producto para guardar: Lo mas recomendable es dejar vació el campo, así el plugin funcionara con la página en donde se encuentre.
• Tamaño del botón: Elige una opción a tu gusto y/o necesidad.

4. Haz clic en obtener el código.

5. Copia el segundo y ponlo en tu sitio exactamente donde quieres que se muestre el widget.

Su código por defecto es el siguiente:

<div class="fb-save" data-size="large"></div>

– Botón «Enviar»

1. Ingresa a la página oficial del gadget.

2. Haz clic en: Configurador del botón «Enviar».

3. Analiza los parámetros.

• URL para «Enviar»: Lo mas recomendable es dejar vació el campo, así el botón funcionara con la página en donde se encuentre.

4. Da clic en obtener el código.

5. Copia el segundo y ponlo en tu web precisamente donde quieres que se visualice el gadget.

Su código por defecto es el siguiente:

<div class="fb-send"></div>

– Fanbox (Page Plugin)

1. Dirigete a la página oficial del gadget:

[sociallocker]https://developers.facebook.com/docs/plugins/page-plugin[/sociallocker]

2. Baja hasta llegar al configurador del widget.

3. Revisa los prametros.

• URL de la página de Facebook: Añade lo que va después del facebook.com/ en la URL de tu página.
• Pestañas:
• Ancho y Alto:
• Lo mejor es dejar marcadas las opciones: «Adaptar el ancho del contenedor del plugin» y «Mostrar rostros de amigos».
•  Igualmente, los demás parámetros son a tu necesidad y/o gusto.

4. Haz clic en obtener el código.

5. Copia el segundo y ponlo en tu web exactamente en donde quieres que se visualice el fanbox.

Su código por defecto es el siguiente:

<div class="fb-page" data-href="https://www.facebook.comlaurldetupagina" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>

– Comentarios

1. Ingresa a la página oficial del gadget.

2. Haz clic en: Configurador del plugin de comentarios.

3. Analiza los parámetros.

• URL para comentar: Lo mas recomendable es dejar vació el campo, así el botón funcionara con la página en donde se encuentre.
• Ancho: Modificalo según el espacio donde vayas a poner la caja de comentarios.
• Número de publicaciones: Es a tu gusto, aunque siempre se deja así, por defecto.

4. Da clic en obtener el código.

5. Copia el segundo y ponlo en tu web precisamente donde quieres que este la caja.

Su código por defecto es el siguiente:

– Marcar para compartir «Citas»

1. Dirígete a la página oficial del gadget.

2. Haz clic en: Ejemplo de código.

3. Copia la linea del comentario #4 que hay dentro del ejemplo.

5. Pégala dentro de donde quieras que funcione el plugin.

Otros widgets de Facebook – Extraoficiales

Algunos usuarios se encargan de tomar los widgets estandares para crear nuevos, con diferentes estilos y posiciones.

– Fanbox estático en una esquina con efecto deslizante

Es un llamativo gadget que muestra el Page Plugin estático en un costado semioculto y que al pasar el cursor por ahí, se abre con un bonito efecto deslizante.

– Page Plugin en un popup con efecto «fade»

Este gadget lo muestra dentro de un popup moderno y totalmente configurable que al aparecer y desaparecer genera un efecto de difuminación.

– Facebook Messenger Chat de contacto

Una opción para colocar un chat en tu web, pero con el sistema de mensajería instantánea de esta red social. Puede llegar a ser mas eficaz que Zendesk o Chatra.

Botones con funciones parecidas a las de Facebook

– Reactions Widget by VICOMI

Este complemento es mas que genial. Es la revolución de los widgets de rating. Tiene el mismo funcionamiento que la famosa característica de Facebook.

Son botones con reacciones que demostrarán como toman tu contenido los usuarios.

Haz clic aquí para ir al sitio para obterlo