Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo incrustar fácilmente Instagram en WordPress (Paso a Paso)

¿Quieres incrustar feeds de Instagram en WordPress?

Mostrar fotos y videos de Instagram en tu sitio web ayuda a mantener tu contenido fresco, aumenta la participación del usuario y genera confianza. También es una excelente manera de promocionar tu cuenta de Instagram y conseguir más seguidores.

En este artículo, te mostraremos cómo incrustar Instagram en WordPress, paso a paso.

Cómo incrustar fácilmente Instagram en WordPress (paso a paso)

¿Por qué incrustar Instagram en tu sitio de WordPress?

Según nuestra investigación de estadísticas de marketing, Instagram tiene más de 2 mil millones de usuarios activos mensuales. Eso significa que es un excelente lugar para promocionar tus productos y servicios, crear conciencia de marca y hacer crecer tu audiencia.

Sin embargo, la gente no verá tu contenido de Instagram si solo visita tu sitio web. Con eso en mente, es inteligente incrustar tu feed de Instagram en WordPress, para que todos puedan verlo.

Esta es una forma fácil de promocionar tu página de redes sociales y animar a más personas a seguirte en Instagram.

Todo este contenido adicional puede mejorar la optimización para motores de búsqueda (SEO) de tu sitio, y animar a los visitantes a volver para ver las últimas publicaciones. Los comentarios y me gusta positivos también son una poderosa prueba social que puede generar confianza y conseguirte más ventas.

Dicho esto, veamos cómo puedes incrustar un feed de Instagram en WordPress.

Cómo instalar un plugin de fotos de Instagram

La mejor manera de incrustar Instagram en WordPress es usando el plugin Smash Balloon Social Photo Feed.

Este plugin gratuito te permite mostrar fotos de una o varias cuentas de Instagram, en un feed totalmente personalizable.

Un ejemplo de un feed de Instagram incrustado, creado con Feeds for Instagram

También es la forma más fácil de solucionar el problema de oEmbed de Facebook e Instagram en WordPress.

Después de colocar el feed en tu sitio web, se actualizará automáticamente cada vez que hagas una nueva publicación en Instagram. De esta manera, puedes mantener tu sitio fresco e interesante sin tener que actualizarlo manualmente.

En esta guía, utilizaremos la versión gratuita de Smash Balloon, ya que tiene todo lo que necesitas para agregar un feed de Instagram a tu sitio web de WordPress. Sin embargo, también existe una versión pro que te permite mostrar feeds de hashtags, agregar imágenes comprables de Instagram y más.

Antes de comenzar, deberás conectar tu cuenta de Instagram a una página de Facebook. Si tienes una cuenta personal de Instagram, es posible que también desees convertirla en una cuenta de negocios, ya que esto permite a Smash Balloon mostrar tu biografía y encabezado de Instagram automáticamente.

Para obtener instrucciones paso a paso sobre cómo hacer ambas cosas, consulta la sección de preguntas frecuentes al final de esta guía.

Cuando estés listo, procede a instalar y activar el plugin Smash Balloon Social Photo Feed. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Cómo conectar una cuenta de Instagram a WordPress

Después de activar el plugin, tu primera tarea es conectar tu cuenta de Instagram a WordPress. Simplemente ve a Instagram Feed » Settings y luego haz clic en ‘Add New.’

Cómo crear un nuevo feed de Instagram en WordPress

Con Smash Balloon pro, puedes crear feeds de publicaciones y hashtags etiquetados, o incluso crear un muro social con contenido de muchos sitios web de redes sociales diferentes.

Ya que estamos usando el plugin gratuito, simplemente selecciona ‘User Timeline’ y luego haz clic en ‘Next.’

Cómo agregar una línea de tiempo de Instagram a tu cuenta de WordPress

Ahora, simplemente elige la cuenta que usarás en tu feed de fotos personalizado de Instagram.

