Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

¿Quieres incrustar feeds de Instagram en WordPress?

Mostrar fotos y vídeos de Instagram en tu sitio web ayuda a mantener tu contenido fresco, aumenta la participación de los usuarios y genera confianza. También es una buena forma 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.

How to easily embed Instagram in WordPress (Step by step)

¿Por qué incrustar Instagram en tu sitio WordPress?

Según nuestra investigación de estadísticas de marketing, Instagram tiene más de 2.000 millones de usuarios activos mensuales. Esto significa que es un lugar ideal para promocionar tus productos y servicios, crear conciencia de marca y aumentar tu audiencia.

Sin embargo, la gente no verá tu contenido de Instagram si solo visita tu sitio web. Teniendo esto en cuenta, es inteligente incrustar tu feed de Instagram en WordPress, para que todo el mundo pueda verlo.

Es una forma sencilla de promocionar tu página en los medios sociales y animar a más gente a seguirte en Instagram.

Todo este contenido adicional puede mejorar la optimización para motores de búsqueda (SEO) de su sitio y animar a los visitantes a volver para marcar / comprobar las últimas entradas. Los comentarios positivos y los “me gusta” son también una potente prueba social que puede generar confianza y conseguir más ofertas.

Dicho esto, veamos cómo 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 utilizando 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.

An example of an embedded Instagram feed, created using Feeds for Instagram

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

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

En esta guía, vamos a utilizar la versión gratuita de Smash Balloon, ya que tiene todo lo necesario para añadir un feed de Instagram a tu sitio web WordPress. Sin embargo, también hay una versión profesional que le permite mostrar feeds hashtag, añadir imágenes Instagram shoppable, y mucho más.

Antes de empezar, tendrás que 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 empresa, ya que esto permite a Smash Balloon mostrar tu biografía y cabecera de Instagram automáticamente.

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

Cuando estés listo, instala y activa 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

Tras activar el plugin, lo primero que tienes que hacer es conectar tu cuenta de Instagram a WordPress. Solo tienes que ir a Instagram Feed ” Ajustes y, a continuación, hacer clic en “Añadir nuevo”.

How to create a new Instagram feed in WordPress

Con Smash Balloon pro, puedes crear feeds a partir de entradas etiquetadas y hashtags, o incluso crear un muro social con contenido de muchos sitios web de medios sociales diferentes.

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

How to add an Instagram timeline to your WordPress account

Ahora, sólo tienes que elegir la cuenta que utilizarás en tu feed de fotos de Instagram personalizado.

Para empezar, haga clic en el botón “Añadir fuente”.

Adding an Instagram account as a Smash Balloon source

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

Si marcas la casilla siguiente a “Personal”, Smash Balloon no incluirá el avatar de Instagram y la biografía en tu cabecera por defecto. Sin embargo, siempre puedes añadir el avatar de Instagram y la biografía más tarde en los ajustes del plugin.

Adding a personal or business Instagram account to WordPress

Después de elegir “Personal” o “Empresas”, sigue adelante y haz clic en “Acceder / acceso con Facebook”.

Ahora puedes seleccionar la cuenta de Instagram que quieres que aparezca en tu sitio web de WordPress y hacer clic en “Siguiente”.

Choose an Instagram account to use with Smash Balloon

Después, marca la casilla siguiente a la página de Facebook enlazada a tu cuenta de Instagram.

Cuando lo hayas hecho, haz clic en el botón “Siguiente”.

How to add a Facebook page to your WordPress website

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, sólo tienes que hacer clic en cualquiera de los interruptores para cambiarlo de “Sí” a “No”. Ten en cuenta que esto puede afectar a las fotos y vídeos que puedes mostrar en tu blog o sitio web de WordPress.

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

Cuando estés satisfecho con los ajustes, haz clic en “Listo”.

How to change the Instagram permissions with Smash Balloon

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

Sólo tiene que marcar / comprobar la casilla situada junto a esa cuenta y, a continuación, hacer clic en “Añadir”.

Choosing an Instagram account to add to your WordPress website

Smash Balloon te llevará de vuelta a la pantalla de “Todos los feeds” de Instagram.

Para añadir un feed de medios sociales a WordPress, sólo tienes que marcar / comprobar la casilla situada junto a la cuenta de Instagram que desees utilizar. A continuación, haz clic en “Siguiente”.

How to create an Instagram feed using Smash Balloon

El plugin creará un feed de fotos de Instagram que podrás añadir a cualquier página, entrada o zona preparada para widgets. Por ejemplo, puedes mostrar fotos de Instagram en una barra lateral de WordPress.

Sin embargo, antes de incrustar el feed de Instagram, puede personalizar su aspecto y añadir la información que falte.

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 la parte izquierda están todos los ajustes que puedes utilizar para personalizar el feed de fotos.

