¿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.

¿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.

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.’

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.’

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’.

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.

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'.

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'.

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'.

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'.

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'.

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.

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.

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.

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’.

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).

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’.

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.

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.

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.

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’.

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’.

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.

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’.

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’.

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.

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.

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'.

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.

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 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'.

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 '+'.

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.

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’.

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.

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'.

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.

WordPress ahora mostrará una vista previa del diseño.
Para editar esta plantilla, haz clic en el pequeño ícono de lápiz.

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 ‘+’.

Después de eso, comienza a escribir ‘Instagram Feed’.
Cuando aparezca el bloque correcto, haz clic para agregarlo a la plantilla.

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.

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.

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’.

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’.

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’.

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’.

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.


Ayanda Temitayo
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?
Soporte de WPBeginner
¡Sí tenemos una guía para incrustar tweets en nuestra página a continuación!
https://www.wpbeginner.com/plugins/how-to-embed-actual-tweets-in-wordpress-blog-posts/
Administrador
Ekene
¿Cómo incrusto un plugin de video de YouTube en mi blog?
Soporte de WPBeginner
Hay múltiples opciones para agregar un video de YouTube a tu sitio, te recomendamos que le eches un vistazo a nuestra guía a continuación:
https://www.wpbeginner.com/beginners-guide/how-to-easily-embed-videos-in-wordpress-blog-posts/
Administrador
Todd
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.
Stephen Clark
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?
Personal editorial
¿Se está redimensionando la imagen? Si es así, mira en tu Configuración > Medios para ver el ancho máximo de incrustación.
Administrador
Julien Maury
Me temo que este código será inútil con WordPress 3.5 :
https://twitter.com/jmlapam/status/264101995357540354
Julien Maury
Lo siento: el enlace está aquí: http://core.trac.wordpress.org/changeset/22351
greg
It’s best practise to omit the last ?> from an all php file.
Cool article!
Mia
¡Gracias WPB... tus artículos han sido de gran ayuda!
Personal editorial
Thanks for the kind words Mia
Administrador
Richard Wells
No quiero ser quisquilloso, pero falta la etiqueta de cierre ?> en el fragmento de código.
Personal editorial
WordPress se encarga de eso por defecto. No debería darte ningún error.
Administrador
Richard Wells
Sí, se me ocurrió después de publicar el comentario, me siento tonto...
Javier Villanueva
WP no agrega una etiqueta de cierre ?>, simplemente no es necesaria en los archivos php y, en general, es una buena práctica omitirla para evitar enviar espacios en blanco adicionales por accidente.
Konstantin Kovshenin
Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare
Personal editorial
Ni siquiera vi eso en las características para 3.5. Bueno, durante el próximo mes más o menos, la gente todavía puede usar esto.
Administrador