Cómo incrustar el feed de Instagram en WordPress (con el botón Compartir)

Publicado: 2022-04-14
how to add instagram feed in wordpress

¿Quieres una manera fácil de incrustar un feed de Instagram en WordPress?

Al agregar un feed de Instagram a su sitio web, puede hacer que el contenido sea más interesante y atractivo. Es una excelente manera de promocionar su marca y mejorar la experiencia del usuario en su sitio.

En este tutorial, le mostraremos cómo agregar un feed de Instagram en WordPress paso a paso. También le mostraremos cómo agregar botones de compartir y me gusta para aumentar la participación en las redes sociales.

Antes de eso, aprendamos los beneficios de agregar su feed de Instagram a su sitio.

¿Por qué agregar Instagram Feed en el sitio de WordPress?

Instagram es sin duda una de las plataformas de redes sociales más populares del mundo. Lo que comenzó como una aplicación para compartir fotos, ahora se ha convertido en el centro de marketing, personas influyentes y marcas.

Con contenido generado por el usuario, como fotos, videos e historias en Instagram, su marca se vuelve más visible y accesible para nuevas personas. Y cuando incrusta estos feeds de Instagram en su sitio web de WordPress, puede aumentar aún más la interacción.

Para empezar, puede usar su contenido de Instagram para llegar a un público más amplio que solo sus seguidores de Instagram.

También genera confianza entre los visitantes de su sitio web y actúa como prueba social para su negocio. Ver a otras personas disfrutando y amando sus productos hace que los nuevos usuarios también quieran probarlos.

Debido a que las imágenes y los videos son más atractivos que el contenido de texto, ayuda a aumentar el tiempo de sesión en su sitio web. Esto significa que puede retener la atención de su audiencia durante un período de tiempo más largo, lo que también es excelente para el SEO.

Por lo tanto, hay muchas ventajas de incorporar un feed de Instagram en su sitio. Es una excelente herramienta de marketing para aumentar su presencia en línea y aumentar las tasas de conversión.

Dicho esto, aprendamos cómo puede agregar su feed de Instagram a su sitio de WordPress en unos simples pasos.

La forma más fácil de agregar un feed de Instagram en WordPress

Incrustar un feed de Instagram suele ser una tarea muy técnica. Deberá incrustar código, conectar su perfil de Instagram con una clave API y luego usar CSS personalizado para diseñar el feed para que se vea bien en su sitio.

Vamos a omitir todo eso y usar un complemento que administre todo por usted. No necesita tocar una línea de código para mostrar su feed en su sitio web.

Para este tutorial, usaremos Instagram Feed Pro de Smash Balloon.

smash balloon instagram feed homepage

SmashBalloon es el mejor complemento de feed de redes sociales para WordPress. Ofrece 5 complementos diferentes que le permiten integrar sin problemas el contenido de diferentes plataformas de redes sociales en su sitio web.

Estos 5 complementos son:

  • Feed de Facebook personalizado: agregue fotos, publicaciones, videos y transmita videos en vivo desde Facebook en su sitio de WordPress.
  • Feed de Instagram: crea feeds de fotos de Instagram, hashtags y más en cualquier página de WordPress. Incluso hay una opción para crear feeds que se pueden comprar, lo cual es excelente para los sitios de comercio electrónico.
  • Feed de Twitter personalizado: muestre tarjetas de Twitter, tweets que mencionan su cuenta de Twitter y permita a los usuarios desplazarse para ver más tweets en su sitio web.
  • Feeds para YouTube: Muestre sus videos de YouTube, transmisiones en vivo y lista de reproducción favorita en cualquier publicación o página.
  • Muro social: combine feeds de todos los Facebook, Twitter, Instagram y YouTube en un solo muro.

Con su complemento Instagram Feed, puede crear fácilmente feeds de Instagram personalizados o usar hashtags para mostrar contenido generado por el usuario desde Instagram. Incluso agrega el botón de compartir junto con tus fotos de Instagram.

Ahora, por lo general, para conectar 2 aplicaciones como WordPress e Instagram, deberá seguir un proceso muy técnico. Pero con Smash Balloon, todo eso se hace entre bastidores, por lo que no tendrás que hacer nada más que hacer clic en algunos botones para configurarlo.

El complemento también ofrece muchas opciones de personalización para cambiar el diseño y el diseño de sus feeds de Instagram. Sin mencionar que todos los feeds que crea con este complemento son totalmente receptivos.

Y la mejor parte es que a medida que crea nuevas publicaciones en Instagram, este complemento buscará automáticamente el contenido y actualizará su feed de WordPress.

Ahora que sabe qué complemento usar, le mostraremos cómo incrustar su feed de Instagram con facilidad.

Paso 1: Instale y active Instagram Feed Pro

Primero, deberá registrarse para obtener una cuenta de Smash Balloon. Luego, puede acceder al archivo del complemento Instagram Feed Pro junto con su clave de licencia en el tablero.

