Alternar menú

Cómo mostrar un feed de Instagram en WordPress (en 4 pasos)

Publicado: 2023-02-10

¡Nuevo mercado de plantillas de Beaver Builder! Comience GRATIS en Assistant.Pro

How to Display an Instagram Feed in WordPress
  • Constructor de castores
  • WordPress

Cómo mostrar un feed de Instagram en WordPress (en 4 pasos)

Dado que WordPress descontinuó oEmbeds en 2020, no puede insertar su feed de Instagram en el contenido simplemente pegando un enlace. Por lo tanto, es posible que esté buscando una forma fácil de usar para mostrar un feed de Instagram en su sitio de WordPress.

Mostrar un feed de Instagram en WordPress es fácil con PowerPack para Beaver Builder. Esta es una excelente manera de mantenerse al tanto de su presencia social. Además, al agregar un feed a su sitio, puede dirigir el tráfico entre ambas plataformas para mantener a los usuarios interesados.

En esta publicación, veremos más de cerca los beneficios de mostrar su feed de Instagram en su sitio. Luego, lo guiaremos a través de cuatro sencillos pasos para ayudarlo a lograrlo. ¡Empecemos!

Tabla de contenido

  • Los beneficios de mostrar un feed de Instagram en su sitio web
  • Cómo mostrar un feed de Instagram en WordPress (en 4 pasos)
    • Paso 1: configure una aplicación de Instagram con Meta para desarrolladores
    • Paso 2: configure los ajustes de su aplicación y agregue un usuario de prueba
    • Paso 3: Genere su token de acceso a Instagram
    • Paso 4: agrega tu feed de Instagram a tu página
  • Conclusión
  • preguntas relacionadas

Los beneficios de mostrar un feed de Instagram en su sitio web

Al mostrar un feed de Instagram en su sitio web, siempre tendrá contenido nuevo para que los usuarios interactúen. Además, un feed actualizado regularmente significa que incluso cuando las personas vuelvan a visitar su sitio, siempre se verá ligeramente diferente y tendrá algo nuevo que ofrecer.

Además, agregar un feed de Instagram es una manera rápida y fácil de arreglar su página y mejorar su diseño web de WordPress. Dado que se mantiene solo, es una solución más conveniente que pagar por temas extravagantes o cargar imágenes constantemente para impresionar a los clientes.

Además, puede mostrar un feed de Instagram con contenido generado por el usuario de clientes reales que usan sus productos:

Ejemplo de un feed de Instagram que se muestra en un sitio web

En estas publicaciones, puede demostrar la presencia y los valores de su empresa interactuando con los usuarios en los comentarios. Mejor aún, un feed de Instagram como este puede actuar como prueba social, lo que le permite generar confianza y aumentar las ventas.

Finalmente, el beneficio más significativo de incluir un feed de Instagram en su sitio web es que es una excelente manera de dirigir el tráfico hacia sus cuentas sociales. Esto es particularmente útil si sus páginas de redes sociales son relativamente nuevas y está buscando una manera de obtener más seguidores.

Cómo mostrar un feed de Instagram en WordPress (en 4 pasos)

La forma más fácil de mostrar un feed de Instagram en WordPress es con PowerPack para Beaver Builder:

Complemento PowerPack Beaver

Una vez que se instala el complemento, podrá elegir entre un montón de módulos funcionales y creativos, incluidos menús avanzados, controles deslizantes de tarjetas y formularios de búsqueda.

También puedes aprovechar las plantillas prediseñadas para agilizar tu trabajo de diseño web. Mejor aún, se beneficiará de muchas integraciones útiles, lo que reduce la necesidad de complementos de terceros.

Para instalar PowerPack, necesitará nuestro complemento de creación de páginas Beaver Builder activado en su sitio. Luego, puede cargar el complemento PowerPack en WordPress navegando a Complementos > Agregar nuevo > Cargar. Finalmente, diríjase a PowerPack e ingrese su clave de licencia.

