¿Estás buscando una forma fácil de agregar un feed de Instagram a tu sitio de WordPress?
Un feed de Instagram te ayuda a mostrar tu contenido de redes sociales directamente en tu sitio web de WordPress. Los visitantes pueden ver e interactuar con tu contenido de Instagram sin tener que salir de tu sitio.
En este tutorial paso a paso, te mostraremos cómo conectar tu sitio a Instagram para mostrar tu contenido. Este es un proceso automatizado y no requiere ningún conocimiento de codificación. ¡Empecemos!
Lo que necesitas para crear un feed de Instagram en WordPress
Puedes agregar un feed de Instagram a tu sitio manualmente usando código, sin embargo, este método es largo y complicado.
Una mejor solución es usar un plugin de WordPress que te permita conectar tu sitio web a Instagram. El mejor plugin para esto es Smash Balloon.
Smash Balloon es un potente plugin de feeds sociales y viene con un plugin diseñado específicamente para Instagram. No necesita experiencia en codificación, lo que lo hace fácil de usar.
Smash Balloon te permite conectar tu sitio web a Instagram en un par de clics. Luego puedes personalizar tu feed de maneras que apunten a tu audiencia de una manera específica. Veamos cómo:
- Múltiples feeds: Agrega varios feeds de Instagram en la misma página o en páginas diferentes de tu sitio.
- Uso de hashtags: Conecta tu feed a hashtags en Instagram para que tu feed se actualice automáticamente cuando alguien publique usando esos hashtags.
- Etiquetas: Configura tu feed para que cada vez que alguien te etiquete en Instagram, se agregue a tu feed.
- Feed completo: Simplemente agrega tu línea de tiempo completa de Instagram a tu feed del sitio.
Además de estas potentes opciones de personalización del feed de Instagram, Smash Balloon todavía tiene muchas funciones para mejorar la experiencia de tu audiencia.
- Caché de datos inteligente: Asegura que las imágenes no se carguen directamente desde Instagram, sino que utilicen un sistema de caché. Esto significa que los archivos multimedia se cargarán más rápido, ofreciendo una mejor experiencia.
- Copia de seguridad del feed: Incluso si Instagram está caído o experimentando problemas, el sistema de caché de datos inteligente ofrecido por Smash Balloon asegura que tu feed todavía se muestre.
- Optimización de imágenes: Todas las imágenes se cargarán con un tamaño de archivo ideal para el tamaño de la pantalla. Como resultado, se desperdician menos recursos mientras se le brinda al usuario la mejor experiencia.
- Enfoque SEO: Los subtítulos del feed son rastreables por los motores de búsqueda, lo que significa que tu feed es clasificable, lo que lo convierte en una excelente herramienta de SEO. Además, dado que tu sitio se actualiza constantemente con contenido nuevo, tu SEO se beneficia aún más.
Para este tutorial, usaremos el plugin Instagram Feed de Smash Balloon.
Dicho esto, Smash Balloon es realmente potente y soporta otras plataformas de redes sociales, incluyendo YouTube, Twitter y Facebook.
Ahora que sabes qué plugin de feed de redes sociales usar, vayamos directamente al tutorial.
Cómo crear un feed de Instagram para tu sitio de WordPress
Paso 1: Instalar y activar Smash Balloon
El Instagram Feed de Smash Balloon tiene una versión gratuita y una premium. La versión gratuita es un potente plugin por sí misma; puedes usarla hasta que decidas actualizar.
Para acceder a la versión gratuita, ve a tu Repositorio de Plugins de WordPress para descargarlo e instalarlo. Configúralo como cualquier otro plugin. Si necesitas ayuda con eso, sigue nuestra guía sobre Cómo Instalar un Plugin de WordPress – 4 Métodos (Paso a Paso).
Para este tutorial, usaremos la versión pro para poder mostrarte lo potente que es este plugin.
En el sitio web de Instagram Feed, regístrate para obtener una cuenta y luego procede a 'Mi Cuenta'.
Aquí, descarga el archivo del plugin 'Instagram Feed Pro' y copia la clave de licencia.
Ve a tu panel de WordPress, luego a la página Plugins » Añadir nuevo. Aquí puedes subir el archivo del plugin.
Una vez que Instagram Feed Pro esté listo para usar, aparecerá un nuevo elemento llamado Instagram Feed en el menú del lado izquierdo de tu panel de WordPress.
Ve a Instagram Feed » Ajustes e introduce la clave de licencia que copiaste anteriormente.
Activa la licencia y con eso, deberías estar listo para usar Instagram Feed Pro.
Paso 2: Conecta tu cuenta de Instagram
Con el plugin instalado y activado, el siguiente paso es conectar tu cuenta de Instagram. Para hacerlo, ve a Instagram Feed » Todas las fuentes. Aquí, ve al botón Añadir nuevo.
A continuación, Selecciona el tipo de fuente. Verás las siguientes opciones disponibles:
- Obtener publicaciones de tu perfil de Instagram
- Obtener publicaciones de un hashtag público de Instagram
- Mostrar publicaciones en las que tu cuenta de Instagram ha sido etiquetada
Curiosamente, Smash Balloon no te limita a seleccionar un tipo de fuente de Instagram; puedes elegirlos todos a la vez. Sin embargo, seleccionaremos 'Obtener publicaciones de tu perfil de Instagram' para este tutorial.
En la siguiente página, se te pedirá que añadas una Fuente de la fuente. Básicamente, es de donde tu fuente obtendrá el contenido.
Después de la página Añadir fuente, puedes conectar una cuenta personal o una cuenta de empresa. Seleccionaremos el perfil de empresa para este tutorial, que ofrece más funciones.
Aparecerá otra ventana, preguntándote si alguna vez has conectado Smash Balloon con Facebook antes. Suponiendo que esta es la primera vez que usas este plugin de fuentes, deberías elegir 'No'.
A continuación, se te pedirá que te conectes a través de tu página de Facebook. Dado que Meta es propietaria de Facebook e Instagram, conectarse a través de Facebook es la mejor manera de dar acceso a Smash Balloon.
Aparecerá una ventana emergente a continuación, pidiéndole que continúe con el perfil de Facebook iniciado sesión. Asegúrese de iniciar sesión en la cuenta vinculada a las páginas correctas de Instagram y Facebook que desea utilizar.
A continuación, se mostrará otra ventana emergente, esta vez, deberá seleccionar las páginas de Instagram que desea conectar a Smash Balloon. Marque la casilla junto al perfil o perfiles que desea utilizar.
En la siguiente ventana emergente, conecte la página de Facebook asociada con el perfil de Instagram marcando la casilla junto a ella.
En la siguiente ventana, otorgue a Smash Balloon los permisos que necesita. La empresa no compartirá su información con nadie. Darle al plugin acceso a los datos garantiza que su feed muestre todo lo que debe mostrar sin problemas.
Para completar la conexión, verifique que el dominio que desea conectar con Smash Balloon sea suyo. Esto es solo para confirmar que le está dando acceso a Smash Balloon.
Finalmente, aparecerá una ventana emergente a continuación con una lista de perfiles de Instagram que ha conectado a Smash Balloon. Marque la casilla junto a la página y continúe seleccionando el botón Agregar.
Y así de simple, ha conectado completamente Instagram Feed Pro de Smash Balloon con su sitio de WordPress.
Paso 3: Crear un Feed de Instagram
Con Smash Balloon conectado, creemos un nuevo feed. En el menú de WordPress, vaya a Instagram Feed » Todos los Feeds. Seleccione la fuente que acaba de agregar y continúe a la siguiente página.
En esta página, elija el tema del Feed. Recuerde, este es solo la base y un punto de partida para construir; siempre puede cambiar el tema más tarde.
Entre los temas de feed, seleccione una de las opciones Predeterminado, Moderno, Muro Social, Contorno o Superposición. Manteniendo las cosas simples, optaremos por el tema Predeterminado.
Después de elegir el tema, a continuación, seleccione la plantilla que desea utilizar. Tiene muchas opciones para elegir. Desde Cuadrícula Simple, Cuadrícula Simple XL, Fila Simple, Carrusel Simple, Publicación Única y más.
Recuerda que con Smash Balloon, siempre puedes cambiar la plantilla más tarde también, si sientes que otra opción ofrecerá a tu audiencia una mejor experiencia.
Con todas las configuraciones básicas establecidas, serás redirigido al editor de feed en vivo, donde podrás personalizar el feed.
Paso 4: Personaliza tu feed de Instagram
El editor de feed en vivo ofrece opciones de personalización y configuración a la izquierda y una pantalla de vista previa en vivo a la derecha. Nos centraremos en el menú Personalizar para este tutorial. Selecciónalo y verás una lista de opciones de personalización debajo.
Cada vez que hagas clic en un menú del editor de feed en vivo y completes el proceso de personalización, verás Personalizar con una pequeña flecha al lado. Selecciónala para volver al menú Personalizar.
Para utilizar el editor de feed en vivo correctamente, busca los tres íconos en la esquina superior derecha: un escritorio, una tableta y un móvil. Aquí, puedes ver cómo aparecerá el feed de Instagram para diferentes tamaños de pantalla, de modo que puedas ofrecer a tu audiencia la mejor experiencia.
Recuerda que ya personalizamos el tema y la plantilla en los pasos anteriores. Como se mencionó, también puedes modificarlos aquí si lo deseas.
Con eso listo, comencemos a personalizar el Diseño del Feed. Puedes elegir entre Cuadrícula, Carrusel, Mampostería y Destacados.
Desplázate hacia abajo en el submenú Diseño del Feed para ajustar la Altura del Feed, el Relleno, el Número de Publicaciones en diferentes tamaños de pantalla y, finalmente, el número de columnas para diferentes tamaños de pantalla. Una vez que estés satisfecho con el diseño, regresa.
A continuación, personalicemos el Esquema de Colores. Por defecto, tu feed heredará los colores de tu tema. Puedes decidir usar un modo claro u oscuro.
Si deseas personalizar aún más el esquema de colores, selecciona Personalizado y usa la Paleta Personalizada para elegir tus colores deseados. Puedes cambiar los colores del fondo, textos, enlaces y botones.
Regresa al menú principal cuando estés satisfecho con el esquema de colores.
Ahora, editemos las Secciones comenzando con el Encabezado. Primero, habilita el encabezado si deseas mostrarlo en tu feed.
A continuación, elige un Estilo de Encabezado de las opciones proporcionadas. Selecciona Estándar, Enmarcado, Centrado o Texto. Cada estilo de encabezado se puede editar de forma ligeramente diferente al desplazarte más abajo en el menú Encabezado.
También puedes editar el ‘Tamaño del Encabezado’. Luego, decide si quieres subir un nuevo Avatar para mostrar en lugar del predeterminado de tu cuenta de Instagram.
A continuación, elige un color de Texto y decide si quieres mostrar a tus usuarios cuántos seguidores de Instagram tienes.
Luego puedes elegir tener una biografía. Pero, para darte más libertad de personalización, Smash Balloon te da la opción de escribir una biografía personalizada.
Mientras sigues en el menú Encabezado, decide si quieres mostrar el área desplazable fuera del feed. Finalmente, determina si quieres que las historias de Instagram se incluyan en el feed y cuánto tiempo deben mostrarse antes de pasar a la siguiente Insta Story.
Eso es todo, puedes volver al menú principal de personalización. A continuación, para personalizar las Publicaciones, puedes modificar:
- Estilo de publicación a estándar o enmarcado
- Resolución de imágenes y videos
- Longitud del pie de foto, tamaño y color del texto
- Tamaño y color del resumen de Me gusta y Comentarios
- Estado al pasar el cursor, texto de fondo e información a mostrar
Una vez completado, vuelve al menú principal de Personalizar.
Smash Balloon también te permite elegir si quieres mostrar el botón Cargar más. No tiene por qué decir ‘Cargar más’. Puedes cambiarlo a lo que quieras.
Luego, personaliza los colores de Fondo, Estado al pasar el cursor y Texto. También puedes decidir habilitar el ‘Scroll Infinito’ para que los usuarios puedan ver tantas publicaciones de Instagram en tu feed como quieran.
¿Necesitas cambiar el ‘Botón Seguir’? Hay una opción para personalizar primero el texto, el fondo, el estado al pasar el cursor y los colores del texto.
Finalmente, habilita Lightbox y ‘Comentarios’, para que tu feed pueda mostrar comentarios de la página de Instagram.
Y con todas estas opciones personalizadas, tu feed está completamente adaptado a tus gustos y listo para ser añadido a tu sitio.
Paso 5: Muestra tu feed de Instagram
Smash Balloon te permite mostrar tu feed de varias maneras.
- Añadir a una página
- Agregar a un widget
- Agregar feed mediante shortcode
Para agregar el feed a una página, haz clic en el botón Incrustar en la esquina superior derecha de tu editor de feed en vivo.
Verás la opción para agregar el feed a una página en la siguiente ventana emergente.
A continuación, verás una lista de todas las páginas de tu sitio; selecciona la página a la que deseas agregar el feed. La página se abrirá en una nueva pestaña para que puedas agregar tu feed.
Alternativamente, puedes agregar el feed en cualquier momento a una página o publicación existente o nueva. Dentro del editor de bloques, usa el ícono de Signo más para buscar el bloque 'Instagram Feed' y agrégalo a tu página. Verás una vista previa de tu feed.
Actualiza la página y tu feed debería aparecer también en la página en vivo.
A continuación, agregaremos el feed a través de un widget. Nuevamente, encuentra el botón Incrustar en la esquina superior derecha del editor de feed en vivo y selecciona 'Agregar a un widget'.
Después de ser redirigido a la página de widgets, decide si deseas agregar el feed al pie de página o a otros tipos de widgets.
Para este tutorial, queremos agregar el feed al pie de página. Selecciona el widget del pie de página para expandirlo y ver sus propiedades.
A continuación, usa el ícono de Signo más y busca 'Instagram Feed'. Arrastra y suelta el bloque de Instagram Feed en la ubicación del pie de página donde deseas mostrar el feed. Presiona Actualizar para agregarlo a tu feed en la página en vivo.
Finalmente, agreguemos el feed a través de un shortcode. Con un shortcode, puedes agregar el feed en CUALQUIER página, publicación o ubicación lista para widgets.
El shortcode es particularmente útil cuando tienes varios feeds para elegir o deseas agregar muchos feeds a la misma página o publicación.
Puedes localizar el shortcode del feed de dos maneras.
Primero, puedes ir a Instagram Feed » Todos los feeds. Verás todos tus feeds listados; copia el shortcode junto al nombre del feed.
El otro método para obtener el shortcode es yendo a Instagram Feed » All Feeds y abriendo el feed en el editor de feeds en vivo.
En la esquina superior derecha, encuentra el botón Embed. En la ventana emergente que aparece, verás el shortcode en la parte superior de la ventana; cópialo.
Ahora, con tu shortcode a mano, abre cualquier página, publicación o ubicación lista para widgets. Para este tutorial, abriremos una página.
Usando el ícono de Signo más, busca 'Shortcodes' y agrega el bloque a tu página.
Finalmente, pega el shortcode y actualiza la página; el sitio en vivo debería mostrar ahora el feed.
¡Bien hecho! Ahora has agregado un feed de Instagram altamente personalizado a tu sitio de WordPress.
Ahora que sabes cómo usar Smash Balloon para agregar un Feed de Instagram, no te detengas ahí. ¡Hay mucho más que puedes hacer con este plugin!
¿Qué Más Puede Hacer Smash Balloon?
Como puedes ver, agregar un feed de Instagram no solo es fácil con Smash Balloon, sino que es increíblemente personalizable y sin necesidad de experiencia en codificación. Smash Balloon te ayuda a capitalizar todo el potencial de la interacción y el contenido generado por el usuario de Instagram.
Para añadir a eso, puedes crear múltiples feeds en la misma o en diferentes páginas, conectarte a hashtags específicos, incluir publicaciones etiquetadas, o incluso mostrar sin problemas tu línea de tiempo completa de Instagram en tu sitio.
También puedes agregar feeds de Facebook, YouTube y Twitter. Aquí tienes un vistazo de cómo se ve la personalización de un Feed de YouTube:
Smash Balloon también viene con una función súper potente llamada Social Wall. Esto te permite combinar fuentes de múltiples plataformas en un solo lugar. Los usuarios pueden interactuar con tu contenido de YouTube, Twitter, Instagram y Facebook para que se mantengan actualizados con todas tus plataformas.
Esperamos que hayas encontrado útil este tutorial. También podrías querer aprender cómo compartir automáticamente publicaciones de WordPress en Facebook y Twitter. Nuestro objetivo es empoderarte y ayudarte a utilizar realmente tus páginas de redes sociales con tu sitio. Por esta razón, consulta también estos artículos:
- Cómo incrustar un feed de YouTube en WordPress para aumentar la participación
- Cómo mostrar un feed de Facebook en WordPress (5 pasos sencillos)
- Cómo agregar notificaciones de prueba social en WordPress
Los dos primeros artículos te ayudarán a usar Smash Balloon para agregar fuentes de YouTube y Facebook. El último artículo te mostrará cómo mostrar prueba social a clientes potenciales.
Comentarios Dejar una respuesta