Cómo mostrar fotos de Instagram en el widget de la barra lateral de WordPress

¿Quieres mostrar tus fotos de Instagram en la barra lateral de WordPress?

Las publicaciones de Instagram pueden ser un gran contenido para tu sitio web. Al crear un feed de Instagram, puedes mantener tu sitio fresco e interesante y, al mismo tiempo, promocionar tu cuenta de Instagram.

En este artículo, te mostraremos cómo mostrar tus fotos y videos de Instagram en el widget de la barra lateral de WordPress.

¿Por qué añadir un feed de Instagram a 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 gran lugar para promocionar tus productos, servicios y publicaciones de blog.

Dependiendo de tu industria, Instagram puede ser incluso el mejor lugar para promocionar tu sitio web. Por ejemplo, Instagram es particularmente popular entre los principales blogs de moda, cocina, estilo de vida y sitios web de fotografía.

Sin embargo, la gente no verá tus publicaciones de Instagram si solo visitan tu sitio web de WordPress. Esto puede dificultar el crecimiento de tus seguidores en Instagram y la obtención de interacciones en tus fotos y videos.

Dicho esto, es una buena idea agregar un feed de Instagram a tu sitio web de WordPress. Esto generará más tráfico a tu página de Instagram y animará a los visitantes a interactuar con tus publicaciones dejando comentarios, haciendo clic en el botón 'Compartir' y más.

Dicho esto, veamos cómo mostrar fácilmente fotos de Instagram en el widget de la barra lateral de WordPress.

Cómo instalar un plugin de fotos de Instagram

La mejor manera de mostrar fotos de Instagram en una barra lateral de WordPress o un widget similar es usando Smash Balloon Social Photo Feed. Este plugin gratuito te permite mostrar fotos de una o más cuentas de Instagram en un feed totalmente personalizable.

Después de crear un feed, puedes agregarlo a la barra lateral usando un shortcode o un bloque.

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 incrustar un feed de Instagram. Sin embargo, también existe una versión Pro que te permite mostrar feeds de hashtags, agregar imágenes comprables de Instagram en WordPress y más.

Antes de comenzar, necesitará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 nuestra sección de Preguntas Frecuentes al final de la publicación.

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, es hora de conectar tu cuenta de Instagram a WordPress. Simplemente ve a Instagram Feed » Configuración y luego haz clic en 'Agregar nuevo'.

Con Smash Balloon Pro, puedes crear feeds de publicaciones etiquetadas y hashtags, o incluso crear un muro social combinando contenido de muchos sitios web diferentes.

Por ejemplo, podrías mostrar los últimos videos de tu canal de YouTube, tus Tweets recientes, un feed de grupo de Facebook, y más.

Como estamos usando el plugin gratuito Smash Balloon, simplemente selecciona 'User Timeline' y luego haz clic en 'Next'.

Después de eso, necesitarás elegir la cuenta de Instagram que usarás para crear un feed de fotos personalizado de Instagram en WordPress.

Para empezar, haz clic en '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 manualmente en la configuración del plugin.

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

Ahora puedes verificar la cuenta de Instagram que deseas usar y hacer clic en 'Next'.

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

Hecho esto, haz clic en 'Next'.

Smash Balloon ahora mostrará una ventana emergente que enumera toda la información a la que tendrá acceso y las acciones que puede realizar.

Para restringir el acceso de Smash Balloon a tu cuenta de Instagram, 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 incrustar en tu blog de WordPress o sitio web.

Dicho esto, recomendamos dejar todos los interruptores activados.

Cuando estés listo, haz clic en ‘Listo’.

Ahora verás una ventana emergente con la cuenta de Instagram que acabas de vincular a WordPress.

Simplemente marca la casilla junto a la cuenta y luego haz clic en ‘Agregar’.

Smash Balloon te llevará de regreso a Feeds de Instagram » Todos los feeds automáticamente.

Para crear un feed de redes sociales, simplemente marca la casilla junto a tu cuenta de Instagram. Luego, haz clic en ‘Siguiente’.