Para empezar, haz clic en el botón ‘Add Source’.

Agregar una cuenta de Instagram como fuente de Smash Balloon

En la siguiente pantalla, elige si deseas mostrar fotos de una cuenta personal o de negocios de Instagram.

Si marcas la casilla junto a ‘Personal’, entonces Smash Balloon no incluirá el avatar y la biografía de Instagram en tu encabezado por defecto. Sin embargo, siempre puedes agregar el avatar y la biografía de Instagram más tarde en la configuración del plugin.

Agregar una cuenta personal o de negocios de Instagram a WordPress

Después de elegir 'Personal' o 'Business', haz clic en 'Login with Facebook'.

Ahora puedes seleccionar la cuenta de Instagram que deseas mostrar en tu sitio web de WordPress y hacer clic en 'Siguiente'.

Elige una cuenta de Instagram para usar con Smash Balloon

Después de eso, marca la casilla junto a la página de Facebook que está vinculada a tu cuenta de Instagram.

Cuando hayas hecho eso, haz clic en el botón 'Siguiente'.

Cómo agregar una página de Facebook a tu sitio web de WordPress

Ahora verás una ventana emergente con toda la información a la que Smash Balloon tendrá acceso y las acciones que puede realizar.

Para restringir el acceso de Smash Balloon a tu cuenta de Instagram, simplemente haz clic en cualquiera de los interruptores para cambiarlo de 'Sí' a 'No'. Ten en cuenta que esto puede afectar las fotos y videos que puedes mostrar en tu blog de WordPress o sitio web.

Teniendo esto en cuenta, recomendamos dejar todos los interruptores activados.

Cuando estés satisfecho con la configuración, haz clic en 'Hecho'.

Cómo cambiar los permisos de Instagram con Smash Balloon

Ahora verás una ventana emergente con la cuenta de Instagram que acabas de agregar a tu sitio web.

Simplemente marca la casilla junto a esa cuenta y luego haz clic en 'Agregar'.

Elegir una cuenta de Instagram para agregar a tu sitio web de WordPress

Smash Balloon te llevará de regreso a la pantalla de Instagram Feeds » All Feeds.

Para agregar un feed de redes sociales a WordPress, simplemente marca la casilla junto a la cuenta de Instagram que deseas usar. Luego, haz clic en 'Siguiente'.

Cómo crear un feed de Instagram usando Smash Balloon

El plugin ahora creará un feed de fotos de Instagram que puedes agregar a cualquier página, publicación o área lista para widgets. Por ejemplo, puedes mostrar fotos de Instagram en una barra lateral de WordPress.

Sin embargo, antes de incrustar el feed de Instagram, es posible que desees personalizar su apariencia y agregar cualquier información faltante.

Cómo personalizar tu feed de fotos de Instagram

Por defecto, Smash Balloon abrirá tu feed en su editor listo para que lo personalices.

A la derecha, verás una vista previa de tu feed de fotos de Instagram. En el lado izquierdo están todas las configuraciones que puedes usar para personalizar el feed de fotos.

El editor de Instagram de Smash Balloon

La mayoría de estas configuraciones se explican por sí solas, pero cubriremos rápidamente algunas áreas clave.

Para empezar, puedes cambiar el diseño de las fotos de Instagram y agregar relleno seleccionando 'Feed Layout' (Diseño del feed) en el menú de la izquierda.

A medida que realices cambios, la vista previa se actualizará automáticamente para que puedas probar diferentes configuraciones y ver cuál se ve mejor.

Cambiar la disposición de un feed de Instagram en WordPress

Por defecto, Smash Balloon muestra el mismo número de fotos sin importar si el usuario está en una computadora de escritorio o en un dispositivo móvil.

Puedes previsualizar cómo se verá el feed de Instagram en computadoras de escritorio, tabletas y teléfonos inteligentes usando la fila de botones en la esquina superior derecha.

