Cómo mostrar fotos de Instagram en un widget de barra lateral de WordPress
¿Quieres mostrar tus fotos de Instagram en tu barra lateral de WordPress?
Tus publicaciones de Instagram son un excelente contenido para tu sitio web. Al crear un feed de Instagram, puede mantener su sitio web actualizado e interesante mientras promociona su cuenta de Instagram.
En este artículo, le mostraremos cómo mostrar sus fotos y videos de Instagram en el ejecutable de la barra lateral de WordPress.
¿Por qué agregar un feed de Instagram a su sitio de WordPress??
Con más de mil millones de usuarios activos mensuales, Instagram es un excelente lugar para promocionar sus productos, servicios y publicaciones de blog.
De hecho, dependiendo de su industria, Instagram puede ser la parte más importante de su estrategia de redes sociales. Por ejemplo, Instagram es particularmente popular entre los principales blogs de moda, sitios web de cocina, estilo de vida y fotografía.
Sin embargo, las personas no verán sus publicaciones de Instagram simplemente visitando su sitio web. Esto puede dificultar el crecimiento de sus seguidores de Instagram y la participación en sus fotos y videos.
Con eso en mente, agregar un feed de Instagram a su sitio de WordPress es una buena idea. Al mostrar sus últimas publicaciones, puede promocionar su cuenta de Instagram de una manera atractiva y llamativa.
Esto le traerá 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.
El feed también se actualiza automáticamente cada vez que crea una nueva publicación de Instagram. Así que esta es una excelente manera de mantener su sitio web actualizado.
Echemos un vistazo a cómo mostrar fácilmente las fotos de Instagram en el widget de la barra lateral de WordPress.
Cómo instalar un plugin de fotos en 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 le 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 la barra lateral usando un shortcode o un bloque.
En esta guía, usaremos la versión gratuita de Smash Balloon porque tiene todo lo que necesitas para insertar un feed de Instagram. Sin embargo, hay uno Versión Pro Con él, puede ver feeds con hashtags, agregar imágenes de Instagram que se pueden comprar a WordPress y más.
Antes de comenzar, debe conectar su cuenta de Instagram con 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 permitirá que Smash Balloon muestre automáticamente su biografía y encabezado de Instagram.
Puede encontrar instrucciones paso a paso para ambos en nuestra sección de preguntas frecuentes al final de la publicación.
Cuando esté listo, instale y active el complemento Smash Balloon Social Photo Feed. Consulte nuestra guía de instalación del complemento de WordPress para obtener más detalles.
Cómo conectar una cuenta de Instagram a WordPress
Una vez que haya activado el complemento, es hora de conectar su cuenta de Instagram a WordPress. solo ve a Feed de Instagram » Ajustes y luego haga clic en Agregar nuevo.
Con Smash Balloon Pro, puede crear feeds a partir de publicaciones etiquetadas y hashtags, o incluso crear un muro social con contenido de muchos sitios web diferentes, incluidos YouTube, Facebook y Twitter.
Como estamos usando la versión gratuita, simplemente seleccione "Historial de usuario" y luego haga clic en "Siguiente".
A continuación, debe seleccionar la cuenta de Instagram desde la que recibirá las fotos.
Primero, haga clic en "Agregar fuente".
En la siguiente pantalla, elige si quieres ver fotos de una cuenta de Instagram personal o de trabajo.
Si marca la casilla junto a "Personal", Smash Balloon no incluirá su avatar y biografía de Instagram en su encabezado de forma predeterminada. Sin embargo, siempre puedes agregar el avatar y la biografía manualmente en el configuración de complementos.
Después de seleccionar Personal o Business, haga clic en Iniciar sesión con Facebook.
Ahora puede resaltar la cuenta de Instagram que desea usar y hacer clic en "Siguiente".
A continuación, marque la casilla junto a la página de Facebook asociada con su cuenta de Instagram.
Continúe y haga clic en Siguiente.
Smash Balloon ahora mostrará una ventana emergente que enumera toda la información a la que puede acceder y las acciones que puede tomar.
Para restringir el acceso de Smash Balloon a su cuenta de Instagram, haga clic en uno de los interruptores para alternar entre Sí y No. Tenga en cuenta, sin embargo, que esto puede afectar las fotos y videos que puede incrustar en su blog o sitio web de WordPress.
Con eso en mente, recomendamos dejar todos los interruptores habilitados.
Cuando haya terminado, haga clic en Listo.
Ahora verá una ventana emergente con la cuenta de Instagram que acaba de vincular a WordPress.
Simplemente marque la casilla junto a la cuenta y luego haga clic en Agregar.
Smash Balloon ahora te llevará de vuelta a Feeds de Instagram » Todos los feeds automáticamente.
Para crear un feed, 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 luego abrirá esa fuente en el editor Smash Balloon.
Cómo personalizar tu feed de fotos de Instagram
Puede usar el editor para optimizar la apariencia de las fotos de Instagram en su sitio web.
A la derecha, verá una vista previa de su feed de fotos de Instagram. A la izquierda están todas las configuraciones que puede usar para personalizar un feed de fotos.
La mayoría de estas configuraciones se explican por sí mismas, pero cubriremos rápidamente algunas áreas clave.
Primero, puede cambiar el diseño del feed y agregar un pie de página seleccionando "Diseño del feed" en el menú de la izquierda. A medida que realiza cambios, la vista previa se actualiza automáticamente, por lo que puede probar diferentes configuraciones para ver qué funciona mejor para su feed de fotos de Instagram.
De forma predeterminada, Smash Balloon muestra la misma cantidad de publicaciones en computadoras de escritorio y dispositivos móviles.
La fila de botones en la esquina superior derecha le permite obtener una vista previa de cómo se verá su feed de Instagram en una computadora de escritorio, tableta y teléfono inteligente. Al probar diferentes diseños, puede crear un feed de Instagram que se vea genial sin importar qué dispositivo esté usando el visitante.
Los teléfonos inteligentes y las tabletas tienden a tener pantallas más pequeñas y menos capacidad de procesamiento, por lo que es posible que desee ver menos fotos y videos en los dispositivos móviles.
Para hacer esto, simplemente ingrese un número diferente en el campo Teléfono móvil en Número de publicaciones.
De forma predeterminada, el feed de Facebook en teléfonos inteligentes y tabletas muestra menos columnas en comparación con las computadoras de escritorio. Esto permite que sus fotos y videos 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 las columnas en los teléfonos inteligentes y las tabletas. Si este es el caso, puede mostrar menos columnas cambiando los números en la sección Columnas.
Si 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 puede ver la siguiente pantalla de configuración, que es "Esquema de color".
De forma predeterminada, Smash Balloon usa un esquema de color heredado de su tema de WordPress, pero también hay temas "claros" y "oscuros" que puede usar.
Otra opción es crear su propio esquema de color seleccionando Personalizado y luego usando los controles para cambiar el color de fondo, editar el color del botón, cambiar el color del texto y más.
De forma predeterminada, Smash Balloon agrega un encabezado a su feed que incluye su foto de perfil de Instagram y el nombre de su página. Para cambiar la apariencia de esta sección, haga clic en Encabezado en el menú de la izquierda.
En esta pantalla, puede cambiar el tamaño y el color del encabezado y mostrar u ocultar su biografía de Instagram.
A veces, es posible que desee mostrar una imagen de perfil diferente. Por ejemplo, su avatar de Instagram puede chocar con su tema de WordPress.
Para hacer esto, simplemente haga clic en "Agregar foto" en "Mostrar mi avatar".
Luego puede seleccionar una imagen de la biblioteca de medios de WordPress o cargar una nueva foto desde su computadora.
También puedes mostrar una biografía diferente. Por ejemplo, es posible que desee mostrar su feed de Instagram o alentar a las personas a seguirlo para obtener más contenido excelente.
Para reemplazar su biografía de Instagram, simplemente ingrese el campo Agregar biografía personalizada.
Smash Balloon analiza automáticamente tus fotos de Instagram y las muestra en la mejor resolución. Aunque recomendamos utilizar esta configuración predeterminada, es posible ampliar o reducir 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 "Fotos y videos".
Ahora puede elegir entre tamaño miniatura, mediano y completo usando el menú desplegable.
Si no está satisfecho con los resultados, siempre puede volver a esta pantalla 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 de tus fotos y videos.
Dado que este es un botón tan importante, es posible que desee personalizarlo seleccionando "Cargar más botón" en el menú de la izquierda.
Aquí puede ayudar a que Load More se destaque cambiando el color de fondo, el color del texto y el estado del cursor.
También puede 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 botón Habilitar. Esta es una excelente manera de alentar a las personas a visitar su Instagram al limitar la cantidad de publicaciones que pueden ver en su sitio.
Si a los visitantes les gusta lo que ven, pueden optar por seguirte en Instagram usando el botón "Seguir en Instagram" que Smash Balloon agrega automáticamente.
Con eso en mente, puede ayudar a que el botón se destaque seleccionando "Seguir botón" en el menú de la izquierda.
Aquí puede cambiar el color de fondo, el estado del cursor y el color del texto del botón.
De forma predeterminada, el botón tiene una etiqueta general "Seguir en Instagram".
Puede reemplazarlo con su propio mensaje escribiéndolo en el campo "Texto".
Cuando esté satisfecho con el aspecto de su feed de Instagram, asegúrese de hacer clic en "Guardar" para guardar los cambios. Ahora puede agregar el feed de Instagram a su widget de la barra lateral de WordPress.
Cómo agregar tus fotos de Instagram a un widget de la barra lateral de WordPress
Puede agregar su feed a la barra lateral o a una sección similar usando el bloque de feeds de Instagram.
Si ha creado más de un feed con Smash Balloon, debe conocer el código del feed.
solo ve a Instagram » Todos los canales y luego copie el valor en la columna Shortcode.
En la siguiente imagen necesitamos usar instagram-feed feed=1
.
Cuando lo haga, vaya a Apariencia "artilugios en tu panel de WordPress.
Luego haga clic en el botón azul "+".
Escribe "Feed de Instagram" en la barra de búsqueda 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.
Luego, simplemente arrastre el ejecutable al área donde desea mostrar el feed de Instagram, p. B. la barra lateral o sección similar.
El widget muestra automáticamente uno de los feeds que ha creado con Smash Balloon.
Para mostrar otro feed en su lugar, simplemente ingrese 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 para agregar y usar widgets en WordPress.
Si está utilizando un tema bloqueable, puede usar el editor de sitio web completo para agregar un feed de Instagram a su barra lateral. Para comenzar, simplemente vaya a Ver » editor.
En el editor, simplemente haga clic en la sección de la barra lateral para seleccionarla y luego haga clic en el botón "+".
Entonces puede 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 ha creado con Smash Balloon. Para mostrar otro feed, simplemente agregue el código abreviado siguiendo el procedimiento anterior.
Cuando esté satisfecho con el aspecto de su feed de Instagram, haga clic en "Guardar" para aplicar los cambios.
Cómo mostrar una foto específica de Instagram en WordPress
A veces, es posible que desee mostrar una publicación específica de Instagram en su sitio web. Podría ser tu foto favorita, una publicación perenne o incluso un concurso de redes sociales que estés organizando.
En el pasado, podía insertar fácilmente una publicación de Instagram en WordPress usando un protocolo llamado oEmbed. Sin embargo, Facebook ha cambiado la forma en que funciona oEmbed, por lo que ya no puede incrustar fácilmente fotos de Instagram en WordPress.
La buena noticia es que Smash Balloon puede solucionar el problema de oEmbed en 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 una barra lateral.
Para habilitar esta característica, simplemente vaya a Canal de Instagram » oEmbeds. A continuación, puede hacer clic en el botón "Activar".
Luego ve a Apariencia » Widgets y haga clic en el botón azul "+".
Escriba "incrustar" en la barra de búsqueda para encontrar el bloque correcto.
Cuando aparezca el bloque incrustado, arrástrelo sobre el área donde desea que aparezca la foto.
En el cuadro de inserción, simplemente pegue la URL de la publicación de Instagram que desea mostrar en su sitio web. Luego haga clic en Incrustar.
WordPress ahora mostrará la publicación específica de Instagram.
Si está satisfecho con su aspecto, haga clic en "Actualizar" para activarlo.
Ahora, cuando visite su sitio web, verá la publicación de Instagram en vivo.
Si está utilizando un tema bloqueable, deberá agregar publicaciones específicas de Instagram utilizando el editor completo del sitio.
Para hacer esto, simplemente habilite la función oEmbed de Smash Balloon y tome la URL de la publicación de Instagram siguiendo el procedimiento anterior.
Luego abra el editor completo del sitio yendo a Ver » editor en tu panel de WordPress. Una vez que esté en el editor completo del sitio web, haga clic en el botón "+" en la barra lateral y luego escriba "incrustar".
Cuando aparezca el bloque derecho, haz clic en él para agregarlo a la barra lateral.
Luego puede agregar la URL de la publicación que desea incrustar y hacer clic en el botón Incrustar.
El editor completo del sitio ahora mostrará la publicación de Instagram.
Cuando esté satisfecho con el aspecto, haga clic en "Guardar" para publicar esa foto o video en su barra lateral bloqueable.
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 muestra 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 creo una cuenta comercial en Instagram?
Smash Balloon puede mostrar fotos de una cuenta de Instagram personal o comercial.
Sin embargo, Smash Balloon no puede recuperar automáticamente un avatar y una biografía de Instagram desde una cuenta personal de Instagram. En su lugar, debe agregar el avatar y la biografía manualmente en la configuración del complemento.
Con eso en mente, es una buena idea verificar si tiene una cuenta personal o de trabajo y luego cambiar a una cuenta de trabajo si tiene una.
Para hacer esto, simplemente visite su cuenta de Instagram y haga clic en el ícono de línea en el menú lateral.
Luego haga clic en Configuración.
Si no tiene una cuenta comercial, la última opción en esta pantalla será "Cambiar a una cuenta profesional".
Si actualmente tiene una cuenta personal y desea actualizar a una cuenta comercial, simplemente haga clic en este enlace.
¿Cómo vinculo una página de Facebook a una cuenta de Instagram?
Antes de poder ver fotos de Instagram en WordPress, primero debe vincular 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.
Luego haga clic en Cuenta vinculada. Ahora puede seleccionar "Instagram" y hacer clic en el botón "Conectar".
Facebook ahora muestra todas las acciones que puede tomar y la información a la que puede acceder.
Si está satisfecho con esto, haga clic en el botón "Conectar".
Sin embargo, tenga en cuenta que las personas que administran su página de Facebook pueden ver y responder a sus mensajes de Instagram. Si desea detener esto y mantener sus mensajes privados, haga clic para desactivar el control deslizante.
Cuando esté listo para pasar a la siguiente pantalla, haga clic en Confirmar.
Esto abrirá una ventana emergente donde puede ingresar su nombre de usuario y contraseña de Instagram.
Luego haga clic en el botón "Iniciar sesión".
Después de unos minutos, verá un mensaje de que sus cuentas de Instagram y Facebook ahora están conectadas.
Esperamos que este artículo le haya ayudado a aprender cómo mostrar fotos de Instagram en un widget de la barra lateral de WordPress. También puede consultar nuestra guía para crear un feed de Facebook personalizado en WordPress o nuestra selección experta de complementos de prueba social para WordPress y WooCommerce.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es Y Facebook.
Deja una respuesta