download instagram feed plugin

Ahora, necesita instalar el complemento en su sitio de WordPress. Si desea ayuda con esto, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Después de instalar y activar el complemento, vaya a la pestaña Feed de Instagram » Licencia en su panel de administración de WordPress. Aquí, debe ingresar su licencia y hacer clic en el botón Activar licencia .

activate license

Una vez que se verifique su cuenta, puede conectar su cuenta de Instagram a su sitio web.

Paso 2: conecta tu cuenta de Instagram

Antes de que pueda mostrar su feed de Instagram en su sitio, primero debe conectar su cuenta.

Para ello, ve a Feed de Instagram » pestaña Configuración y verás el botón para conectar una cuenta de Instagram.

connect your instagram account

Después de hacer clic en el botón, debe seleccionar el tipo de cuenta e iniciar sesión en su cuenta en la siguiente pantalla.

Elegir la cuenta personal le permite mostrar fuentes de su propia cuenta de Instagram solamente.

Mientras que la cuenta Business le permite mostrar feeds usando hashtags, etiquetas de fotos y más filtros. Pero, si tiene una cuenta comercial de Instagram, primero deberá iniciar sesión con Facebook.

Aquí, estamos eligiendo el tipo de cuenta como Personal e iniciando sesión con Instagram.

select account type

En la siguiente ventana, simplemente otorgue acceso a su cuenta de Instagram haciendo clic en el botón "Permitir".

allow permissions

Luego, será redirigido a su panel de control de WordPress donde deberá confirmar su cuenta haciendo clic en el botón Conectar esta cuenta .

connect account

Ahora, su cuenta está conectada con éxito a su sitio de WordPress. Desplácese hacia abajo para configurar otras opciones.

En la sección Seleccione un tipo de alimentación , hay 4 opciones:

  • Cuenta de usuario : muestre una transmisión en vivo desde su cuenta de Instagram.
  • Hashtag : muestra todos los feeds con los hashtags elegidos.
  • Etiquetado : agrega todas las fotos de Instagram en las que otros usuarios te etiquetan.
  • Mixto : muestra un solo feed que consta de varios tipos de feed.
set up feed type

Debido a que conectamos una cuenta personal, seleccionaremos la opción Cuenta de usuario para esto. Pero puede usar las opciones Hashtag, Tagged y Mixto si está usando una cuenta comercial.

Una vez que haya terminado con la configuración de su cuenta, haga clic en el botón Guardar cambios .

Paso 3: Configure los ajustes de alimentación de Instagram

Con el complemento Feed de Instagram, puede elegir cómo mostrar sus fotos y videos de Instagram según sus preferencias.

En la página Configuración , haga clic en la pestaña Personalizar en la parte superior. Aquí puedes ver toneladas de opciones de personalización.

Primero, tiene la configuración general , como el ancho, la altura y el color de fondo de su feed de Instagram.

customization options

A continuación, hay opciones de diseño donde puede elegir entre 4 plantillas diferentes: cuadrícula, carrusel, mampostería y resaltado.

change instagram feed layout

Con el diseño de cuadrícula , su contenido de Instagram se muestra en columnas uniformes de forma cuadrada.

display instagram feed in website

O bien, puede elegir el diseño Carrusel para mostrar sus fotos y videos de Instagram en un control deslizante. También hay opciones para agregar flechas de navegación.

carousel layout view

De esta manera, también puede experimentar con otros diseños como Masonry y Highlight . Otras configuraciones de feed incluyen la cantidad de fotos, columnas y relleno de imágenes.

Si se desplaza hacia abajo, verá las opciones de personalización para el encabezado de fuente, el botón Cargar más y el botón Seguir.

show header load more follow button

Una vez que haya terminado de personalizar el diseño y la configuración de su feed, haga clic en el botón Guardar cambios .

Si desea agregar y personalizar contenido generado por el usuario con hashtags, vaya a la pestaña Configuración » Configurar y agregue sus hashtags públicos. Guarde su configuración una vez que haya terminado.

hastag feed type

Luego, abra la pestaña Moderación en la página Personalizar . Aquí hay opciones para mostrar o eliminar fotos y videos de su feed de Instagram usando hashtags.

Además, el complemento ofrece la opción de moderar su feed generado por el usuario desde la parte frontal de su sitio. En la sección Moderación, elija el tipo de moderación como Visual .

moderate hastag feed

Después de guardar su configuración, podrá agregar o eliminar cualquier foto o video de su feed de hashtag de Instagram en la interfaz.

hashtag feed

La opción de moderación solo es visible para los usuarios registrados con privilegios de administrador. Deberá hacer clic en el botón Moderar alimentación para seleccionar las fotos que desea ocultar o mostrar.

moderate hashtag feed

Asegúrese de guardar los cambios una vez que esté satisfecho con el diseño y el diseño de su feed de Instagram.