Previsualizar cómo se ve la disposición del feed de Instagram en smartphone y móvil

Los teléfonos inteligentes y las tabletas suelen tener pantallas más pequeñas y menos potencia de procesamiento, por lo que es posible que desees mostrar menos fotos y videos de Instagram en dispositivos móviles.

Para hacer esto, simplemente escribe un número diferente en el campo ‘Mobile’ bajo ‘Number of Posts’.

Mostrar un número diferente de publicaciones en escritorio y móvil

Al crear diferentes diseños para teléfonos inteligentes, tabletas y computadoras de escritorio, puedes asegurarte de que el feed se vea genial, sin importar qué dispositivo esté usando el visitante.

Por defecto, el feed del plugin muestra menos columnas en teléfonos inteligentes y tabletas, en comparación con las computadoras de escritorio. Esto ayuda a que tus fotos y videos quepan cómodamente en pantallas más pequeñas.

Para cambiar estas configuraciones predeterminadas, simplemente escribe nuevos números en la configuración de 'Columns' (Columnas).

Mostrar un número diferente de columnas de Instagram en escritorio, smartphone y tablet

Después de realizar tus cambios, haz clic en el enlace 'Customize' (Personalizar).

Esto te llevará de regreso al editor principal de Smash Balloon, listo para que explores la siguiente pantalla de configuración, que es ‘Color Scheme’.

Configuración del esquema de colores de Smash Balloon

Por defecto, Smash Balloon utiliza un esquema de colores heredado de tu tema de WordPress, pero también tiene temas 'Light' (Claro) y 'Dark' (Oscuro) que quizás quieras usar en su lugar.

Incluso puedes crear tu propio esquema de color seleccionando 'Personalizado' y luego usando la configuración para cambiar el color del enlace, el color de fondo, el color del texto en WordPress, y más.

Cambiar el esquema de columnas de Instagram usando Smash Balloon

Por defecto, Smash Balloon agrega una cabecera a la fuente de Instagram, que es tu foto de perfil y el nombre de tu página. Para cambiar el aspecto de esta sección, haz clic en 'Cabecera' en el menú de la izquierda.

En esta pantalla, puedes cambiar el color de fondo, mostrar tu biografía de Instagram, cambiar el tamaño de la cabecera y más.

Personalizar el encabezado de Instagram en tu sitio web de WordPress

A veces, es posible que desees mostrar una imagen de perfil diferente. Por ejemplo, si tu avatar de Instagram no destaca entre tu tema, puedes usar un logotipo personalizado en su lugar.

Para cambiar la imagen de perfil, haz clic en ‘Agregar imagen’ en ‘Mostrar avatar personalizado’. Luego, puedes elegir una imagen de la biblioteca de medios de WordPress o subir una foto nueva.

Añadir un avatar personalizado a un embed de Instagram en WordPress

También puedes agregar una biografía diferente. Por ejemplo, podrías animar a las personas a visitarte en Instagram o a empezar a seguir tu cuenta.

Para crear una biografía de Instagram única, simplemente escribe en el cuadro ‘Agregar biografía personalizada’.

Añadir una biografía personalizada de Instagram a tu sitio web de WordPress

Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra a la mejor resolución. Recomendamos usar estas configuraciones predeterminadas, pero puedes hacer que las imágenes de Instagram sean más grandes o más pequeñas si lo necesitas.

Para cambiar el tamaño de la imagen, haz clic en ‘Publicaciones’ en el menú de la izquierda. Luego, selecciona la opción ‘Imágenes y videos’.

Cambiar la resolución de las fotos y videos incrustados de Instagram

Ahora puedes elegir entre miniaturas, imágenes medianas y de tamaño completo usando el menú desplegable que aparece.

Para más información sobre este tema, consulta nuestra guía para principiantes sobre tamaños de imagen de WordPress.

