[ACTUALIZACIÓN] Añade cualquier feed de Smash Balloon como bloque nativo de Gutenberg o como widget de Elementor

Estás creando una nueva página en el editor de bloques de WordPress. Añades tu feed de Instagram. Quieres verlo en la página antes de publicarla.

WordPress 7 modificó esa parte. Al trasladar el editor a un iframe, cambió la forma en que se generan las vistas previas, por lo que hubo que actualizar los bloques para que se adaptaran a ello.

Tus feeds se muestran correctamente en su interior, en los seis plugins de Smash Balloon. Lo que creas en el lienzo es lo que ven tus visitantes.

Ahora, todos los plugins de Smash Balloon para feeds se añaden a una página como un bloque nativo de Gutenberg o un widget de Elementor, y funcionan correctamente en WordPress 7. Añade un feed del mismo modo que añades un título, una imagen o un botón.

Búscalo, añádelo y selecciona tu fuente en el menú desplegable. Funciona igual con cualquier plugin que utilices.

En Gutenberg, se encuentra en el insertador junto con los bloques de párrafo, imagen y galería. En Elementor, está en el panel de widgets junto con el resto de elementos con los que creas tus diseños.

Esto es lo que puedes hacer:

• Busca tu feed por nombre en el insertador y arrástralo hasta la página
• Arrastra un widget de Smash Balloon a cualquier sección o columna de Elementor
• Elige qué feed guardado quieres mostrar en el menú desplegable que hay dentro del bloque o del widget
• Comprueba que tu feed se muestre correctamente en el lienzo antes de publicarlo
• Crea un nuevo feed o edita el que estás mostrando, desde el panel de Elementor

Añade tu feed igual que añades todo lo demás

Todos los plugins de Smash Balloon para feeds ya ofrecían una forma de añadir un feed a una página, ya fuera mediante el bloque de incrustación clásico o mediante un shortcode. Eso no ha cambiado, y nada de lo que hayas creado anteriormente ha dejado de funcionar.

En cuanto al feed de Instagram, los feeds personalizados de Twitter, los feeds de TikTok y el feed de reseñas, la novedad de esta actualización es la incorporación de un bloque y un widget nativos. El feed personalizado de Facebook y el feed de YouTube Pro ya contaban con uno, y esta actualización garantiza que ambos sigan funcionando correctamente en WordPress 7.

Ahora, tu feed aparece en la página como un bloque o un widget, y se muestra allí mientras la creas. Eliges qué feed quieres mostrar en un menú desplegable, y se muestra en la página justo donde lo coloques.

Independientemente de cuál de las seis utilices, y tanto si tienes la versión gratuita como la Pro, añadir un feed ahora funciona de la misma manera.

Añade cualquier fuente directamente desde el editor de bloques

Abre el insertador, escribe el nombre del complemento que utilizas y verás que el bloque de tu feed aparece junto a los bloques de párrafo, imagen y galería.

Añádelo y elige tu feed en el menú desplegable «Seleccionar un feed ». Tus publicaciones, vídeos o reseñas aparecerán en el bloque directamente en la página.

Desde ahí podrás ver el elemento real en su ubicación real, con el ancho que tendrá, el título encima y el botón debajo. Podrás ver cuánto espacio ocupa en la página antes incluso de que el visitante lo cargue.

Así es como funciona:

• Una florista añade su feed de Instagram a una página de bodas, comprueba cuánto espacio ocupa encima del formulario de reserva y publica la entrada sabiendo que el formulario sigue a la vista.
• Un gimnasio coloca las opiniones de sus socios por encima del horario de clases y comprueba que el horario siga apareciendo en pantalla antes de que la página se publique.
• Una panadería coloca su feed de TikTok encima del botón de pedido y confirma que sigue siendo fácil acceder a él.

Insertar un feed en cualquier sección de Elementor

Si diseñas con Elementor, el widget de Smash Balloon estará justo ahí, en el panel de widgets.

Busca tu plugin en el panel de widgets y, a continuación, arrastra el widget a cualquier sección o columna en la que estés trabajando.

Elige tu feed en el menú desplegable y se mostrará en la vista previa que tienes al lado, en la columna en la que lo hayas colocado.

El ancho y el espaciado se ajustan mediante los propios controles de Elementor, los mismos que se utilizan en un título o un botón, de modo que el feed queda alineado con el resto de la sección en lugar de quedar separado de ella.

Si quieres modificar el propio feed, el panel incluye enlaces para crear uno nuevo o editar el que estás mostrando. Ambos se abren en una nueva pestaña, por lo que la página que estás diseñando permanece tal y como la dejaste.

• Un estudio de yoga muestra su cuenta de Instagram junto al horario de clases, para que los nuevos alumnos vean las instalaciones y a los alumnos antes de elegir una clase.
• Un restaurante muestra sus reseñas de Google debajo del menú, con el mismo ancho, de modo que los comensales ven las reseñas justo en el momento en que están decidiendo dónde comer.
• Una tienda de moda integra sus vídeos de TikTok junto a las fotos de los productos, de modo que los compradores vean el producto en uso sin tener que desplazarse más allá del botón de compra.

Tus fuentes se muestran correctamente en WordPress 7

En WordPress 7, el editor de bloques se ha trasladado a un iframe, lo que ha cambiado la forma en que se muestran los bloques durante la edición. Todos los plugins de Smash Balloon se han actualizado para adaptarse a este cambio, por lo que los seis son totalmente compatibles con él.

Tu feed se muestra en el editor tal y como aparecerá en la página publicada. Esto es así tanto si utilizas el nuevo bloque, el bloque antiguo o un widget antiguo de Elementor, por lo que las páginas que hayas creado anteriormente se mantendrán exactamente igual.

