Cómo incrustar Instagram Feed en su sitio Astra WordPress
Inicio Blog Cómo incrustar Instagram Feed en su sitio Astra WordPress

Cómo incrustar Instagram Feed en su sitio Astra WordPress

Cómo incrustar Instagram Feed en su sitio Astra WordPress

¿Quieres añadir tu feed de Instagram directamente a tu sitio web Astra WordPress?

Poner tus últimas fotos, carretes y vídeos de Instagram en tu sitio Astra es una gran manera de mantener tu sitio fresco y ayudar a la gente a ir de tu sitio web a tu página de Instagram, todo mientras complementas perfectamente el diseño de tu tema Astra.

Pero como vendedor de medios sociales, sé que conseguir que tu feed de Instagram se vea justo como quieres en tu sitio web Astra usando las opciones normales de Instagram puede ser difícil.

En Smash Balloon, creamos los mejores plugins de redes sociales para WordPress, diseñados para funcionar a la perfección con los mejores temas como Astra. Nuestros plugins hacen que sea muy fácil mostrar contenido de sitios como Instagram con total personalización.

En este artículo, te mostraré exactamente cómo utilizar nuestro sencillo método para añadir tu feed de Instagram a tu sitio web Astra.

¿Y lo que es mejor? Esta guía te guía paso a paso. Está hecho para cualquier usuario de Astra, por lo que puede obtener rápidamente su hermoso feed de Instagram en su sitio, incluso si usted no es bueno con la tecnología.

En este artículo

¿Por qué integrar el feed de Instagram en los sitios web de Astra?

Desarrollado por Brainstorm Force, Astra es un popular tema de WordPress y una gran opción si lo que buscas es crear un sitio web para tu marca.

wp astra wordpress tema plugin

Con la versión Pro de Astra, te resultará más fácil crear un sitio web WordPress que atraiga a los visitantes y los mantenga interesados.

Para que su sitio web Astra sea aún más atractivo, una solución fácil es incrustar contenido de redes sociales como Instagram.

Al incrustar feeds de contenido de Instagram, podrás:

  • Capte la atención de los usuarios con fotos y vídeos atractivos y manténgalos en su sitio web.
  • Muestra reseñas positivas para mostrar a los visitantes que la gente habitual en Instagram está contenta con tus productos y aumentar tus ventas.
  • Muestra las publicaciones de Instagram de tu propio perfil para conseguir toneladas de nuevas interacciones y seguidores
  • Incorpora un feed de Instagram que se pueda comprar y ofrece a los visitantes de tu sitio web una experiencia de compra atractiva.
  • Y mucho más...

Todo lo que tienes que hacer es incrustar los feeds de Instagram en tu sitio Astra, y podrás empezar a hacer crecer la presencia de tu marca en Instagram, impulsar tus ventas y mucho más.

Con esto, veamos la forma más sencilla de incrustar feeds de Instagram en Astra.

La forma más fácil de insertar feeds de Instagram en tu sitio web Astra

Cuando se trata de integrar WordPress con Instagram, la mejor herramienta que puedes utilizar es Smash Balloon Instagram Feed Pro.

mejor plugin instagram feed pro

Instagram Feed Pro es un plugin para WordPress que te permite mostrar contenido de Instagram en tu sitio web sin necesidad de conocimientos de programación.

Usando este plugin, puede incrustar Instagram fotos, videos, cortos, carruseles, historias, y mucho más. No requiere codificación.

Sólo tienes que seguir este sencillo flujo guiado, y el plugin te guiará a través del proceso de creación, personalización e incrustación de feeds de Instagram.

flujo guiado instagram feed pro

Además, Instagram Feed Pro te ofrece muchas formas de personalizar el diseño de tus feeds.

Para personalizar fácilmente tus feeds, puedes importar una plantilla prediseñada y copiar al instante un diseño único.

Personalmente, uso Instagram Feed Pro para ayudarme a mostrar mi contenido de Instagram en mi sitio Astra porque me encanta su personalizador visual de feeds.

Con unos pocos clics, puedes editar el diseño, la combinación de colores, los elementos de la entrada, los filtros, el diseño de la cabecera y mucho más. También puedes seguir todos los cambios en tiempo real.

visual customizer instagram feed pro

Dado que el plugin ha sido diseñado para ser ligero, puedes incrustar tantas publicaciones de Instagram como quieras, y tu sitio seguirá cargando tan rápido como siempre.

Y con un sitio web más rápido, también puede conseguir un SEO mucho mejor.

Con todas estas increíbles características, Instagram Feed Pro es fácilmente el mejor plugin de feed de Instagram en el mercado y tiene más de 1 millón de usuarios y una calificación de 4.9/5 estrellas.

opiniones instagram feed pro plugin

¿Listo para incrustar feeds de Instagram en Astra? Consigue Smash Balloon Instagram Feed Pro para tu web hoy mismo.

Ahora, vamos a empezar con nuestro tutorial paso a paso a continuación.

Cómo incrustar el feed de Instagram en tu sitio web Astra