El plugin ahora creará un feed de fotos de Instagram para tu sitio web y lo abrirá en el editor de Smash Balloon.

Cómo personalizar tu feed de fotos de Instagram

Puedes usar el editor para ajustar cómo se ven las fotos de Instagram en tu sitio web.

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í mismas, pero cubriremos rápidamente algunas áreas clave.

Para empezar, puedes cambiar el diseño del feed y agregar relleno seleccionando ‘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 qué funciona mejor para tu feed de fotos de Instagram.

Por defecto, Smash Balloon muestra la misma cantidad de publicaciones en computadoras de escritorio y dispositivos móviles.

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. Al probar diferentes diseños, puedes crear un feed de Instagram que se vea genial, sin importar el dispositivo que esté usando el visitante.

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 en dispositivos móviles.

Para hacer esto, simplemente escribe un número diferente en el campo 'Móvil' bajo 'Número de publicaciones'.

Por defecto, el feed de Facebook 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.

Después de probar la versión móvil de tu sitio web de WordPress, es posible que no estés satisfecho con cómo se ven las columnas en teléfonos inteligentes y tabletas. Si este es el caso, entonces puedes mostrar menos columnas cambiando los números en la sección 'Columnas'.

Cuando estés satisfecho con los cambios que has realizado, haz clic en el enlace ‘Personalizar’.

Esto te llevará de regreso al editor principal de Smash Balloon, donde podrás explorar la siguiente pantalla de configuración, que es ‘Esquema de color’.

Por defecto, Smash Balloon utiliza un esquema de color heredado de tu tema de WordPress, pero también tiene temas ‘Claro’ y ‘Oscuro’ que puedes usar.

Otra opción es crear tu propio esquema de color seleccionando ‘Personalizado’ y luego usando los controles para cambiar el color de fondo, el color del botón, cambiar el color del texto y más.

Por defecto, Smash Balloon agrega una cabecera a tu feed, que es la foto de perfil de tu Instagram y el nombre de tu página. Esto puede agregar un contexto adicional, en lugar de simplemente incrustar Instagram en WordPress sin explicación.

Para cambiar el aspecto de esta sección, haz clic en ‘Cabecera’ en el menú de la izquierda.

En esta pantalla, puedes cambiar el tamaño y el color de la cabecera y mostrar u ocultar tu biografía de Instagram.

A veces, es posible que desees mostrar una foto de perfil diferente. Por ejemplo, tu avatar de Instagram puede chocar con tu tema de WordPress.

Para hacer esto, simplemente 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 desde tu computadora.

De manera similar, puedes mostrar una biografía diferente. Por ejemplo, podrías querer presentar tu feed de Instagram o animar a la gente a seguirte para obtener más contenido genial.

Para reemplazar la biografía de Instagram, simplemente escríbela en el cuadro ‘Agregar biografía personalizada’.

Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra a la mejor resolución. Si bien la configuración predeterminada debería ser adecuada para la mayoría de los sitios web, es posible hacer las imágenes más grandes o más pequeñas.

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 miniatura, mediano y tamaño completo usando el menú desplegable. Para más información sobre este tema, consulta nuestra guía para principiantes sobre tamaños de imagen en WordPress.

Si no estás satisfecho con los resultados, puedes regresar 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, lo que permite a los visitantes ver más de tus fotos y videos.

Dado que es un botón tan importante, es posible que desees personalizarlo seleccionando la opción ‘Botón Cargar más’ en el menú de la izquierda.

Aquí, puedes ayudar a que ‘Cargar más’ destaque cambiando el color de fondo, el color del texto y el estado al pasar el cursor.

También puedes cambiar la etiqueta del botón escribiendo en el campo ‘Texto’.

Otra opción es eliminar el botón por completo haciendo clic en el interruptor ‘Habilitar’. De esta manera, puedes animar a la gente a visitar tu Instagram limitando la cantidad de publicaciones que pueden ver en tu sitio web.