The Smash Balloon instagram editor

La mayoría de estos ajustes se explican por sí mismos, pero cubriremos rápidamente algunas áreas clave.

Para empezar, puedes cambiar la disposición de las fotos de Instagram y añadir relleno seleccionando “Disposición del feed” en el menú de la izquierda.

A medida que realice cambios, la vista previa se actualizará automáticamente para que pueda probar diferentes ajustes y ver cuál es el que mejor queda.

Changing the layout of an Instagram feed in WordPress

Por defecto, Smash Balloon muestra el mismo número de fotos independientemente de si el usuario se encuentra en un ordenador de sobremesa o en un dispositivo móvil.

Puedes obtener una vista previa de cómo se verá el feed de Instagram en ordenadores de sobremesa, tabletas y teléfonos inteligentes utilizando la fila de botones de la esquina superior derecha.

Previewing how the Instagram feed layout looks on smartphone and mobile

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

Para ello, sólo tienes que introducir un número diferente en el campo ‘Móvil’ que aparece bajo ‘Número de entradas’.

Showing a different number of posts on desktop and mobile

Al crear diferentes disposiciones para teléfonos inteligentes, tabletas y ordenadores de sobremesa, puede asegurarse de que el feed tenga un aspecto estupendo, independientemente del dispositivo que utilice el visitante.

Por defecto, el feed del plugin muestra menos columnas en smartphones y tabletas que en ordenadores de sobremesa. Esto ayuda a que tus fotos y vídeos se vean cómodamente en pantallas más pequeñas.

Para cambiar estos ajustes por defecto, sólo tiene que introducir nuevos números en los ajustes de “Columnas”.

Showing a different number of Instagram columns on desktop, smartphone, and tablet

Después de hacer los cambios, enlaza con “Personalizar”.

Esto le llevará de vuelta al editor principal de Smash Balloon, listo para explorar la siguiente pantalla de ajustes, que es ‘Esquema de color’.

Smash Balloon's color scheme settings

Por defecto, Smash Balloon utiliza un esquema de color heredado de su tema de WordPress, pero también tiene temas ‘Claro’ y ‘Oscuro’ que puede querer utilizar en su lugar.

Incluso puede crear su propia combinación de colores seleccionando “Personalizar” y utilizando los ajustes para cambiar el color de los enlaces, el color de fondo, el color del texto en WordPress, etc.

Changing the Instagram column scheme using Smash Balloon

Por defecto, Smash Balloon añade una cabecera al feed 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 mucho más.

Customize the Instagram header on your WordPress website

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

Para cambiar la foto de perfil, haz clic en “Añadir imagen” en “Mostrar avatar personalizado”. A continuación, puede elegir una imagen de la biblioteca de medios de WordPress o subir una foto nueva.

Adding a custom avatar to an Instagram embed in WordPress

También puedes añadir una biografía diferente. Por ejemplo, puedes animar a la gente a visitarte en Instagram o a empezar a seguir tu cuenta.

Para crear una biografía de Instagram única, sólo tienes que escribir en la casilla “Añadir biografía personalizada”.

Adding a custom Instagram bio to your WordPress website

Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra con la mejor resolución. Recomendamos usar estos ajustes por defecto, pero puedes hacer las imágenes de Instagram más grandes o más pequeñas si lo necesitas.

Para cambiar el tamaño de la imagen, haz clic en “Entradas” en el menú de la izquierda. A continuación, selecciona la opción “Imágenes y vídeos”.

Changing the resolution of embedded Instagram photos and videos

Ahora puede elegir entre imágenes en miniatura, de tamaño medio o completo utilizando el menú desplegable que aparece.

Para más información sobre este debate, consulte nuestra guía para principiantes sobre el tamaño de las imágenes en WordPress.

Si no está satisfecho con el aspecto del feed, puede volver a esta pantalla en cualquier momento y seleccionar “Detección automática (recomendada)” en el menú desplegable.

How to auto-detect the resolution of your Instagram feed

Por defecto, Smash Balloon añade un botón “Cargar más” en la parte inferior de tu feed de Instagram para que los visitantes puedan desplazarse por tus fotos y vídeos.

Puedes cambiar el aspecto de este botón seleccionando ‘Cargar más botón’.

Customize the Instagram Load More button in WordPress

Aquí puede hacer que el botón “Cargar más” destaque cambiando su color de fondo, el color del texto y el estado al pasar el cursor.

También puedes añadir tu propio mensaje al botón, escribiendo en el campo “Texto”.

Adding custom messaging to the Load More button

Aunque recomendamos dejar este botón activado / activo, puede quitarlo. Por ejemplo, puedes animar a la gente a visitar tu Instagram limitando el número de fotos que pueden ver en tu sitio.