Una vez que estés listo para incrustar feeds de Instagram en tu sitio Astra WordPress, todo lo que tienes que hacer es seguir nuestra guía paso a paso a continuación.

Paso 1: Instala el plugin Smash Balloon Instagram Feed Pro

Para empezar, puedes hacerte con tu copia de Instagram Feed Pro desde aquí y descargarla en tu ordenador.

A continuación, instale y active el plugin en su sitio web WordPress.

Para obtener más información, puede consultar esta guía para principiantes sobre cómo instalar un plugin de WordPress.

Paso 2: Crea tu feed de Instagram

Ahora sólo tienes que seguir el flujo guiado del plugin para empezar a crear tu feed de Instagram.

Abre el menú Instagram Feed " All Feeds desde el panel de control de WordPress para empezar.

A continuación, haga clic en el botón Añadir nuevo de la parte superior.

crear nuevo feed instagram feed pro

A continuación, puedes elegir el tipo de contenido de Instagram que deseas incrustar en tu sitio web:

  • Timeline del usuario: Mostrar las publicaciones de nuestra propia cuenta de Instagram
  • Hashtag público: Elige hashtags específicos y muestra todas las publicaciones con ese hashtag
  • Entradas etiquetadas: Utiliza el feed para mostrar tus menciones de Instagram en tu web

Incluso puede seleccionar aquí varias opciones para combinar tipos de alimentación en una sola.

Sólo tiene que hacer clic en el botón Siguiente después de seleccionar su tipo de alimentación.

selecciona tu tipo de feed instagram feed pro

Paso 3: Conecta el feed a tu Instagram

Ya puedes conectar la cuenta de Instagram de tu empresa o creador a tu página web. En caso de que no tengas una, solo tienes que seguir esta guía paso a paso aquí.

Una vez hecho esto, haga clic en el botón Añadir fuente.

instagram añadir fuente para feed

Ahora puedes elegir entre 2 tipos de conexiones de Instagram: Básicas o Avanzadas.

Con una conexión básica, puedes mostrar tus propias fotos y vídeos de Instagram a tus visitantes.

Por otro lado, una conexión avanzada te permite mostrar los hashtags de Instagram, las menciones, las historias y mucho más.

Para continuar, seleccione su tipo de cuenta y, a continuación, haga clic en el botón Conectar .

elige el tipo de conexión a instagram

Una vez hecho esto, puedes abrir Instagram o Facebook, dependiendo de tu tipo de conexión. La buena noticia es que el proceso es el mismo para cualquiera de las dos opciones.

De momento, haré clic en Conectar con Instagram.

conecta tu perfil básico de instagram

Para conectarte a Instagram, el plugin te pedirá acceso de sólo lectura a tu cuenta de Instagram.

Dado que el plugin sólo puede ver tu contenido y no puede hacer ningún cambio, Instagram Feed Pro es totalmente seguro.

Pulse el botón Permitir para continuar.

permitir acceso solo lectura instagram

Si has elegido una conexión avanzada, puedes hacer lo mismo en Facebook.

Ahora, puedes reutilizar libremente esta fuente para cualquiera de tus futuros feeds de Instagram.

Para terminar, seleccione aquí su fuente y haga clic en Siguiente.

confirma tu fuente de instagram

Paso 4: Personaliza tu feed de Instagram de Astra

Como el plugin es tan fácil de usar, también puedes personalizar fácilmente tus feeds de Astra Instagram, sin necesidad de tocar ni una sola línea de código.

Para ayudarte a empezar fácilmente, dispones de 8 plantillas prediseñadas entre las que puedes elegir.

Para continuar, sólo tienes que seleccionar la plantilla que deseas utilizar y hacer clic en Siguiente.

plantillas instagram astra

Ahora que has importado tu plantilla, Instagram Feed Pro abrirá el editor de feed en vivo para una personalización en profundidad.

A la izquierda encontrarás las opciones de personalización que te ayudarán a configurar el diseño de tu feed, la combinación de colores, la cabecera, los elementos de la entrada, cargar más botones y mucho más, sin necesidad de HTML o CSS.

live feed editor for instagram feed pro

Siempre que realices algún cambio utilizando estas opciones, la vista previa en directo de la derecha te mostrará cómo quedará tu feed de Instagram en tiempo real.

Ahora puedes hacer clic en la opción Feed Layout y empezar a configurar el diseño de tus publicaciones de Instagram.

seleccionar opciones de diseño de feed live feed editor instagram

A continuación, puede elegir entre 4 plantillas ya preparadas:

  • Cuadrícula: Incrusta tu contenido de Instagram en filas y columnas ordenadas para que puedas mostrar toneladas de publicaciones a la vez.
  • Carrusel: Convierte tus publicaciones de Instagram en un hermoso carrusel de Instagram y atrae a tus visitantes
  • Mampostería: Muestra el contenido de Instagram en varias columnas y mantén sus proporciones originales
  • Resaltar: Mostrar los posts en imágenes recortadas al cuadrado mientras se hacen posts específicos el doble de grandes.

