¿Buscas cómo añadir incrustaciones de Instagram en tu sitio web?
Para muchos de ustedes que tienen sitios web para su negocio, blog o tienda en línea, mantener su contenido fresco y atractivo es una prioridad. Por mi experiencia en marketing digital, sé que conectar su sitio web con las redes sociales es una decisión inteligente.
Los feeds responsivos de Instagram se ajustan automáticamente a los diferentes tamaños de pantalla, para que todo el mundo vea tu contenido perfectamente.
Dado que muchas personas navegan por Internet desde sus teléfonos, mostrar publicaciones de Instagram con capacidad de respuesta puede ser una buena forma de mantener su interés.
Pero si estás acostumbrado a trabajar con código, mostrar las publicaciones de Instagram en tu sitio web puede ser complicado. Además, tienes que asegurarte de que las incrustaciones son compatibles con dispositivos móviles.
Si quieres añadir fácilmente feeds de Instagram responsivos a tu sitio web WordPress, ¡te he pillado!
En esta guía, te mostraré cómo incrustar feeds de Instagram en WordPress y hacerlos responsive, sin quebraderos de cabeza técnicos.
Compartiré los sencillos métodos que he utilizado para crear feeds de Instagram responsivos, para que puedas mejorar tu sitio web sin esfuerzo y hacer que se vea genial en cualquier dispositivo.
En este artículo
Por qué añadir incrustaciones responsivas de Instagram en tu sitio web
Con más de 2.000 millones de usuarios activos, Instagram es una de las mayores plataformas de redes sociales y un lugar fantástico para ver contenidos visuales como fotos y vídeos.
Y si quieres una forma fácil de atraer a tus visitantes, puedes incrustar el contenido de Instagram en tu sitio web.
Más del 58,99% de los usuarios de Internet navegan en sus teléfonos móviles en estos días y si las incrustaciones de Instagram no son responsivas, la mayoría de sus visitantes no podrán ver las publicaciones correctamente.
Pero si haces que tus incrustaciones de Instagram sean aptas para móviles, puedes mostrar fotos y vídeos relevantes para mantener fácilmente el interés de los visitantes del sitio web y convertirlos en tus seguidores de Instagram.
Además, también puedes publicar tu propio contenido en Instagram si quieres aumentar rápidamente tus seguidores en las redes sociales.
¿Quieres más ventas para tu negocio? Puedes incrustar reseñas positivas y testimonios de Instagram y convertir a los visitantes en clientes.
Los contenidos generados por los usuarios (CGU), como las reseñas de Instagram, pueden actuar como prueba social y convertir más visitantes en clientes.
Y lo que es mejor, puedes crear un feed de Instagram adap table para que los usuarios puedan comprar tus productos directamente, independientemente del dispositivo que utilicen para visitar tu sitio web.
Ahora ya sabes cómo incrustar posts responsive de Instagram puede ayudar a tu negocio.
Con eso, vamos a seguir adelante y ver la forma más fácil de incrustar contenido de Instagram para móviles.
La forma más fácil de incrustar posts responsivos en Instagram
Cuando se trata de mostrar contenido de Instagram en tu sitio, tienes 2 opciones que puedes probar:
- De forma manual: Genera códigos HTML de incrustación para cada publicación de Instagram y añádelos a tu sitio de WordPress.
- Manera automática (manera fácil): Consigue un plugin de Instagram que pueda incrustar feeds de fotos y vídeos responsive por ti.
Si utilizas el primer método, añadir publicaciones de Instagram a tu sitio web puede llevarte mucho tiempo, sobre todo si quieres mostrar mucho contenido.
Después de todo, tendrás que ir y venir entre los dos sitios web para obtener los códigos HTML y luego añadirlos a tu sitio. Si no estás acostumbrado a manejar mucho código, este paso puede resultar confuso.
Además, tendrás que comprobar manualmente cada vez si tus publicaciones de Instagram se muestran correctamente en el móvil.
Además, de esta forma estás añadiendo iFrames incrustados de Instagram a tu sitio. Esto significa que los motores de búsqueda como Google no pueden ver el contenido de las redes sociales en su sitio.
¿La buena noticia?
Usted puede eludir todos estos problemas mediante el mejor plugin de alimentación Instagram por ahí: Instagram Feed Pro.
Con el plugin Instagram Feed Pro, puedes crear feeds responsivos para mostrar fotos, vídeos, carretes y mucho más de Instagram.
Sólo tienes que seguir una guía de tres pasos, y el plugin te llevará a través de todo el proceso de creación, personalización e incrustación de feeds de Instagram.
Si sigues esta guía, podrás mostrar tus publicaciones, menciones y hashtags de Instagram en tu sitio de WordPress.
Y todo el contenido que incrustes se redimensionará automáticamente para adaptarse al tamaño de la pantalla de tus visitantes. Incluso puedes previsualizar cómo se verán las publicaciones de Instagram en distintos dispositivos.
Además, Instagram Feed Pro te permite controlar cómo aparecen las publicaciones de Instagram en tu sitio web.
Puede elegir entre una colección de plantillas prediseñadas y, a continuación, utilizar el personalizador de feeds en directo para personalizar su feed con unos simples clics, sin necesidad de JavaScript, HTML, CSS ni ningún tipo de código.
Con todas estas increíbles funcionalidades, Instagram Feed Pro se ha convertido en el plugin de feeds de Instagram número 1, con más de 1 millón de usuarios activos.
Si quieres añadir feeds de Instagram responsivos a tu sitio web, consigue Instagram Feed Pro ahora mismo.
Vamos a seguir adelante y ver cómo se puede utilizar este plugin para añadir mensajes Instagram sensibles.
Cómo añadir incrustaciones responsivas de Instagram a WordPress
Para mostrar feeds responsivos de publicaciones de Instagram, todo lo que tienes que hacer es seguir los pasos que se indican a continuación.
Echemos un vistazo.
Paso 1: Instalar el plugin Instagram Feed Pro
En primer lugar, obtenga su copia de Instagram Feed Pro y luego instale el plugin en su sitio web.
Si quieres saber más, consulta esta guía paso a paso sobre cómo instalar un plugin de WordPress.
Paso 2: Crear un nuevo feed de Instagram
Siguiendo el flujo guiado de 3 pasos, puedes tener un nuevo feed de Instagram listo para publicar en línea en unos pocos clics.
Para empezar, abre el menú Instagram Feed " All Feeds desde el panel de control de WordPress. En la nueva página, haz clic en el botón Añadir nuevo de la parte superior.
A continuación, puede seleccionar el tipo de contenido de Instagram que desea mostrar en su sitio web:
- Cronología del usuario: Muestra las publicaciones de tu perfil de Instagram
- Hashtag público: Seleccione hashtags y, a continuación, mostrar los mensajes con el hashtag
- Entradas etiquetadas: Incrusta las publicaciones que mencionan tu cuenta de Instagram.
Si desea combinar diferentes tipos de feeds en uno solo, sólo tiene que seleccionar varias opciones aquí.
Después de seleccionar un tipo de alimentación específico, haga clic en el botón Siguiente .
Paso 3: Conecta el feed a tu Instagram
Una vez que hayas seleccionado un tipo de feed, puedes empezar a conectar la cuenta de Instagram de tu empresa o creador a este feed.
Para empezar, haga clic en el botón Añadir fuente .
En la ventana emergente, puedes elegir entre 2 tipos de conexión a Instagram:
- Básico: Muestra las fotos, los carretes y las colaboraciones de tu perfil de Instagram.
- Avanzadas: Además de las funciones básicas, muestra feeds con hashtags, feeds etiquetados, historias y mucho más.
Después de elegir el tipo de conexión, haz clic en el botón Conectar .
Una vez hecho esto, puedes abrir Instagram o Facebook para terminar de conectar tu cuenta. La buena noticia es que el proceso es el mismo para cada plataforma.
De momento, haré clic en el botón Conectar con Instagram.
A continuación, Instagram Feed Pro te pedirá acceso de sólo lectura a tu cuenta. El plugin también puede ver la información en Instagram y no será capaz de hacer ningún cambio.
Como resultado, el uso de plugins Smash Balloon como Instagram Feed Pro es completamente seguro.
Para continuar, haga clic en el botón Permitir de la ventana emergente.
Ahora puede utilizar esta cuenta de Instagram como fuente para sus futuros feeds sin salir de su sitio web.
Para terminar de conectar su cuenta, pulse el botón Siguiente.
Así de fácil, tu feed de Instagram puede mostrar fotos y vídeos responsive en tu sitio web. Como el plugin copia automáticamente el diseño de tu sitio web, tus publicaciones se adaptarán perfectamente a tu marca.
Paso 4: Personaliza tu feed responsivo de Instagram
Si quieres importar rápidamente un bonito diseño para tu feed de Instagram, todo lo que tienes que hacer es elegir entre una colección de plantillas prediseñadas.
Una vez que haya seleccionado una plantilla de alimentación, haga clic en el botón Siguiente.
Con eso, el plugin abrirá el editor de feed en vivo para que puedas terminar de configurar el diseño de tu feed de Instagram.
En el lado izquierdo, puedes encontrar el panel de personalización del editor. Aquí puedes utilizar las opciones para configurar el diseño de tu feed, el diseño de la cabecera, la combinación de colores, el diseño de los botones, el número de entradas y mucho más.
Siempre que realices algún cambio, la vista previa en directo de la derecha mostrará el aspecto de tu feed de Instagram adaptable.
Para empezar, puedes configurar el diseño de las publicaciones de Instagram en tu sitio web. Cada una de estas opciones de diseño será perfectamente responsive, así que puedes estar tranquilo.
Sólo tienes que hacer clic en la opción Feed Layout para continuar.
Ahora, puedes elegir entre 4 opciones de diseño diferentes para tu feed de Instagram: Cuadrícula, Carrusel, Mampostería y Destacados.
A continuación veremos cada uno de estos diseños.
Si eliges la opción de cuadrícula, podrás mostrar todas tus publicaciones de Instagram en filas y columnas ordenadas.
De esta forma puedes atraer a tus visitantes con montones de fotos y vídeos.
A continuación, tiene el diseño de carrusel que puede mostrar los mensajes en un carrusel de diapositivas.
Como resultado, su sitio web puede ser más atractivo para sus visitantes.
¿Quieres mantener las proporciones originales de tus fotos y vídeos de Instagram?
En ese caso, puede seleccionar el diseño de mampostería .
Si eliges el diseño Destacado , tu feed de Instagram responsivo destacará publicaciones específicas.
Además, la atención se centrará por completo en tus fotos y vídeos, ya que este diseño oculta los pies de foto y demás información.
Una vez seleccionado el diseño del feed, haz clic en el botón Guardar .
Para seguir diseñando tu nuevo feed, haz clic en el botón Personalizar de la parte superior.
También puedes elegir los colores de tu feed de Instagram utilizando el editor de feed en directo.
Para ello, haga clic en la opción Combinación de colores de la izquierda.
Para ayudarte a cambiar los colores fácilmente, puedes elegir entre 4 esquemas de color:
- Heredar del tema: Copiar los colores del tema de WordPress
- Claro: Muestra un color de fondo claro con una fuente oscura
- Oscuro: Mostrar un fondo oscuro con un color de fuente claro.
- Personalizados: Elige manualmente todos los colores
Una vez elegida la combinación de colores, guarda los cambios haciendo clic en Guardar.
Con el resto de opciones de personalización, puedes cambiar la plantilla de tu feed, el diseño de la cabecera, el estilo de los botones, el número de entradas y mucho más.
No olvides hacer clic en Guardar una vez que estés satisfecho con el aspecto de tu feed de Instagram responsivo.
Paso 5: Insertar tu feed de Instagram responsivo
Con el plugin Instagram Feed Pro, tienes 2 maneras diferentes de incrustar feeds de Instagram en tu sitio WordPress:
- Insertar Responsive Instagram Feed en la página de WordPress
- Insertar Responsive Instagram Feed en WordPress Sidebar o pie de página
A continuación hablaremos de ambas opciones.
Insertar Responsive Instagram Feed en la página de WordPress
Dado que Instagram Feed Pro ha sido diseñado para ser fácil de usar, puedes empezar a incrustar tu feed directamente desde el editor en vivo.
En primer lugar, haga clic en el botón Incrustar de la esquina superior derecha.
Ahora puedes ver todas las formas en las que puedes incrustar este feed de Instagram.
De todas las opciones, haga clic en el botón Añadir a una página para continuar.
En la ventana emergente, selecciona la página de WordPress en la que quieres mostrar el feed responsivo de Instagram.
Una vez hecho esto, haga clic en Añadir para continuar.
Para ayudarte a incrustar tu nuevo feed de Instagram, el plugin abrirá esa página web en el editor de WordPress.
Desde aquí, añada un nuevo bloque de contenido haciendo clic en el icono más (+).
En la barra de búsqueda de la parte superior, escribe "Instagram" para buscar el bloque de feeds de Instagram.
Una vez hecho esto, haz clic en Instagram Feed en los resultados de búsqueda que aparecen a continuación.
Por último, haz clic en el botón Actualizar y tu feed de Instagram responsivo estará listo para que lo vean tus visitantes.
Ahora, los visitantes de tu sitio web pueden ver fotos y vídeos de Instagram en tu sitio, como en esta captura de pantalla:
Como puedes ver, Instagram Feed Pro hace que sea muy fácil de mostrar Instagram responsive incrustaciones en su sitio de WordPress.
En tan solo unos clics, los visitantes de tu sitio web podrán ver tu feed de Instagram que funciona a la perfección en cualquier tamaño de pantalla y dispositivo.
A continuación, vamos a ver la forma más sencilla de mostrar los feeds de Instagram en tu barra lateral o en las zonas de pie de página.
Insertar Responsive Instagram Feed en WordPress Sidebar o pie de página
Al igual que con el método anterior, puedes utilizar el editor de feeds en directo para incrustar tu feed de Instagram en la barra lateral o en el pie de página.
Si el editor de tu feed en directo aún no está abierto, ve al menú Instagram Feed " All Feeds desde tu panel de control de WordPress.
Allí, haz clic en el feed de Instagram que quieras incrustar.
Ahora puedes ver el feed de Instagram abierto en el editor de feed en directo una vez más.
Para incrustar tu feed, haz clic en el botón Incrustar de la parte superior.
A través de la ventana emergente, puedes elegir dónde quieres incrustar tu feed de Instagram, igual que antes.
Esta vez, haga clic en el botón Añadir a un widget .
Ahora puedes ver la página Widgets de tu sitio web. Desde aquí, puedes incrustar tu nuevo feed como un widget de Instagram.
Si desea incrustar su feed en la barra lateral del sitio web, haga clic en el panel Barra lateral .
Para nuestro tutorial, vamos a mostrar la respuesta Instagram incrusta en la barra lateral.
¿Quieres mostrar medios de Instagram en el pie de página de tu sitio? Entonces haz clic en el panel Pie de página .
Para añadir un nuevo widget, haga clic en el icono más (+) de la parte inferior.
Por último, selecciona el widget Instagram Feed en las opciones y haz clic en Actualizar.
Ahora tienes feeds de Instagram con capacidad de respuesta en la barra lateral o en el pie de página de tu sitio web.
Para ver qué aspecto tendrá para los visitantes de su sitio web, abra su sitio web y compruébelo usted mismo.
Echemos un vistazo.
¡Y ahí lo tienes!
Ahora ya sabes cómo añadir incrustaciones de Instagram en WordPress de forma sencilla. Así podrás mostrar feeds de Instagram adaptados a dispositivos móviles y mantener el interés de tus visitantes.
Con la ayuda de Instagram Feed Pro, es más fácil que nunca incrustar hermosas fuentes de fotos y vídeos de Instagram en su sitio web, sin necesidad de codificación.
¿Listo para integrar feeds de Instagram? ¡ Consigue Instagram Feed Pro hoy mismo!
Empieza ya a incrustar tu feed de Instagram responsivo
Basándome en mi experiencia profesional, Smash Balloon Instagram Feed Pro es la forma más fiable y sencilla de garantizar que tu feed de Instagram se vea perfecto en todos los dispositivos.
En pocos minutos, y sin necesidad de programación, podrá disponer de un feed atractivo y apto para móviles.
He aquí cómo empezar:
- Consigue tu copia de Instagram Feed Pro y pruébalo sin riesgo durante 14 días para empezar a mostrar un feed de Instagram perfectamente adaptable en tu sitio web.
- Utiliza el editor visual de feeds con vista previa en directo para personalizar fácilmente el diseño de tu feed de Instagram responsivo y adaptarlo a la perfección a tu marca.
- Inserta tu nuevo feed en cualquier página, entrada o barra lateral de WordPress para maximizar su visibilidad.
¿Tiene alguna pregunta sobre el uso de Instagram Feed Pro para añadir un feed de Instagram sensible a su sitio de WordPress? Por favor, pregúntame en los comentarios a continuación.
Si eres creador de contenidos en vídeo, el siguiente post sobre cómo incrustar carretes de Instagram en tu web también puede serte útil.
¿Le ha resultado útil? Puede seguirnos en Facebook y Twitter para obtener más consejos y trucos útiles sobre marketing en redes sociales.