Para eliminar el botón, basta con activar el carrusel / control deslizante en gris.

How to easily embed Instagram in WordPress

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

Dado que se trata de un botón tan importante, es posible que desee añadirle un estilo personalizado para que destaque. Para ello, selecciona “Botón de seguimiento” en el menú de la izquierda.

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

Customizing the social media Follow button

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

Puede sustituirla por su propia llamada a la acción escribiendo en el campo “Texto”.

Customizing the Follow Us On Instagram button

Cuando estés satisfecho con el aspecto del feed de Instagram, no olvides hacer clic en “Guardar” para guardar los cambios.

Ya puedes añadir el feed de Instagram a tu sitio web WordPress.

Cómo incrustar feed de Instagram en WordPress

Puedes añadir el feed de Instagram a tu sitio web mediante un bloque, widget o shortcode.

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

Para obtener este código, ve a Instagram Feed “Todos los feeds y, a continuación, copia el texto que aparece en “Shortcode”.

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

Getting the code for a custom Instagram feed

Si quieres incrustar el feed de Instagram en una página o entrada, te recomendamos que utilices el bloque Feed de Instagram.

Nota: Si utiliza un tema activado / activo para bloques, puede seguir las instrucciones que se indican a continuación para añadir el bloque en cualquier parte de su sitio utilizando el editor de sitio completo.

Solo tienes que abrir la página o entrada en la que quieras incrustar tu feed de fotos y vídeos de Instagram. A continuación, haz clic en el icono “+” para añadir un nuevo bloque y empieza a escribir “Instagram Feed”.

Cuando aparezca el bloque adecuado, haz clic para añadirlo a la página o entrada.

The Feeds for Instagram block

El bloque mostrará uno de tus feeds de Smash Balloon por defecto. Si quieres mostrar un feed de Instagram diferente, busca “Ajustes de shortcode” en el menú de la derecha.

Sólo tienes que añadir elcódigo deInstagramfeed=1y hacer clic en el botón “Aplicar cambios”.

Adding the Instagram shortcode to a page or post

El bloque mostrará ahora las fotos y vídeos de tu cuenta de Instagram. Solo tienes que publicar o actualizar la página para que el feed aparezca en directo en tu sitio web.

También puedes añadir el feed de Instagram a cualquier zona preparada para widgets. Por ejemplo, puedes añadirlo al pie de página de tu sitio web en WordPress o a la sección de la barra lateral. De este modo, los visitantes podrán ver el feed en todas las páginas de tu sitio web.

Simplemente vaya a Apariencia ” Widgets en el escritorio de WordPress y luego haga clic en el botón azul ‘+’.

Adding an Instagram feed to a WordPress widget

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

WordPress tiene un bloque “Instagram Feed” integrado, así que asegúrate de elegir el que muestra el logotipo oficial de Instagram.

How to add an Instagram Feed to a widget-ready area

Después, sólo tienes que arrastrar el widget a la zona donde quieras mostrar el feed de Instagram.

El widget mostrará automáticamente uno de los feeds que hayas creado con Smash Balloon. Si quieres mostrar un feed de Instagram diferente, escribe el shortcode del feed en el cuadro “Ajustes de shortcode”.

A continuación, haga clic en “Aplicar cambios”.

Adding an Instagram feed to a widget-ready area

Ahora puede activar el widget haciendo clic en el botón “Actualizar”. Para obtener más información, consulte nuestra guía práctica sobre cómo añadir y utilizar widgets en WordPress.

Otra opción es incrustar el feed de Instagram en cualquier página, entrada o zona preparada para widgets mediante un shortcode.

Simplemente ve a Instagram Feed “Todos los feeds y copia el código en la columna ‘Shortcode’. Ahora puedes añadir este código a cualquier bloque Shortcode.

Si necesita ayuda para colocar el shortcode, consulte nuestra guía sobre cómo añadir un shortcode.

Por último, si tienes un tema activado / activo por bloques, puedes utilizar el editor de sitio completo para añadir el bloque de feed de Instagram en cualquier parte de tu sitio.

En el escritorio de WordPress, simplemente vaya a Apariencia ” Editor.

Opening the full-site editor (FSE)

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

Si quieres añadir el feed de Instagram a una zona diferente, haz clic en “Plantilla” o en “Partes de plantilla”.

Choosing a template or template part in the full-site editor (FSE)

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

Simplemente haga clic en la plantilla donde desea mostrar el feed de Instagram.

Choosing a WordPress template in the full-site editor

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

Para editar esta plantilla, sigue adelante y haz clic en el pequeño icono del lápiz.

Adding an Instagram feed to WordPress using the full-site editor (FSE)