Si no estás satisfecho con la apariencia del feed, puedes volver a esta pantalla en cualquier momento y seleccionar ‘Detectar automáticamente (Recomendado)’ en el menú desplegable.

Cómo detectar automáticamente la resolución de tu feed de Instagram

Por defecto, Smash Balloon agrega un botón de ‘Cargar más’ en la parte inferior de tu feed de Instagram para que los visitantes puedan desplazarse por tus fotos y videos.

Puedes cambiar la apariencia de este botón seleccionando ‘Botón Cargar más’.

Personalizar el botón 'Cargar más' de Instagram en WordPress

Aquí, puedes hacer que el botón ‘Cargar más’ destaque cambiando su color de fondo, color de texto y estado al pasar el cursor.

También puedes intentar agregar tu propio mensaje al botón, escribiendo en el campo ‘Texto’.

Añadir mensajes personalizados al botón 'Cargar más'

Si bien recomendamos dejar este botón habilitado, puedes eliminarlo. Por ejemplo, podrías animar a la gente a visitar tu Instagram limitando la cantidad de fotos que pueden ver en tu sitio.

Para eliminar el botón, simplemente desliza el control deslizante 'Habilitar' para que se ponga gris.

Cómo incrustar fácilmente Instagram en WordPress

Si a los visitantes les gusta lo que ven, pueden decidir suscribirse usando el botón 'Seguir en Instagram' que aparece debajo del feed incrustado.

Dado que es un botón tan importante, es posible que desees agregarle un estilo personalizado para que destaque. Para hacer esto, selecciona 'Botón de seguimiento' en el menú de la izquierda.

Aquí, puedes cambiar el color de fondo del botón, el estado al pasar el cursor y el color del texto.

Personalizar el botón 'Seguir' en redes sociales

Por defecto, el botón muestra la etiqueta 'Seguir en Instagram'.

Puedes reemplazar esto con tu propia llamada a la acción escribiendo en el campo 'Texto'.

Personalizar el botón 'Síguenos en Instagram'

Cuando estés satisfecho con el aspecto del feed de Instagram, no olvides hacer clic en 'Guardar' para almacenar tus cambios.

Ahora estás listo para agregar el feed de Instagram a tu sitio web de WordPress.

Cómo incrustar el feed de Instagram en WordPress

Puedes agregar el feed de Instagram a tu sitio web usando un bloque, un widget o un shortcode.

Si has creado más de un feed usando Smash Balloon Social Photo feed, entonces necesitarás conocer el código del feed si vas a usar un widget o bloque.

Para obtener este código, ve a Instagram Feed » Todos los Feeds y luego copia el texto debajo de 'Shortcode'.

En la siguiente imagen, necesitaremos usar instagram-feed feed=1.

Obtener el código para un feed de Instagram personalizado

Si deseas incrustar el feed de Instagram en una página o publicación, te recomendamos usar el bloque de Feed de Instagram.

Nota: Si estás utilizando un tema habilitado para bloques, puedes seguir las instrucciones a continuación para agregar el bloque en cualquier lugar de tu sitio usando el editor de sitio completo.

Simplemente abre la página o publicación donde deseas incrustar tu feed de fotos y videos de Instagram. Luego, haz clic en el ícono '+' para agregar un nuevo bloque y comienza a escribir 'Instagram Feed'.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la página o publicación.

El bloque 'Feeds for Instagram'

El bloque mostrará uno de tus feeds de Smash Balloon por defecto. Si deseas mostrar un feed de Instagram diferente en su lugar, busca 'Configuración de Shortcode' en el menú del lado derecho.

Aquí, simplemente agrega el código instagram-feed feed=1, luego haz clic en el botón 'Aplicar Cambios'.

Añadir el shortcode de Instagram a una página o publicación

El bloque ahora mostrará las fotos y videos de tu cuenta de Instagram. Simplemente publica o actualiza la página para que el feed esté activo en tu sitio web.