Ahora, está listo para mostrar su feed de Instagram en su sitio de WordPress.

Paso 4: muestra tu feed de Instagram

Smash Balloon le permite mostrar su feed de Instagram personalizado en su sitio con códigos cortos y el bloque de Gutenberg.

Primero, le mostraremos cómo agregar su feed usando el bloque personalizado Feed de Instagram en una página. En su menú wp-admin, abra una nueva página navegando a Páginas » Agregar nueva opción.

En el editor de bloques, agregue un nuevo bloque y busque el bloque Feed de Instagram . Cuando lo selecciona, su feed se inserta automáticamente en el editor de páginas.

insert instagram feed

Luego, todo lo que necesita hacer es hacer clic en el botón Publicar para mostrar el feed de Instagram en su sitio de WordPress. Puede obtener una vista previa del feed de Instagram y ver cómo se ve en la parte frontal de su sitio.

publish feed page

Cuando los usuarios hacen clic en cualquier imagen individual de su feed, pueden ver el botón de Instagram para ver la publicación en Instagram.

Además, hay un botón Compartir que permite a los usuarios compartir la publicación en diferentes plataformas como Facebook, Twitter, Pinterest y más.

how to add instagram share button in wordpress

Alternativamente, puede agregar su feed de Instagram en WordPress usando los códigos cortos del complemento. Vaya a la pestaña Feed de Instagram » Configuración y haga clic en la pestaña Mostrar su feed .

Aquí encontrará opciones de códigos abreviados para mostrar su feed.

display options how to add instagram feed in wordpress

Para este tutorial, solo necesitamos el código abreviado [instagram-feed]. Por lo tanto, simplemente puede copiar este código abreviado y pegarlo en cualquier página, publicación o área de widgets (como una barra lateral o un pie de página).

shortcode embed

Bono: incrustar publicaciones de Instagram en WordPress con oEmbeds

Otra excelente manera de incrustar su feed de Instagram en WordPress es usando oEmbeds.

Pero lamentablemente, WordPress ha descontinuado el soporte para Facebook e Instagram oEmbeds. Entonces ahora necesita un token de acceso para que funcionen.

La buena noticia es que Smash Balloon te da la opción de usar oEmbeds sin tener que configurarlo manualmente.

Solo necesitas conectar tu cuenta de Facebook. Dado que Instagram es parte de Facebook, no necesita configurar su cuenta de Instagram para ello.

Para configurar oEmbed, navegue a la pestaña Feed de Instagram » oEmbeds en su tablero de WordPress. Aquí, haga clic en el botón Habilitar oEmbeds de Instagram .

instagram oembed embed instagram photos in wordpress

Luego, debe hacer clic en el botón Conectar a Facebook . En la siguiente pantalla, debe seleccionar la página que desea agregar.

connect to facebook how to add instagram feed in wordpress

A continuación, haga clic en el botón Listo para finalizar su conexión.

give permissions facebook

Ahora, puede incrustar fácilmente el feed de Instagram en WordPress con oEmbeds. Para hacer esto, ve a tu tablero de Instagram y abre la publicación que deseas insertar, y haz clic en los tres puntos en la esquina superior derecha.

instagram post how to add instagram feed in wordpress

Luego, seleccione la opción Copiar enlace del menú.

copy post link how to add instagram feed in wordpress

Ahora, regrese a su tablero de WordPress y abra la página o publicación donde desea agregar la imagen.

Con Smash Balloon, puedes simplemente pegar el enlace en el editor de texto e incrustará automáticamente tu publicación de Instagram allí. Puede continuar y publicar la publicación en su sitio web.

oembeds link

¡Felicitaciones! Ha aprendido con éxito cómo incrustar su feed de Instagram en WordPress.

Con el complemento Feed de Instagram de Smash Balloon, puede agregar un feed de Instagram en WordPress con unos pocos clics. Esto le permite llegar a más personas que usuarios de Instagram.

El complemento le brinda la libertad de crear y personalizar su propio feed de Instagram.

Además, puede editar el diseño y elegir qué publicaciones incluir u ocultar con facilidad.

Ahora que sabe lo fácil que es usar Smash Balloon, también puede aprender cómo mostrar su feed de Facebook en WordPress.

¡Y eso es todo! Esperamos que este tutorial le haya ayudado a aprender cómo incrustar fácilmente un feed de Instagram en WordPress con botones para compartir.

Para sus próximos pasos, puede consultar estos recursos:

  • Increíbles herramientas de automatización de redes sociales
  • 12 formas de usar las redes sociales para aumentar los suscriptores de correo electrónico
  • Mejor enlace en Bio Herramientas de Instagram

Estas publicaciones lo ayudarán a automatizar la integración de sus redes sociales y hacer crecer sus listas de correo electrónico. El último lo ayudará a crear un enlace de Instagram en la página de biografía para aumentar el tráfico en su sitio.