Paso 1: configure una aplicación de Instagram con Meta para desarrolladores

Para comenzar, primero deberá crear una cuenta con Meta para desarrolladores. Si ya tiene una cuenta, inicie sesión en el sitio web. Una vez que su cuenta esté configurada, haga clic en Mis aplicaciones :

Metaaplicaciones.

Seleccione Crear aplicación y accederá a una nueva pantalla. Aquí, elija Consumidor y luego presione Siguiente :

Seleccione Consumidor como su tipo de aplicación

En este punto, se le presentará un formulario donde puede ingresar el nombre de su aplicación y confirmar su dirección de correo electrónico. A continuación, haga clic en Crear aplicación :

Crea tu app con Meta para Desarrolladores

Se le pedirá que vuelva a ingresar su contraseña para terminar de configurar su aplicación.

Ahora verá una lista de todas las aplicaciones disponibles, como Facebook Login, Fundraisers y Webhooks. Busque la opción Pantalla básica de Instagram y haga clic en Configurar :

Configurar una aplicación de visualización básica de Instagram

A continuación, se le presentará información sobre la visualización de su aplicación, casos de uso y permisos. Escanee estos detalles y luego haga clic en Crear nueva aplicación . Aparecerá una ventana emergente para que ingrese una nueva ID de aplicación de Instagram:

Identificación de la aplicación de Instagram

Es una buena idea visitar el enlace provisto en la ventana emergente para evitar violaciones de la marca de Instagram. Luego, en el cuadro Nombre para mostrar , ingrese una nueva ID de aplicación de Instagram y presione Crear aplicación .

Paso 2: configure los ajustes de su aplicación y agregue un usuario de prueba

Ahora que configuró su aplicación, deberá configurar los ajustes de su aplicación y agregar un usuario de prueba desde su tablero Meta para desarrolladores.

Desde esta área, navegue a Configuración > Básica :

Configuración básica en Meta para desarrolladores

Se le dirigirá a una nueva pantalla con campos para que los complete. Algunos de los campos ya están completos, como el secreto de la aplicación y el ID de la aplicación . Complete los campos restantes que se aplican a su aplicación y empresa.

En el menú desplegable Categoría , seleccione Negocios y páginas . Luego guarde sus cambios.

Ahora está listo para agregar un usuario de prueba a su aplicación. Para hacer esto, diríjase a Funciones de la aplicación > Funciones y desplácese hacia abajo para encontrar Agregar probadores de Instagram :

Agregue probadores de Instagram a su aplicación Meta para desarrolladores

Aparecerá una ventana emergente donde puede agregar su nombre de usuario de Instagram:

Agregue su nombre de usuario de Instagram a Meta para desarrolladores

Haga clic en Enviar para enviar una invitación a su cuenta de Instagram elegida.

Ahora, deberá aceptar la invitación, así que diríjase a su cuenta de Instagram. Vaya a Configuración > Aplicaciones y sitios web > Invitaciones de probadores :

Aceptar una invitación de Tester en Instagram

Luego, acepta la invitación. Es importante tener en cuenta que este paso debe completarse en una computadora de escritorio y no tendrá éxito si está utilizando la aplicación móvil.

Paso 3: Genere su token de acceso a Instagram

En esta etapa, está listo para generar su token de acceso a Instagram. Por lo tanto, vuelva a su panel de Meta para desarrolladores. Desplácese hacia abajo hasta que vea Mis productos :

Tus productos en tu tablero de Meta for Developers

Haga clic en Configuración y desplácese hasta Configuración de OAuth del cliente . En este cuadro, ingrese la siguiente URL: "https://wpbeaveraddons.com/instagram-access-token/".

Donde dice Desautorizar URL de devolución de llamada , ingrese esta dirección: "https://wpbeaveraddons.com/". Para la URL de solicitud de eliminación de datos , use la misma URL que la anterior. Luego, guarde sus cambios:

Agregue las URL a la configuración de la aplicación de pantalla básica