También puedes agregar el feed de Instagram a cualquier área lista para widgets. Por ejemplo, podrías agregarlo al pie de página de tu sitio web de WordPress, o a la sección de la barra lateral. De esta manera, los visitantes podrán ver el feed en cada página de tu sitio web.

Simplemente ve a Apariencia » Widgets en el panel de WordPress y luego haz clic en el botón azul '+'.

Añadir un feed de Instagram a un widget de WordPress

En la barra de búsqueda, escribe 'Instagram Feed' y selecciona el widget correcto cuando aparezca.

WordPress tiene un bloque incorporado de 'Instagram Feed', así que asegúrate de elegir el que muestre el logo oficial de Instagram.

Cómo añadir un feed de Instagram a un área preparada para widgets

Después de eso, simplemente arrastra el widget al área donde deseas mostrar el feed de Instagram.

El widget mostrará automáticamente uno de los feeds que creaste usando Smash Balloon. Si deseas mostrar un feed de Instagram diferente, simplemente escribe el shortcode del feed en el cuadro 'Configuración de Shortcode'.

Después de eso, haz clic en ‘Aplicar Cambios’.

Añadir un feed de Instagram a un área preparada para widgets

Ahora puede publicar el widget haciendo clic en el botón ‘Actualizar’. Para obtener más información, consulte nuestra guía paso a paso sobre cómo agregar y usar widgets en WordPress.

Otra opción es incrustar el feed de Instagram en cualquier página, publicación o área lista para widgets usando un shortcode.

Simplemente ve a Instagram Feed » Todos los Feeds y copia el código en la columna 'Shortcode'. Ahora puedes agregar este código a cualquier bloque de Shortcode.

Para obtener ayuda para colocar el código corto, por favor consulta nuestra guía sobre cómo agregar un código corto.

Finalmente, si tienes un tema habilitado para bloques, puedes usar el editor de sitio completo para agregar el bloque de Instagram Feed en cualquier lugar de tu sitio.

En el panel de WordPress, simplemente ve a Apariencia » Editor.

Abrir el editor de sitio completo (FSE)

Por defecto, el editor de sitio completo mostrará la plantilla de inicio del tema.

Si deseas agregar el feed de Instagram a un área diferente, haz clic en 'Plantilla' o 'Partes de Plantilla'.

Elegir una plantilla o parte de plantilla en el editor de sitio completo (FSE)

El editor ahora mostrará una lista de todas las partes de plantilla que componen tu tema de WordPress.

Simplemente haz clic en la plantilla donde deseas mostrar el feed de Instagram.

Elegir una plantilla de WordPress en el editor de sitio completo

WordPress ahora mostrará una vista previa del diseño.

Para editar esta plantilla, haz clic en el pequeño ícono de lápiz.

Añadir un feed de Instagram a WordPress usando el editor de sitio completo (FSE)

Después de elegir una plantilla, simplemente pasa el cursor del mouse sobre el área donde deseas agregar el feed de fotos de Instagram.

Luego, haz clic en el botón azul ‘+’.

Cómo añadir un bloque de Instagram usando el editor de sitio completo y un tema habilitado para bloques

Después de eso, comienza a escribir ‘Instagram Feed’.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la plantilla.

Añadir un feed de redes sociales usando el editor de sitio completo de WordPress (FSE)

Como siempre, Smash Balloon mostrará un feed por defecto si no agregas un shortcode específico. Puedes cambiar este feed agregando un shortcode siguiendo el mismo proceso descrito anteriormente.

Preguntas frecuentes sobre cómo incrustar Instagram en WordPress

Smash Balloon facilita la visualización de fotos y videos de Instagram en tu sitio web. Dicho esto, aquí tienes algunas de las preguntas más frecuentes sobre cómo agregar un feed de Instagram en WordPress.

¿Cómo creo una cuenta de negocios de Instagram?

Smash Balloon Social Photo Feed puede mostrar fotos de una cuenta personal o de negocios de Instagram.

