Facebook Widgets: Como configurarlos.

Elementor sigue haciendo de las suyas y cada vez es mayor el potencial que muestra al añadir nuevas funcionalidades a la hora de maquetar las páginas.

Este constructor web sin haber cumplido el año desde que fue lanzado, ha hecho las delicias de muchos diseñadores y emprendedores por su completo paquete de widgets y herramientas que tiene para diseñar las páginas y las entradas. Cada vez están añadiendo nuevas funciones.

Hace unos días actualizaron el plugin en el cual añadieron la función de deshacer y rehacer ante los posibles errores que pudiésemos tener cuando estamos diseñando. Muy útil para aquellos que nos dedicamos a esto. Lo echábamos de menos. 😅

Además ya están avisando por redes sociales que la cosa no se queda ahí porque están preparando otra actualización que tiene que ver mucho con los menús. Añadirán nuevas formas y efectos para personalizar el menú de tu web.

Entre medio de estas actualizaciones han incorporado los Facebook Widgets, o lo que es lo mismo: los widgets de facebook. 4 nuevas funciones que tiene que ver con la red social más usada en el mundo.

¡Vamos a probarlo!

👍 Facebook Button

Tras haber actualizado la versión de Elementor (Pro) comenzamos a probar los nuevos elementos de Facebook. El primer widget que nos encontramos es el tradicional botón de Facebook. Lo arrastramos hasta la zona donde queramos ubicarlo.

Podremos personalizar el botón a nuestro gusto según la idea que tengamos en mente. En tipo podemos elegir entre el típico botón de Like (Me gusta), Recomendar o Seguir.

La diferencia entre estas tres opciones es que el botón de «like» sirve para que esa publicación aumente el número de me gusta, «recommend» sería como compartir esta página y con «follow» conseguiríamos seguir a una fan page específica indicando su URL más abajo.

Opción de seguir a una página de facebook específica

En todas las opciones es posible modificar el diseño del botón en «layout». Tenemos hasta cuatro opciones entre las que se encuentra añadir un contador de me gusta al botón o a la caja.

Diseño de botón en Facebook

También podemos modificar otros aspectos como el tamaño (botón grande o pequeño), el color del esquema y si queremos que aparezcan los iconos de los seguidores.

Opciones de diseño de botón en Facebook

Por último, a las opciones de me gusta y recomendar se le puede añadir el botón de compartir y añadir una dirección URL que será la que coja para realizar la acción que queramos.

 

💬 Facebook Comments

Con este widget lograremos que dejar un comentario en alguna sección de nuestra web sea pan comido. El único requisito será que la persona que comente esté logueado previamente con su cuenta de facebook.

Al arrastar el widget al contenido donde queramos que aparezca observaremos que se carga la caja para dejar un comentario. Si nosotros mismo estamos logueado nos aparecerá nuestra foto ya cargada y lista para comentar en nuestro nombre.

Las opciones de personalización engloba el número de comentarios que queramos que aparezcan en la página (siendo el mínimo 5), el método para ordenar los comentarios (por tiempo, por popularidad) y la posibilidad de añadir otra URL de facebook que cargue los comentarios.

Cuando de comentarios de Facebook

 

🖼 Facebook Embed

¿Cuántas veces hemos agregado a nuestra web una publicación en facebook o twitter? Con twitter suele pasar más a menudo porque dejan el tweet directamente de esa persona que ha comentado algo.

Hasta el momento ningún constructor visual había ofrecido añadir contenido embebido de facebook en otra web. Elementor una vez más marca la diferencia y proporciona esta opción tan solo arrastrando el widget.

🔻 Post

Publicación embebida de facebook en la web

Es posible mostrar una publicación normal como la de arriba, un vídeo o un comentario en concreto.

🔻 Vídeo

Inclusión de un vídeo de facebook

Por supuesto tendremos disponibles las opciones de reproducción de vídeo (pantalla completa, autoreproducción y mostrar leyendas del propio vídeo).

🔻 Comentario

Para insertar un comentario de una publicación de facebook tendremos que ir a esa post en concreto y hacer click en la fecha y hora del comentario que se encuentra debajo del comentario.

Se abrirá una nueva pestaña, copiamos la URL completa y la copiamos en la caja donde nos pide la ruta para insertar el comentario.

Fecha y hora del comentario en facebook
Fecha y hora del comentario en facebook

Aquí podemos marcar una opción para mostrar el origen del comentario, en caso de que sea una respuesta.

 

📄 Facebook Page

Para finalizar la lista de widgets de facebook disponible aparece el más usado de todos: la página de facebook. La función de este widget es mostrar una ventana a través de un código embebido con un resumen de nuestra fan page.

Página de facebook embebida en la web
Página de facebook embebida en la web

Tras añadir la URL de la fan page, aparecerá automáticamente el cuadro. Existe varias opciones de personalización en este widget.

Opciones de Fan Page de Facebook
Opciones de Fan Page de Facebook

1️⃣ URL
Inserta la dirección web de tu fan page.

2⃣ Layout
Aquí indicaremos el contenido que deseemos mostrar en el cuadro. Podemos mostrar el timeline con los post más reciente, los próximos eventos que tengamos o los mensajes que hayan llegado a la página.

3⃣ Small Header
Pondremos más pequeño el encabezado donde se muestra la fotografía de portada.

4⃣ Cover
Opción para mostrar o no la foto de portada.

5⃣ Profile photos
Mostrar la foto de los seguidores que tiene la fan page.

6⃣ Custom CTA Button
Si lo activamos, añadiremos el botón de compartir la fan page.

7⃣ Height
Definiremos la altura del cuadro.

Estas han sido todas las nuevas funciones relacionadas con Facebook que en forma de widgets, Elementor ha añadido a su herramienta. Como mencionaba arriba, en unos días actualizará de nuevo para mostrarnos nuevos widgets que nos harán la vida mas fácil 🙂.

Espero que te sea útil estos widgets y puedas usarlo en tu proyecto.

Facebook
LinkedIn
Twitter
Google+

Adrián Cruzado

Diseñador web especializado en WordPress y apasionado de las nuevas tecnologías y el mundo digital. A través de mi blog comparto mis conocimientos con el objetivo de ayudarte a crear una web profesional y rentable.

Deja un comentario