Después de elegir una plantilla, sólo tienes que pasar el cursor sobre la zona en la que quieres añadir el feed de fotos de Instagram.

A continuación, haz clic en el botón azul “+”.

How to add an Instagram block using the full-site editor and a block-enabled theme

Después, empieza a escribir ‘Instagram Feed’.

Cuando aparezca el bloque adecuado, haz clic para añadirlo a la plantilla.

Adding a social media feed using the WordPress full-site editor (FSE)

Como siempre, Smash Balloon mostrará un feed por defecto si no añades un shortcode específico. Puede cambiar este feed añadiendo un shortcode siguiendo el mismo proceso descrito anteriormente.

FAQ Acerca de Incrustar Instagram en WordPress

Smash Balloon hace que sea fácil de mostrar fotos y videos de Instagram en su sitio web. Dicho esto, aquí están algunas de las preguntas más frecuentes acerca de la adición de un feed de Instagram en WordPress.

¿Cómo crear una cuenta de empresa en Instagram?

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

Sin embargo, Smash Balloon no puede obtener automáticamente el avatar de Instagram y la biografía de una cuenta personal de Instagram. Con esto en mente, es posible que desee comprobar si tiene una cuenta personal o de negocios, y luego cambiar a una cuenta de negocios por lo Smash Balloon puede obtener su avatar y biografía de forma automática.

Para comprobarlo, sólo tienes que visitar tu cuenta de Instagram y hacer clic en el icono de tres rayas del menú lateral.

How to check whether you have a personal or business Instagram account

A continuación, selecciona “Ajustes”.

Si no tiene una cuenta profesional, en esta pantalla aparecerá “Cambiar a cuenta profesional” en el menú de la izquierda.

How to switch to a personal Instagram account

Si actualmente tiene una cuenta personal y desea cambiar a una cuenta de empresa, basta con que haga clic en este enlace.

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

Antes de añadir un feed de Instagram a WordPress, tendrás que conectar tu cuenta de Instagram a una página de Facebook.

Para ello, dirígete a la página de Facebook que quieras utilizar y, a continuación, haz clic en “Ajustes” en el menú de la izquierda.

A continuación, haz clic en “Cuenta enlazada”. Ahora puedes seleccionar “Instagram” y hacer clic en el botón “Conectar”.

How to connect Facebook and Instagram

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

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

Giving Smash Balloon access to your Instagram account

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

Cuando estés satisfecho y listo para continuar, haz clic en “Confirmar”.

How to configure your Instagram permissions using Smash Balloon

Se abrirá una ventana emergente en la que podrás introducir tu nombre de usuario y contraseña de Instagram.

Después, sigue adelante y haz clic en “Acceder”.

Logging into your Instagram account

Al cabo de unos instantes, verás un mensaje en el que se indica que tus cuentas de Instagram y Facebook ya 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 de Facebook personalizado en WordPress o nuestra selección de los mejores plugins de medios sociales para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

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

Reader Interactions

18 comentariosDeja una respuesta

  1. Ayanda Temitayo

    This is the first time I am embedding instagram on my wordpress website and it seems somehow easy with this guide. I love the way you use illustrations and images for explanations. It’s a very long blog post but it was worth it.

    Thanks for this guide. Do you have any useful link to embed Twitter feed too?

  2. Ekene

    How do I embed YouTube video plugin to my blog

  3. Todd

    I have added an Instagram video on wordpress with the oAuth but am experiencing a problem. I have the page broken into 2 columns with videos going down the page and the Instagram videos have a large white space under them. Do you know a way to fix that? Here is my site http://www.BeardGrowl.com

    Thanks for any help you might be able to offer.

  4. Stephen Clark

    I implemented this neat snippet as you instructed however when it rendered on my WP blog/site, it was a thumbnail sized photo. Is that the intended behavior? Or is it supposed to render the image at full size, meaning there is something in my code I need to dig into?

    • Editorial Staff

      Is the image being resized? If so look in your Settings > Media to see the maximum embed width.

      Administrador

  5. greg

    It’s best practise to omit the last ?> from an all php file. :D
    Cool article!

  6. Mia

    Thank you WPB..your articles have been so helpful!

  7. Richard Wells

    Don’t want to be picky, but the closing ?> tag is missing from the code snippet.

      • Richard Wells

        Yes, it dawned on me after I posted the comment, I am feeling foolish…

        • Javier Villanueva

          WP doesn’t add a closing ?> tag, it’s just not needed in php files and overall a best practice to just omit it to prevent sending extra whitespace by accident

  8. Konstantin Kovshenin

    Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare :)

    • Editorial Staff

      Didn’t even see that in the features for 3.5. Well for the next month or so, people can still use this.

      Administrador

Deja tu comentario

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