Ver el feed en tiempo real mientras trabajas es lo que te permite terminar una página de una sola vez:

• Configura un feed de opiniones debajo de la lista de precios de un salón y visualiza ambos en pantalla, para que la lista siga siendo fácil de leer una vez que esté publicada.
• Coloca un feed de Instagram encima del formulario de reserva de una casa de huéspedes mientras lo creas, de modo que el formulario siga estando a la vista cuando alguien acceda a la página.
• Fíjate en cómo el feed de TikTok se muestra con su ancho real en la página de eventos de una cervecería, para que las fechas de los conciertos que aparecen debajo no queden ocultas.

Todas las fuentes que ya hayas creado seguirán funcionando

Aquí no hay nada que te obligue a volver a revisar páginas antiguas. Un feed insertado con el bloque heredado o el widget heredado de Elementor seguirá funcionando exactamente igual que hasta ahora.

Esos elementos más antiguos también se muestran correctamente en el editor de WordPress 7, por lo que una página que creaste hace un año se abre y se previsualiza tal y como cabría esperar. Para ello, basta con actualizar; no hay que configurar nada.

Los códigos cortos tampoco han cambiado. Si así es como insertas tus feeds, sigue haciéndolo igual.

El nuevo bloque y el nuevo widget estarán ahí para la próxima publicación que realices, así como para cualquier otra anterior que quieras trasladar.

La misma actualización, independientemente de la plataforma que utilices

Todos los plugins de Smash Balloon añaden un feed a una página de la misma forma, como un bloque en Gutenberg o un widget en Elementor. Busca el nombre del plugin, añádelo y selecciona tu feed en el menú desplegable.

Aunque utilices tres de ellas, sigue habiendo una única forma de organizar el feed. Lo que aprendes en tu feed de Instagram es lo mismo que ya sabes cuando añades reseñas a una página seis meses después.

Lo mismo ocurre en Elementor, tanto en la versión gratuita como en la Pro, por lo que un sitio web que utilice el complemento gratuito y otro que utilice la versión Pro se posicionan de la misma manera.

Imaginemos que tienes una agencia de marketing con un feed de Instagram en la página web de un cliente y un feed de Facebook en la de otro. Sigues creando el contenido de la misma forma en cada página web, lo que te ahorra el tiempo y el coste de tener que elaborar un nuevo conjunto de instrucciones.

Cómo añadir tu feed de Instagram a cualquier página en cuestión de minutos

Esto funciona tanto en la versión gratuita como en la Pro de Instagram Feed. El resto de plugins que aparecen aquí funcionan de la misma manera, así que si utilizas Custom Twitter Feeds, Custom Facebook Feed, YouTube Feed Pro, TikTok Feeds o Reviews Feed, los pasos que se indican a continuación son idénticos.

Cómo utilizar el bloque Gutenberg

Abre la página o la entrada a la que quieras añadir un feed y haz clic en el icono del signo más para abrir el insertador de bloques. Busca «Instagram Feed» y selecciona el bloque «Instagram Feed».

Elige el feed que quieras en el menú desplegable «Seleccionar un feed » y se mostrará directamente en la página.

A continuación, puedes previsualizar la página para comprobar que tiene el aspecto que deseas y, después, publicarla como de costumbre.

Cómo utilizar el widget de Elementor

Abre tu página en Elementor y busca «Instagram Feed» en el panel de widgets de la izquierda. Arrastra el widget a cualquier sección o columna de tu página.

En la configuración del widget, selecciona el feed que desees en el menú desplegable.

¿Aún no has creado ninguno? Haz clic en «Crear nuevo feed» y configúralo igual que lo harías desde el panel de control del complemento, eligiendo la fuente, el diseño y el estilo.

Si necesitas cambiar el feed que estás mostrando, al hacer clic en «Editar este feed» se abrirá directamente el personalizador en una nueva pestaña, mientras que Elementor permanecerá abierto.

Ajusta el ancho de las columnas y el espaciado del mismo modo que lo harías con cualquier otro widget de Elementor y, a continuación, actualiza la página.

Una vez que hayas publicado, visita la página en la interfaz de usuario para comprobar que tu feed se carga y se ve igual que en el editor.

Si estás utilizando un bloque o un widget antiguo en otra página, no tienes que cambiar nada allí. Seguirá funcionando exactamente igual que hasta ahora.

Tus feeds están listos para integrarse en cualquier página

¿Sabías que ahora puedes añadir un feed a una página nueva en menos de un minuto, ya sea mediante el bloque o el widget?

La opción del código corto sigue estando disponible si la prefieres, pero para la mayoría de las páginas nuevas, el bloque o el widget nativo es la forma más rápida de conseguirlo.

• No hay ningún código corto que copiar para las nuevas fuentes
• No hay pasos adicionales entre Gutenberg y Elementor
• No hay forma de saber cómo quedará el feed hasta que lo publiques

Si ya tienes instalado un plugin de Smash Balloon, actualízalo a la última versión y prueba el nuevo bloque o widget en tu próxima página. Si aún no lo tienes instalado, empieza a utilizar Smash Balloon y crea tu primer feed utilizando el bloque nativo desde el primer día.

Por último, muchísimas gracias a nuestra comunidad. Vuestros comentarios dan forma a lo que creamos, y la forma en que se muestran los feeds en una página es algo de lo que nos habláis a menudo.

¿Qué plataforma vas a añadir primero, Instagram, Facebook u otra? Deja un comentario más abajo y cuéntanoslo.