Sin embargo, Smash Balloon no puede obtener automáticamente el avatar y la biografía de Instagram de una cuenta personal. Teniendo esto en cuenta, es posible que desees verificar si tienes una cuenta personal o de negocios, y luego cambiar a una cuenta de negocios para que Smash Balloon pueda obtener tu avatar y biografía automáticamente.

Para verificar, simplemente visita tu cuenta de Instagram y haz clic en el ícono de tres líneas en el menú lateral.

Cómo verificar si tienes una cuenta personal o de negocios en Instagram

Después de eso, selecciona ‘Configuración’.

Si no tienes una cuenta de negocios, esta pantalla mostrará ‘Cambiar a cuenta profesional’ en el menú de la izquierda.

Cómo cambiar a una cuenta personal de Instagram

Si actualmente tienes una cuenta personal y deseas cambiar a una cuenta de negocios, simplemente haz clic en este enlace.

¿Cómo conecto una página de Facebook a una cuenta de Instagram?

Antes de poder agregar un feed de Instagram a WordPress, deberás conectar tu cuenta de Instagram a una página de Facebook.

Para hacer esto, dirígete a la página de Facebook que deseas usar y luego haz clic en 'Configuración' en el menú de la izquierda.

Después de eso, haz clic en ‘Cuenta vinculada’. Ahora puedes seleccionar ‘Instagram’ y hacer clic en el botón ‘Conectar’.

Cómo conectar Facebook e Instagram

Facebook ahora mostrará toda la información a la que podrá acceder y las acciones que puede realizar en Instagram.

Si estás de acuerdo, haz clic en el botón ‘Conectar’.

Cómo dar acceso a Smash Balloon a tu cuenta de Instagram

Ten en cuenta que cualquier otra persona que administre tu página de Facebook podrá ver tus mensajes de Instagram y responder a ellos. Si deseas mantener tus mensajes de Instagram privados, haz clic para desactivar la opción.

Cuando estés satisfecho y listo para continuar, haz clic en ‘Confirmar’.

Cómo configurar tus permisos de Instagram usando Smash Balloon

Esto abre una ventana emergente donde puedes escribir tu nombre de usuario y contraseña de Instagram.

Después de eso, haz clic en ‘Iniciar sesión’.

Iniciar sesión en tu cuenta de Instagram

Después de unos momentos, verás un mensaje que dice que tus cuentas de Instagram y Facebook ahora están conectadas.

Esperamos que este artículo te haya ayudado a aprender cómo incrustar fácilmente Instagram en WordPress. También puedes consultar nuestra guía sobre cómo crear un feed personalizado de Facebook en WordPress, o ver nuestra selección experta de los mejores plugins de redes sociales para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

18 CommentsLeave a Reply

  1. Esta es la primera vez que incrusto Instagram en mi sitio web de WordPress y parece bastante fácil con esta guía. Me encanta la forma en que usas ilustraciones e imágenes para las explicaciones. Es una publicación de blog muy larga, pero valió la pena.

    Gracias por esta guía. ¿Tienes algún enlace útil para incrustar también el feed de Twitter?

  2. He agregado un video de Instagram en WordPress con oAuth, pero estoy experimentando un problema. Tengo la página dividida en 2 columnas con videos que bajan por la página y los videos de Instagram tienen un gran espacio en blanco debajo de ellos. ¿Sabes alguna forma de arreglar eso? Aquí está mi sitio http://www.BeardGrowl.com

    Gracias por cualquier ayuda que puedas ofrecer.

  3. Implementé este fragmento genial como indicaste, sin embargo, cuando se renderizó en mi blog/sitio de WP, era una foto del tamaño de una miniatura. ¿Es ese el comportamiento esperado? ¿O se supone que debe renderizar la imagen a tamaño completo, lo que significa que hay algo en mi código que necesito investigar?

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.