Si a los visitantes les gusta lo que ven, pueden decidir seguirte en Instagram usando el botón ‘Seguir en Instagram’ que Smash Balloon agrega automáticamente.

Teniendo esto en cuenta, es posible que desees ayudar a que el botón destaque seleccionando ‘Botón de seguir’ 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 tiene una etiqueta general de ‘Seguir en Instagram’.

Puedes reemplazar esto con tu propio mensaje 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 al widget de la barra lateral de tu WordPress.

Cómo agregar tus fotos de Instagram en el widget de la barra lateral de WordPress

Ahora puedes agregar el feed de Instagram a la barra lateral o una sección similar usando el bloque Feed de Instagram.

Si has creado más de un feed usando Smash Balloon, entonces necesitarás conocer el código del feed.

Simplemente ve a Instagram » Todos los Feeds y luego copia el valor en la columna ‘Shortcode’. En la siguiente imagen, necesitaremos usar instagram-feed feed=1.

Hecho esto, ve a Apariencia » Widgets en el panel de WordPress.

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 widget de Instagram incorporado, así que asegúrate de elegir el que muestra el logo oficial de Instagram.

Después de eso, simplemente arrastra el widget al área donde deseas mostrar el feed de Instagram, como la barra lateral o una sección similar.

El widget mostrará automáticamente uno de los feeds que creaste usando Smash Balloon.

Para mostrar un feed diferente en su lugar, simplemente escribe el shortcode del feed en el cuadro ‘Configuración del Shortcode’ y luego haz clic en ‘Aplicar Cambios’.

Ahora puedes hacer clic en el botón ‘Actualizar’ para que el widget esté en vivo. Para más información, por favor consulta nuestra guía paso a paso sobre cómo agregar y usar widgets en WordPress.

Si estás usando un tema habilitado para bloques, entonces puedes agregar un feed de Instagram a la barra lateral usando el editor de sitio completo. Para empezar, simplemente ve a Apariencia » Editor.

En el editor, simplemente haz clic para seleccionar la sección de la barra lateral y luego haz clic en el botón ‘+’.

Luego puedes empezar a escribir ‘Instagram Feed’ y seleccionar el bloque correcto cuando aparezca.

Por defecto, el editor de sitio completo mostrará uno de los feeds de Instagram que creaste usando Smash Balloon. Para mostrar un feed diferente, simplemente agrega el shortcode siguiendo el mismo proceso descrito anteriormente.

Cuando estés satisfecho con cómo se ve el feed de Instagram, haz clic en ‘Guardar’.

Cómo mostrar una foto específica de Instagram en WordPress

A veces, es posible que desees mostrar una publicación específica de Instagram en tu sitio web. Podría ser tu foto más popular, una publicación perenne o incluso un concurso en redes sociales que estés ejecutando actualmente.

En el pasado, podías incrustar fácilmente una publicación de Instagram en WordPress usando un protocolo conocido como oEmbed. Sin embargo, Facebook cambió la forma en que funciona oEmbed, por lo que ya no puedes incrustar fácilmente fotos de Instagram en WordPress.

La buena noticia es que Smash Balloon puede solucionar el problema de oEmbed de Facebook e Instagram. Esto te permite incrustar fácilmente una publicación específica de Instagram en cualquier página, publicación o área lista para widgets, como la barra lateral. También puedes crear fácilmente un feed personalizado de Facebook en WordPress.

Para habilitar esta función, simplemente ve a Instagram Feed » oEmbeds. Luego, puedes hacer clic en el botón 'Habilitar' junto a 'Instagram'.

Después de eso, ve a Apariencia » Widgets y haz clic en el botón azul '+'.

En la barra de búsqueda, escribe 'Embed' para encontrar el bloque correcto.

Cuando aparezca el bloque 'Embed', arrástralo al área donde deseas mostrar la foto.

En el campo 'Embed', simplemente pega la URL de la publicación de Instagram que deseas mostrar en tu sitio web. Luego, haz clic en 'Embed'.

