En este tutorial vamos a aprender cómo poner Facebook en WordPress y veremos cómo integrar varios elementos de Facebook con y sin plugin.
Vamos a aprender a poner:
- Botón de compartir contenido en Facebook
- Enlaces de Facebook
- Caja de Feed de Facebook
- Poner perfil de Facebook en el Sidebar mediante Widgets
- Poner los comentarios de Facebook en WordPress
Herramienta Developers Facebook
Developers.facebook.com es un sitio web, donde podemos encontrar generadores de código sencillos para poder insertar elementos de Facebook, como el perfil, el muro, el chat o los comentarios, dentro de nuestras páginas web.
Tiene las ventajas de que no necesitaremos plugin adicionales para mostrar estos elementos en WordPress y es muy fácil de utilizar incluso para usuarios sin experiencia en código.
Poner el Feed de Facebook sin plugins
Seguramente estés en este tutorial por qué quieres poner el Feed de Facebook en un Widget para la barra lateral o el Footer de WordPress.
Vamos a integrar la caja de Facebook con las publicaciones sin utilizar plugins.
Con esta caja podrás:
- Mostrar el Timeline de las publicaciones de Facebook
- Mostrar la pestaña de eventos de la Fan Page
- Mostrar una caja de mensaje directo de Facebook
- Compartir la página en Facebook
- Mostrar el botón de «Me gusta»
Generar el código iframe de Facebook
Crear el Feed de Facebook es muy sencillo, ya que las herramientas oficiales de Facebook nos permiten generar el código necesario para después pegarlo en un Widget de HTML.
Primero, vamos a la web Developers Facebook > Documentación > Plugins Sociales > Plugin de página o haz clic en este enlace.
https://developers.facebook.com/docs/plugins/page-plugin
En URL de la página de Facebook: ponemos la URL de nuestra Fan Page
En Pestañas: podemos agregar las pestañas que queremos que se visualicen, si ponemos «Timeline» se mostrará el feed de Facebook, si ponemos «events» se muestra la pestaña de próximos eventos, y si ponemos «messages» se muestra un chat que permite enviar un mensaje a la Fan Page.
Puedes mostrar las tres pestañas si lo separas con comas y también puedes no mostrar ninguna pestaña para crear una caja de Facebook minimalista que solo muestre el acceso directo a la Fan Page.
En Anchura y altura: puedes personalizar el ancho y el alto de la caja de Facebook
Usar un encabezado corto: reduce el tamaño de la imagen de portada.
Adaptar a la anchura del contenedor del plugin: adaptar la caja de Facebook al tamaño adecuado automáticamente.
Ocultar la foto de portada: no mostrará la imagen de portada de la Fan Page.
Mostrar caras de amigos: muestra las imágenes de los perfiles de nuestros contactos de Facebook a los que les guste la Fan Page.
Una vez configurado pulsamos el Botón «Obtener código» y nos dirigimos a la pestaña iframe para copiar el código iframe de Facebook
Poner Facebook en la barra lateral o footer
Pega el código iframe dentro de un Widget de HTML para integrar Facebook en la barra lateral o en el Footer de WordPress.
Asegúrate de que todo el código está en minúsculas.
Una vez guardado el Widget se mostrará el Feed de Facebook en el Sidebar.
Botón de me gusta y compartir en Facebook
Si queremos poner un botón de me gusta y compartir en Facebook para las publicaciones de WordPress podemos crearlo sin plugins desde las herramientas para desarrolladores de Facebook.
Crear el botón de Facebook mediante código es ideal si solo quieres mostrar el botón de Facebook, pero si quieres mostrar más iconos de otras redes sociales es más cómodo utilizar un plugin de botones sociales (más adelante vemos algunos plugin de botones sociales).
Vamos al Generador de código para el botón de Facebook.
Y configuramos las características del botón, la Url de la FanPage de Facebook , el tipo de botón y después generamos el código iframe.
Al igual que antes tendrás que copiar el código iframe de Facebook en un Widget de HTML para mostrarlo en la barra lateral o el footer de tu web.
Insertar publicación de Facebook
Si lo que queremos es insertar una publicación de una FanPage de Facebook en WordPress podemos generar el código desde la propia publicación.
Haz clic en los tres puntos de la esquina superior derecha en cualquier publicación para extender el menú de opciones.
Pulsa en la opción «Insertar» (Si no la ves pulsa en la opción «Más Opciones»)
Copia el código iframe de la publicación de Facebook.
Puedes pegar el código iframe de Facebook dentro de un post de WordPress en la pestaña HTML o dentro de un Widget igual que se ha explicado antes.
Plugins de Facebook para WordPress
Aunque podemos ahorrarnos plugins utilizando el generador de códigos puede ser más cómodo utilizar plugins para insertar y personalizar el Feed de Facebook en nuestra web.
Existen cientos de plugins para Facebook, recuerda instalar solo los que tengan buenas reseñas, sean muy utilizados y estén al día con las actualizaciones.
Simple Facebook Plugin
Simple Facebook Plugin: Un plugin muy sencillito que únicamente nos proporciona un Widget de Facebook para insertar el Feed de Facebook.
Como vemos genera un Widget con las mismas opciones ofrecidas por la herramienta Developers.facebook.com.
Custom Facebook Feed
Custom Facebook Feed de Smashballoon.com es un plugin Fremium (Gratis con opciones de pago) para Facebook. La versión gratuita no me convence demasiado ya que aunque nos permite personalizar mucho el Feed, no muestra las imágenes de los post de Facebook. Pero la versión de pago es muy útil si quieres crear un Feed de Facebook Personalizado.
La versión de pago vale la pena si quieres crear Feeds de Facebook muy específicos o totalmente personalizados ya que permite:
- Insertar un Feed de Facebook tanto de las Fanpages como de los grupos de Facebook
- Personalizar el Feed con un montón de opciones para el color de fondo, bordes, tipografía, tamaño etc..
- Mostrar las publicaciones por tipo de publicación, autor, hashtag.
- Mostrar las imágenes.
- Crear galerías con las imágenes o videos de las Fanpages.