¿Quieres mostrar tus fotos de Instagram en tu barra lateral de WordPress?
Las publicaciones de Instagram pueden crear contenido excelente para su sitio web. Al crear un feed de Instagram, puede mantener su sitio actualizado e interesante mientras promociona su cuenta de Instagram.
En este artículo, le mostraremos cómo mostrar fotos y vídeos de Instagram en el widget de la barra lateral de WordPress.
¿Por qué agregar un feed de Instagram a su 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. Esto significa que es un gran lugar para promocionar sus productos, servicios y publicaciones de blog.
Dependiendo de su industria, Instagram también puede ser el mejor lugar para promocionar su sitio web. Por ejemplo, Instagram es especialmente popular entre los principales blogs de moda, sitios web de cocina, estilo de vida y fotografía.
Sin embargo, las personas no verán tus publicaciones en Instagram si solo visitan tu sitio web de WordPress. Esto puede dificultar el aumento de seguidores en Instagram y la participación en fotos y videos.
Dicho esto, es una buena idea agregar un feed de Instagram a su sitio web de WordPress. Esto atraerá más tráfico a su página de Instagram y alentará a los visitantes a interactuar con sus publicaciones dejando comentarios, haciendo clic en el botón Compartir y más.
Dicho esto, echemos un vistazo a cómo mostrar fácilmente fotos de Instagram en su widget de barra lateral de WordPress.
Cómo instalar un complemento de fotos de Instagram
La mejor manera de mostrar fotos de Instagram en una barra lateral de WordPress o un widget similar es usar Feed de fotos sociales de Smash Balloon. Este complemento gratuito te permite mostrar fotos de una o más cuentas de Instagram en un feed totalmente personalizable.
Una vez que haya creado un feed, puede agregarlo a su barra lateral usando un código corto o un bloque.
Una vez que coloque el feed en su sitio web, se actualizará automáticamente cada vez que cree una nueva publicación en Instagram. De esta manera, puede mantener su sitio actualizado e interesante sin tener que actualizarlo manualmente.
En esta guía usaremos la versión gratuita de Smash Balloon, ya que tiene todo lo que necesitas para insertar un feed de Instagram. Sin embargo, también hay una Versión Pro que le permite ver feeds de hashtags, agregar imágenes que se pueden comprar en Instagram en WordPress y más.
Antes de comenzar, deberá conectar su cuenta de Instagram a una página de Facebook. Si tiene una cuenta personal de Instagram, es posible que también desee convertirla en una cuenta comercial, ya que esto permite que Smash Balloon muestre automáticamente su biografía y encabezado de Instagram.
Para obtener instrucciones detalladas sobre cómo hacer ambas cosas, consulte nuestro Sección de preguntas frecuentes al final del post.
Cuando esté listo, continúe, instale y active el complemento Smash Balloon Social Photo Feed. Para obtener más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Cómo conectar una cuenta de Instagram a WordPress
Después de activar el complemento, es hora de conectar su cuenta de Instagram a WordPress. solo ve a Feed de Instagram »Configuración y luego haga clic en Agregar nuevo.
Con Smash Balloon Pro puedes crear feeds a partir 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 vídeos de tu canal de YouTube, tus Tweets recientes, un feed de grupo de Facebook y más.
Dado que estamos utilizando el complemento gratuito Smash Balloon, simplemente seleccione Historial de usuario y luego haga clic en Siguiente.
A continuación, deberá elegir la cuenta de Instagram que utilizará para crear un feed de fotos de Instagram personalizado en WordPress.
Para comenzar, haga clic en Agregar fuente.
En la siguiente pantalla, elija si desea ver fotos de una cuenta de Instagram personal o comercial.
Si marca la casilla junto a Personal, Smash Balloon no incluirá su avatar y biografía de Instagram en el encabezado de forma predeterminada. Sin embargo, siempre puedes agregar tu avatar y biografía manualmente en la configuración del complemento.
Después de elegir Personal o Empresa, continúe y haga clic en Iniciar sesión con Facebook.
Ahora puedes verificar la cuenta de Instagram que deseas usar y hacer clic en Siguiente.
A continuación, marque la casilla junto a la página de Facebook vinculada a su cuenta de Instagram.
Una vez hecho esto, continúa y haz clic en Siguiente.
Smash Balloon ahora mostrará una ventana emergente con una lista de toda la información a la que tendrá acceso y las acciones que puede realizar.
Para limitar el acceso de Smash Balloon a su cuenta de Instagram, haga clic en cualquiera de los botones para cambiarlo de Sí a No. Tenga en cuenta que esto puede afectar las fotos y videos que puede insertar en su blog o sitio web de WordPress.
Dicho esto, recomendamos dejar todos los interruptores habilitados.
Cuando esté listo, haga clic en Finalizar.
Ahora verá una ventana emergente con la cuenta de Instagram que acaba de conectar a WordPress.
Simplemente marque la casilla junto a la cuenta y haga clic en Agregar.
Smash Balloon ahora te llevará de regreso a Feeds de Instagram » Todos los feeds automáticamente.
Para crear un feed de redes sociales, simplemente marque la casilla junto a su cuenta de Instagram. Luego haga clic en Siguiente.
El complemento ahora creará una fuente de fotos de Instagram para su sitio web y la abrirá en el editor Smash Balloon.
Cómo personalizar tu feed de fotos de Instagram
Puede utilizar el editor para optimizar el aspecto de las fotos de Instagram en su 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 tu feed de fotos.
La mayoría de estas configuraciones se explican por sí solas, pero cubriremos rápidamente algunas áreas clave.
Para comenzar, puede cambiar el diseño de su feed y agregar espacio seleccionando Diseño de feed en el menú de la izquierda. A medida que realices cambios, la vista previa se actualizará automáticamente, por lo que puedes probar diferentes configuraciones para ver cuál funciona mejor para tu feed de fotos de Instagram.
De forma predeterminada, Smash Balloon muestra la misma cantidad de publicaciones en computadoras de escritorio y dispositivos móviles.
Puede obtener una vista previa de cómo se verá su feed de Instagram en su computadora de escritorio, tableta y teléfono inteligente usando la fila de botones en la esquina superior derecha. Al probar diferentes diseños, puedes crear un feed de Instagram atractivo, sin importar qué dispositivo 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 vídeos en dispositivos móviles.
Para hacer esto, simplemente escriba un número diferente en el campo Móvil debajo de Número de publicaciones.
De forma predeterminada, el feed de Facebook muestra menos columnas en teléfonos inteligentes y tabletas que en computadoras de escritorio. Esto ayuda a que tus fotos y vídeos quepan cómodamente en pantallas más pequeñas.
Después de probar la versión móvil de su sitio web de WordPress, es posible que no esté satisfecho con el aspecto de sus columnas en teléfonos inteligentes y tabletas. Si este es el caso, puedes mostrar menos columnas cambiando los números en la sección Columnas.
Cuando esté satisfecho con los cambios que ha realizado, haga clic en el enlace Personalizar.
Esto lo llevará de regreso al editor principal de Smash Balloon, donde podrá explorar la siguiente pantalla de configuración, que es Esquema de colores.
De forma predeterminada, Smash Balloon usa una combinación de colores heredada de su tema de WordPress, pero también tiene temas Claro y Oscuro que puede usar.
Otra opción es crear su propia combinación de colores seleccionando Personalizado y luego usando los controles para cambiar el color de fondo, el color de los botones, cambiar el color del texto y más.
De forma predeterminada, Smash Balloon agrega un encabezado a tu feed, que es tu foto de perfil de Instagram y el nombre de tu página. Esto puede agregar contexto adicional, en lugar de simplemente insertar Instagram en WordPress sin ninguna explicación.
Para cambiar la apariencia de esta sección, haga clic en Encabezado en el menú de la izquierda.
En esta pantalla podrás cambiar el tamaño y color del encabezado y mostrar u ocultar tu biografía de Instagram.
A veces, es posible que desees mostrar una imagen de perfil diferente. Por ejemplo, tu avatar de Instagram puede chocar con tu tema de WordPress.
Para hacer esto, simplemente haga clic en Agregar imagen en Mostrar avatar personalizado.
Luego puede elegir una imagen de su biblioteca multimedia de WordPress o cargar una nueva foto desde su computadora.
Asimismo, puedes mostrar una biografía diferente. Por ejemplo, es posible que desees destacar tu feed de Instagram o animar a las personas a que te sigan para obtener contenido más interesante.
Para reemplazar su biografía de Instagram, simplemente escríbala en el cuadro Agregar biografía personalizada.
Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra con la mejor resolución. Si bien la configuración predeterminada debería ser adecuada para la mayoría de los sitios web, puede acercar o alejar las imágenes.
Para cambiar el tamaño de la imagen, haga clic en Publicaciones en el menú de la izquierda. Luego, seleccione la opción “Imágenes y videos”.
Ahora puedes elegir entre tamaño miniatura, mediano y completo usando el menú desplegable. Para obtener más información sobre este tema, consulte nuestra guía para principiantes sobre tamaños de imágenes de WordPress.
Si no está satisfecho con los resultados, puede regresar a esta pantalla en cualquier momento y seleccionar Detección automática (recomendado) en el menú desplegable.
De forma predeterminada, Smash Balloon agrega un botón Cargar más en la parte inferior de su feed de Instagram, que permite a los visitantes desplazarse por más fotos y videos.
Dado que es un botón tan importante, es posible que desees personalizarlo seleccionando la opción Cargar otro botón en el menú de la izquierda.
Aquí puede ayudar a que Cargar más se destaque cambiando el color de fondo, el color del texto y el estado de desplazamiento.
También puedes cambiar la etiqueta del botón escribiéndola en el campo Texto.
Otra opción es eliminar el botón por completo haciendo clic en el botón Activar. De esta manera, puede alentar a las personas a visitar su Instagram limitando la cantidad de publicaciones que pueden ver en su 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 resaltar el botón seleccionando Botón Seguir en el menú de la izquierda.
Aquí puede cambiar el color de fondo del botón, el estado de desplazamiento y el color del texto.
Por defecto, el botón tiene una etiqueta general Seguir en Instagram.
Puedes reemplazarlo con tu propio mensaje escribiéndolo en el campo Texto.
Cuando esté satisfecho con el aspecto de su feed de Instagram, no olvide hacer clic en Guardar para almacenar los cambios. Ahora está listo para agregar su feed de Instagram a su widget de barra lateral de WordPress.
Cómo agregar tus fotos de Instagram a tu widget de barra lateral de WordPress
Ahora puedes agregar tu feed de Instagram a tu barra lateral o sección similar usando el bloque Feed de Instagram.
Si ha creado más de un feed con Smash Balloon, necesitará conocer el código del feed.
solo ve a Instagram » Todos los feeds y luego copie el valor en la columna Código corto. En la siguiente imagen, necesitaremos usar instagram-feed feed=1.
Una vez hecho esto, vaya a Apariencia » Widgets en su panel de WordPress.
Luego haga clic en el botón azul +.
En la barra de búsqueda, escribe Feed de Instagram y selecciona el widget correcto cuando aparezca.
WordPress tiene un widget de Instagram incorporado, así que asegúrese de elegir el que muestra el logotipo oficial de Instagram.
A continuación, simplemente arrastre el widget al área donde desea mostrar su feed de Instagram, como la barra lateral o una sección similar.
El widget mostrará automáticamente uno de los feeds que creó con Smash Balloon.
Para mostrar un feed diferente, simplemente escriba el código abreviado del feed en el cuadro Configuración del código abreviado y luego haga clic en Aplicar cambios.
Ahora puede hacer clic en el botón Actualizar para activar el widget. Para obtener más información, consulte nuestra guía paso a paso sobre cómo agregar y usar widgets en WordPress.
Si está utilizando un tema habilitado para bloques, puede agregar un feed de Instagram a su barra lateral usando el editor completo del sitio. Para comenzar, simplemente vaya a yo espero » editor.
En el editor, simplemente haga clic para seleccionar la sección de la barra lateral y luego haga clic en el botón +.
Luego puedes comenzar a escribir Feed de Instagram y seleccionar el bloque correcto cuando aparezca.
De forma predeterminada, el editor completo del sitio mostrará uno de los feeds de Instagram que creó con Smash Balloon. Para mostrar un feed diferente, simplemente agregue el código corto siguiendo el mismo proceso anterior.
Cuando esté satisfecho con el aspecto de su feed de Instagram, haga 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. Esta podría ser tu foto más popular, una publicación eterna o incluso un concurso en las redes sociales que estés realizando actualmente.
En el pasado, podías insertar fácilmente una publicación de Instagram en WordPress usando un protocolo conocido como oEmbed. Sin embargo, Facebook ha cambiado 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 le 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 de Facebook personalizado en WordPress.
Para habilitar esta función, simplemente vaya a Feed de Instagram » o Insertar. Luego puede hacer clic en el botón Habilitar junto a Instagram.
Después de eso, ve a Apariencia » Widgets y haga clic en el botón azul +.
En la barra de búsqueda, escribe Incrustar para encontrar el bloque correcto.
Cuando aparezca el bloque Incrustar, arrástrelo al área donde desea que aparezca la foto.
En el campo Insertar, simplemente pega la URL de la publicación de Instagram que deseas mostrar en tu sitio web. Luego, haga clic en Incrustar.
WordPress ahora mostrará la publicación específica de Instagram.
Si está satisfecho con su apariencia, haga clic en Actualizar para activarlo.
Ahora, si visitas tu sitio web, verás la publicación de Instagram en vivo.
Si estás utilizando un tema habilitado para bloqueo, deberás agregar publicaciones específicas de Instagram usando el editor completo del sitio.
Para hacer esto, simplemente habilite la función oEmbed de Smash Balloon y obtenga la URL de la publicación de Instagram siguiendo el mismo proceso que el anterior.
A continuación, abra el editor completo del sitio yendo a yo espero » editor en su panel de WordPress. Una vez que esté en el editor completo del sitio, haga clic en el botón + en la sección de la barra lateral y luego escriba Incrustar.
Cuando aparezca el bloque derecho, haga clic para agregarlo a la barra lateral.
Luego puede agregar la URL de la publicación que desea insertar y hacer clic en el botón Insertar.
El editor completo del sitio ahora mostrará la publicación de Instagram.
Si está satisfecho con el resultado, haga clic en Guardar para publicar esta foto o video en la barra lateral habilitada para pines.
Preguntas frecuentes sobre la visualización de publicaciones de Instagram en WordPress
Smash Balloon facilita la creación de un feed de Instagram personalizado o incluso mostrar publicaciones específicas de Instagram en su sitio web de WordPress.
Dicho esto, estas son algunas de las preguntas más frecuentes sobre la visualización de publicaciones de Instagram en WordPress.
¿Cómo puedo crear una cuenta comercial de Instagram?
Smash Balloon puede mostrar fotos de una cuenta de Instagram personal o empresarial.
Sin embargo, Smash Balloon no puede recuperar automáticamente el avatar y la biografía de Instagram de una cuenta personal de Instagram. En su lugar, tendrás que agregar manualmente tu avatar y biografía en la configuración del complemento.
Teniendo esto en cuenta, es posible que desees comprobar si tienes una cuenta personal o empresarial y cambiar a una cuenta empresarial si es necesario.
Para hacer esto, simplemente visita tu cuenta de Instagram y haz clic en el ícono rayado en el menú lateral.
A continuación, haga clic en Configuración.
Si no tiene una cuenta comercial, verá Cambiar a cuenta profesional en el menú de la izquierda.
Si actualmente tiene una cuenta personal y desea cambiar a una cuenta comercial, simplemente haga clic en este enlace.
¿Cómo conecto una página de Facebook a una cuenta de Instagram?
Antes de poder ver fotos de Instagram en WordPress, primero deberá conectar su cuenta de Instagram a una página de Facebook.
Para hacer esto, vaya a la página de Facebook que desea usar y luego haga clic en Configuración en el menú de la izquierda.
Una vez que haya hecho eso, haga 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á satisfecho, haga clic en el botón Conectar.
Tenga en cuenta que las personas que administran su página de Facebook pueden ver sus mensajes de Instagram y responderlos. Si desea mantener sus mensajes privados, haga clic para desactivar el interruptor.
Cuando esté listo para pasar a la siguiente pantalla, haga clic en Confirmar.
Se abre una ventana emergente donde puede escribir su nombre de usuario o dirección de correo electrónico y contraseña.
A continuación, haga 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 vinculadas.
¿Cómo puedo mostrar imágenes de Instagram en WordPress?
En el pasado, podías incrustar fácilmente imágenes de Instagram en WordPress utilizando un protocolo conocido como oEmbed.
Sin embargo, Facebook ha cambiado la forma en que funciona oEmbed, por lo que ya no puedes incrustar fácilmente imágenes de Instagram en WordPress.
En cambio, ahora debe 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 Feed de fotos sociales de Smash Balloon conectar. Luego puede insertar fotos específicas de Instagram en su sitio web.
También puede agregar fotos de Instagram a áreas listas para widgets, como el pie de página, el encabezado, la barra lateral y más de su sitio de WordPress. Esto le permite mostrar fácilmente la misma imagen en todo su 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. Es posible que también desee consultar nuestra guía sobre cómo insertar un video de Facebook en WordPress o nuestras selecciones de expertos para conocer los mejores complementos de prueba social para WordPress y WooCommerce.