Ahora, desplácese hacia abajo hasta User Token Generator y seleccione Generate Token :

Generar token para usuarios de prueba de Instagram

Es posible que deba volver a iniciar sesión en su cuenta de Instagram si su sesión ha finalizado. Luego, haga clic en Permitir en la nueva ventana para generar su token de acceso:

Token de usuario de prueba de Instagram

Marque la casilla de verificación para demostrar que comprende las condiciones. Luego, copie el token en su portapapeles y presione Listo.

Paso 4: agrega tu feed de Instagram a tu página

Ahora es el momento de agregar el feed de Instagram a su página o publicación en WordPress. Inicie el editor de Beaver Builder y acceda a los módulos a través de la barra lateral. Luego, seleccione el módulo PowerPack Instagram Feed y arrástrelo a su página:

Módulo de alimentación de Instagram.

En la pestaña General de la configuración del módulo, verá un enlace que dice: Falta su token de acceso de Instagram, haga clic aquí para configurar . Siga este enlace a su configuración de integración de PowerPack y pegue el token de acceso que copió anteriormente:

Ingrese su token de acceso de Instagram en la configuración de PowerPack

Ahora, regresa a tu página o publicación de WordPress y verás aparecer tus fotos de Instagram.

Además, con los complementos de PowerPack, incluso puede ajustar la configuración de visualización de su fuente utilizando las numerosas opciones de personalización. Para comenzar, presione el ícono de llave inglesa y seleccione Configuración de feed de Instagram :

Configuración de alimentación de Instagram de complementos de PowerPack

Aquí, puede limitar la cantidad de imágenes que se muestran en su feed. También puede ajustar la resolución y cambiar el orden de sus publicaciones, mostrando primero sus fotos más recientes.

En Diseño , puede modificar el formato de sus imágenes, eligiendo entre mampostería, columnas o un carrusel:

Configuración del carrusel de feeds de Instagram en los complementos de PowerPack

Si elige la opción Carrusel, puede reproducir automáticamente su feed, cambiar los botones de control y ajustar la velocidad de reproducción dentro de la pestaña Carrusel .

En la parte inferior de la configuración general , también puede optar por mostrar un enlace a su perfil de Instagram. Mientras tanto, en la pestaña Estilo , puede agregar superposiciones o escala de grises a sus imágenes.

Una vez que su feed tenga exactamente el aspecto que desea, haga clic en Guardar . Luego, Listo > Publicar para publicar tu página.

Conclusión

La integración de su sitio web con los sitios de redes sociales es una excelente manera de atraer visitantes entre ambas plataformas. Sin embargo, puede parecer difícil de implementar al principio. Afortunadamente, con PowerPack para Beaver Builder, puede mostrar fácilmente su feed de Instagram en sus páginas.

En resumen, aquí hay cuatro pasos para mostrar su feed de Instagram en WordPress:

  1. Configure una aplicación de Instagram con Facebook para desarrolladores.
  2. Configure los ajustes de su aplicación y agregue un usuario de prueba.
  3. Genera tu token de acceso a Instagram.
  4. Ingrese su token de acceso en el módulo de feeds de Instagram y configure los ajustes de visualización del feed con Beaver Builder.

preguntas relacionadas

¿Cómo muestro feeds de redes sociales en WordPress?

La forma más fácil de mostrar sus feeds sociales en WordPress es usar un complemento. PowerPack for Beaver Builder es una solución realmente sencilla. Puede usarlo para insertar un cuadro Me gusta de Facebook, una línea de tiempo de Facebook, una cuadrícula de Twitter, botones de Twitter, feeds de Instagram y más.

¿Por qué no puedo incrustar Instagram en WordPress?

En 2020, WordPress descontinuó oEmbeds para Facebook e Instagram, lo que hizo imposible insertar un feed de Instagram con solo pegar el enlace. Sin embargo, la buena noticia es que con un complemento como PowerPack para Beaver Builder, puede mostrar fácilmente su feed de Instagram en sus páginas.