WordPress ahora mostrará la publicación específica de Instagram.

Si estás satisfecho con cómo se ve, haz clic en 'Actualizar' para publicarlo.

Ahora, si visitas tu sitio web, verás la publicación de Instagram en vivo.

Si estás usando un tema con bloques, entonces necesitarás agregar publicaciones específicas de Instagram usando el editor de sitio completo.

Para hacer esto, simplemente habilita la función oEmbed de Smash Balloon y obtén la URL de la publicación de Instagram siguiendo el mismo proceso descrito anteriormente.

Después de eso, abre el editor de sitio completo yendo a Apariencia » Editor en el panel de WordPress. Una vez que estés dentro del editor de sitio completo, haz clic en el botón ‘+’ en la sección de la barra lateral y luego escribe ‘Incrustar’.

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

Luego puedes agregar la URL de la publicación que deseas incrustar y hacer clic en el botón 'Incrustar'.

El editor de sitio completo ahora mostrará la publicación de Instagram.

Si estás satisfecho con cómo se ve, haz clic en 'Guardar' para publicar esta foto o video en la barra lateral habilitada para bloques.

Preguntas frecuentes sobre cómo mostrar publicaciones de Instagram en WordPress

Smash Balloon facilita la creación de un feed personalizado de Instagram o incluso la visualización de publicaciones específicas de Instagram en tu sitio web de WordPress.

Dicho esto, aquí tienes algunas de las preguntas más frecuentes sobre cómo mostrar publicaciones de Instagram en WordPress.

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

Smash Balloon 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 de Instagram. En su lugar, deberás agregar el avatar y la biografía manualmente en la configuración del plugin.

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 si es necesario.

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

Después de eso, haz clic en 'Configuración'.

Si no tienes una cuenta de negocios, el menú de la izquierda mostrará 'Cambiar a cuenta profesional'.

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 mostrar fotos de Instagram en WordPress, primero 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.

Una vez que hayas hecho eso, haz clic en 'Cuentas vinculadas'.

Ahora puedes seleccionar 'Instagram' y hacer clic en el botón 'Conectar'.

Facebook ahora mostrará todas las acciones que puede realizar y la información a la que puede acceder.

Si estás satisfecho con esto, haz clic en el botón 'Conectar'.

Solo ten en cuenta que las personas que administran tu página de Facebook podrán ver tus mensajes de Instagram y responder a ellos. Si deseas mantener tus mensajes privados, haz clic para desactivar el interruptor.

Cuando estés listo para pasar a la siguiente pantalla, haz clic en 'Confirmar'.

Esto abre una ventana emergente donde puedes escribir tu nombre de usuario o dirección de correo electrónico y contraseña.

Después de eso, haz clic en el botón '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.

¿Cómo muestro imágenes de Instagram en WordPress?

En el pasado, podías incrustar fácilmente imágenes de Instagram en WordPress usando un protocolo conocido como oEmbed.

Sin embargo, Facebook cambió la forma en que funciona oEmbed, por lo que ya no puedes incrustar fácilmente imágenes de Instagram en WordPress.

En su lugar, ahora necesitas registrar una aplicación y usar un token de cliente para obtener datos de la API Graph de Facebook antes de poder incrustar contenido de Instagram en WordPress.

Afortunadamente, es fácil solucionar el problema de oEmbed de Instagram en WordPress usando el plugin Smash Balloon Social Photo Feed. Luego puedes incrustar fotos específicas de Instagram en tu sitio web.

Incluso puedes agregar fotos de Instagram a áreas listas para widgets, como el pie de página de tu sitio de WordPress, la cabecera, la barra lateral y más. Esto te permite mostrar fácilmente la misma imagen en todo tu sitio web.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar fotos de Instagram en un widget de barra lateral de WordPress. También te puede interesar nuestra guía sobre cómo incrustar un video de Facebook en WordPress o nuestras selecciones expertas de los mejores plugins de prueba social para WordPress y WooCommerce.

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.