Para este ejemplo, utilizaremos el diseño Resaltar .

opciones de diseño de feed instagram feed pro

Para confirmar su nuevo diseño, haga clic en el botón Guardar de la parte superior.

Una vez hecho esto, haz clic en el pequeño botón de personalización para volver a las opciones principales de personalización.

volver a las principales opciones de personalización instagram

Con eso, puedes seguir adelante y establecer los colores de tu feed de Instagram.

Para empezar, haga clic en la opción Combinación de colores de la izquierda.

seleccione la opción de combinación de colores

Para cambiar de forma sencilla los colores de tu feed, puedes elegir entre estas combinaciones de colores:

  • Heredar del tema: Copia los colores de tu tema Astra para que tu feed se adapte perfectamente a tu web.
  • Luz: Mostrar un feed de Instagram con un fondo brillante y una fuente oscura.
  • Oscuro: Elige un fondo oscuro y una fuente clara para tu feed de Instagram
  • Personalizados: Elige manualmente todos los colores
opciones de combinación de colores live instagram feed

Después de elegir tu combinación de colores, haz clic en el botón Guardar.

¿Quieres personalizar aún más tu feed de Instagram? Con el resto de opciones de personalización, puedes personalizar tu cabecera, cargar más botones, filtros y mucho más.

Cuando estés satisfecho con el diseño de tu feed de Instagram, no olvides hacer clic en el botón Guardar.

Paso 5: Insertar tu feed de Instagram de Astra

Desde el editor de feeds en directo, ahora puedes incrustar este feed de Instagram en tu página web, barra lateral y pie de página.

En primer lugar, haga clic en el botón Incrustar situado en la parte superior del editor.

instagram haz clic en el botón incrustar

A continuación, verás una ventana emergente con todas las formas en que puedes incrustar tu feed de Instagram.

Para nuestro ejemplo, utilizaremos la opción Añadir a una página .

añadir feed de instagram en directo a la página

Una vez hecho esto, Instagram Feed Pro te permitirá elegir la página en la que deseas incrustar tu feed.

Puedes incrustarlo en una página de WordPress, mostrarlo como un widget de feed de Instagram o incluso copiar el shortcode.

Sólo tiene que seleccionar la opción que desee y pulsar el botón Añadir.

selecciona la página para insertar el feed de instagram en directo

Al hacerlo, se abrirá la página en el editor Gutenberg de WordPress o se usarán otros constructores de páginas. Después de todo, Astra tiene compatibilidad total con los principales constructores de páginas como Beaver Builder o Elementor.

Incluso puedes importar una plantilla a esta página de WordPress antes de incrustar tu feed de Instagram. Para ello, haz clic en el botón Kits de plantillas de la parte superior.

plantillas abiertas wp astra

Al hacer clic se abrirá una ventana emergente en la que podrás ver todas las plantillas que puedes importar.

Desde aquí, busque la plantilla que prefiera y haga clic en ella.

seleccionar plantilla wp astra.jpg

A continuación, podrá ver más información sobre la plantilla. A la derecha también encontrará todas las variantes de esta plantilla.

Para continuar, puede hacer clic en el botón Importar plantilla.

importar plantilla wp astra

Una vez que hayas hecho clic, Astra añadirá la plantilla a tu página aquí. Después de hacer eso, es hora de seguir adelante e incrustar tu feed de Instagram.

En primer lugar, haga clic en el icono más (+) para añadir un nuevo bloque de WordPress.

añadir nuevo bloque de contenido en wordpress

Utilizando la barra de búsqueda de la parte superior, ahora puedes buscar el bloque "instagram ".

Una vez hecho esto, haz clic en el bloque Instagram Feed de los resultados de búsqueda que aparecen a continuación.

instagram feed block en wordpress page

Por último, haz clic en el botón Actualizar, y tu nuevo Astra Instagram feed estará en directo en tu página web.

Como puedes ver, Instagram Feed Pro hace que sea súper fácil mostrar contenido de Instagram en tu sitio. Si abres tu página, podrás ver cómo se verá el contenido de Instagram para tus visitantes.

ejemplo de feed de instagram en directo

¡Y ya está!

Como puedes ver, puede ser súper fácil incrustar feeds de Instagram en WordPress con la ayuda del plugin Instagram Feed Pro.

¿Quieres incrustar feeds de Instagram fácilmente? Hazte con tu copia de Instagram Feed Pro hoy mismo.

Mientras estás aquí, puedes consultar nuestra lista de los mejores consejos de marketing en Instagram.

¿Le ha gustado este artículo? No dudes en seguirnos en Twitter y Facebook para ver más tutoriales sobre marketing en redes sociales.

avatar de autor
Sajjan Sharma Redactor jefe
Sajjan lleva más de 10 años escribiendo sobre WordPress, marketing en redes sociales y negocios online. Sus intereses profesionales se extienden al marketing de influencers, la curación de contenidos y las estrategias de marketing digital.

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.