Instagram es la red social de moda del momento. Por eso, mucha gente quiere que las fotografías que suben en esa red social no se queden únicamente ahí, y deciden mostrar su feed de Instagram en WordPress.
¿Qué quiere decir eso de mostrar en WordPress el feed de Instagram?
Pues básicamente, consiste en mostrar las últimas imágenes que vas subiendo a tu cuenta en el lugar que elijas de tu web, y que se vayan actualizando automáticamente a medida que vas subiendo nuevas fotos.
Cualquier persona o negocio puede mostrar su feed en su web, aunque es más habitual hacerlo en webs donde el apartado visual sea especialmente importante, como por ejemplo, webs de fotógrafos, de viajes, de diseñadores, de restaurantes, de moda, etc.
Aparte de que pueda quedar bien a nivel estético, te ayuda también a convertir las visitas que llegan a tu web en seguidores en Instagram. Digamos que tu web se convierte en un escaparate de dicha red social y puedes dirigir a los usuarios hacia allí. Así que ya tienes dos motivos para mostrar tu feed 😉
Pues bien, sin más rodeos, en este artículo te voy a explicar la mejor manera de añadir una sección o un widget de Instagram en WordPress.
Cómo mostrar el feed de Instagram en WordPress
Hay varios plugins que te permiten mostrar tu feed de Instagram en tu web, tanto gratuitos como de pago. Pero te voy a ahorrar que busques, pruebes y te decidas entre todos ellos, contándote cuál es el plugin por excelencia para mí.
Ese plugin es Instagram Feed Pro.
Se trata de un plugin de pago muy bueno y muy personalizable, aunque tiene una versión reducida gratuita llamada Smash Balloon Social Photo Feed, y que puedes descargar desde el repositorio de WordPress.
La versión gratuita está bien si quieres mostrar tu feed de manera simple y funcional, pero si quieres sacarle todo el partido posible, la versión Pro, que puedes ver aquí, te ofrece estas funcionalidades:
- Aparte de mostrar feeds de cuentas, te permite mostrar feeds de hashtags.
- En lugar de llevar al usuario a Instagram al hacer clic en una de las fotos o vídeos, la foto se abre directamente en tu web en forma de popup, y pueden ir pasando de una a otra, todo esto sin salir de tu web.
- Permite mostrar los comentarios y los “me gusta” de cada una de las fotos o vídeos.
- Puedes elegir mostrar el feed en forma de carrusel, de manera que las fotos se van desplazando hacia la izquierda.
- Ofrece más posibilidades de diseño a la hora de mostrar el feed (galería cuadriculada, masonry…).
- Permite mostrar la descripción que va acompañada de la foto o vídeo en Instagram a modo de leyenda.
- Incluye un sistema para filtrar las publicaciones que quieres mostrar u ocultar.
- Puedes filtrar las publicaciones en base a un hashtag o palabra.
- Tienes la posibilidad de bloquear la visualización de las publicaciones para los usuarios que indiques.
Como ves, es tan completo que no se echa nada en falta en Instagram Feed Pro. En esta página puedes ver todas sus características, así como ver una demo real de un feed de Instagram creado con el plugin.
Cómo configurar Instagram Feed Pro
En este post me voy a centrar en explicar cómo funciona y cómo configurar la versión Pro del plugin. Vamos a ver cómo conectarlo con tu cuenta de Instagram y cómo crear un feed personalizado para que se muestre en tu web.
Conectar con tu cuenta de Instagram
Lo primero que tienes que hacer es conectar el plugin con tu cuenta de Instagram, cosa que se consigue de manera bastante simple.
Lo primero que tienes que hacer es iniciar sesión en Instagram con la cuenta que quieres conectar desde el mismo navegador donde estás configurando el plugin.
Una vez tengas la sesión iniciada, dirígete en tu administrador de WordPress hacia la pestaña “Instagram Feed – Settings”, y haz clic en el botón gigante “Connect an Instagram Account”.
A continuación, te pregunta si tu cuenta de Instagram es una cuenta personal o una cuenta de negocio (cuenta business).
Si tienes una cuenta personal, únicamente podrás mostrar el feed de la cuenta, mientras que si es business, podrás además mostrar feeds de hashtags o publicaciones etiquetadas, los comentarios y “me gustas”, y podrás añadir tu avatar y la bio del perfil.
Esto no es una limitación que ponga el plugin, sino que es el propio Instagram quien pone esas normas a la hora de acceder a las diferentes configuraciones.
Lo más probable es que, si tienes una web en la que vas a mostrar tu feed de Instagram, tu cuenta sea de empresa, por lo que podrás acceder a todas las opciones del plugin.
En el caso de que no lo sea, puedes convertirla a business fácilmente desde la app de Instagram.
Ahora bien, si tu cuenta es personal, en la siguiente ventana se te pedirá autorización para que el plugin pueda acceder a la información de tu perfil. Autorízalo y ya tendrás la cuenta conectada.
Pero si tu cuenta es business, la autorización se realiza a través de Facebook, al ser necesario para tener una cuenta business, por lo que también tendrás que iniciar sesión en Facebook para otorgarle los permisos al plugin.
Acto seguido, te pregunta cuál de tus páginas para empresas que tienes creadas en Facebook quieres conectar con el plugin. En el caso de que tengas varias, selecciona la que esté asociada con la cuenta de Instagram que quieres mostrar en tu web y otorga los permisos:
Por último, sea cual sea tu caso, aparecerá una ventana de confirmación para conectar la cuenta con Instagram Feed Pro:
Si todo ha ido bien, tu cuenta aparecerá como conectada:
Configurar el feed de Instagram
Una vez conectada tu cuenta, es hora de configurar el feed de Instagram que vas a mostrar en tu web.
Primero de todo, en la misma pestaña “Instagram Feed – Settings”, puedes elegir entre mostrar las fotos desde la cuenta de usuario, desde un hashtag o mostrar las fotos en las que se ha etiquetado una cuenta.
Lo más habitual es escoger la primera opción, pero si tienes una cuenta business, puedes optar por las otras sin problema.
Aquí también puedes elegir cada cuánto tiempo el plugin va a comprobar si se ha publicado nuevo contenido en Instagram para actualizar el feed.
Tienes varias opciones para elegir, cada X minutos, X horas o X días que tú quieras.
Si sueles publicar una vez al día, puedes configurarlo para que se actualice una vez al día, por ejemplo.
Personalizar el feed de Instagram
Bien, pues después de la configuración que acabamos de ver, llega el momento de personalizar el feed. Aquí es donde más opciones hay en el plugin, y es que, como he comentado antes, es un plugin muy personalizable y podrás controlar una gran multitud de aspectos.
Vamos a ver para qué sirven cada una de ellas.
Ajustes generales
Para empezar, puedes elegir el ancho y/o el alto que ocupará el feed en el lugar donde lo pongas, tanto en porcentaje como en píxeles. Para la mayoría de ocasiones, el 100% de ancho por defecto que viene ya estaría bien.
En el caso de que quieras que ocupe menos espacio, puedes cambiar el valor.
También puedes asignar un color para el fondo del feed.
En Instagram Feed Pro puedes elegir entre cuatro tipos de diseños para mostrar el feed, que son los que ves en la captura de arriba.
Puedes elegir el número de fotos o vídeos que se van a ver en el feed y en cuantas columnas quieres que se muestren. Y lo mejor, es que puedes cambiar estas dos opciones para la versión móvil.
También puedes elegir cuánto espacio (padding) quieres que haya entre foto y foto, o incluso dejarlas sin espacio entre ellas.
Para terminar de repasar las opciones de la pestaña de ajustes generales, puedes activar o desactivar estos elementos:
Header: encima del feed se muestra el avatar y el nombre de la cuenta, junto con las fotografías subidas. Tiene varias opciones de personalización, como poner un avatar y una bio personalizada, cambiar los colores o mostrar las historias.
Load more: aparece un botón debajo del feed que permite cargar más fotografías justo debajo de las que ya se muestran. Recuerda que puedes elegir cuántas fotos quieres que se muestren inicialmente en el feed, pues además, puedes activar este botón para que el usuario pueda ver las siguientes.
Follow: aparece un botón debajo del feed con un texto para invitar a tus lectores a seguirte en Instagram, con un enlace hacia tu cuenta.
Por supuesto, en ambos botones puedes personalizar el texto y los colores.
Ajustes Entradas
En la pestaña “Entradas” tenemos más opciones interesantes para personalizar el feed de Instagram. Vamos a darles un repaso.
En el primer apartado, puedes elegir si quieres mostrar las fotos por orden de publicación o que se muestren aleatoriamente. También puedes cambiar la resolución las imágenes y decidir qué tipo de publicaciones quieres mostrar: únicamente imágenes, úncamente vídeos o ambos.
Tienes la opción de desactivar el popup ligthbox, es decir, que cuando se haga clic en una imagen, no se abra a modo de popup en la misma web.
Si activas la opción “Link Posts to URL in Caption”, el feed de convierte en “shoppable”. ¿Y qué quiere decir esto?
Pues que podrás poner una URL en el pie de imagen de cada publicación que subas a Instagram, y cuando se haga clic en esa imagen en el feed de tu web, se redirigirá al usuario a esa URL que has indicado para esa imagen.
Es especialmente útil si tienes una tienda online para llevar a los usuarios a tus productos desde el feed.
Con las opciones de la captura de arriba, vas a poder personalizar el color y los elementos que se mostrarán al situar el ratón encima de una imagen del feed.
Puedes mostrar el nombre de usuario, la fecha de publicación, el icono de Instagram (que te lleva a la misma imagen en Instagram), el pie de foto (caption) y los “me gustas” y comentarios.
Estas opciones son para personalizar el pie de foto. Si tienes activado que se muestre, el texto que hayas escrito en la publicación de Instagram, se mostrará debajo de cada foto en el feed.
A mí, personalmente, me gusta tenerlo desactivado y que se muestre al pasar el ratón por encima de la foto, el feed queda más bonito estéticamente sin textos, mostrando únicamente las imágenes.
Puedes elegir si mostrar o no los iconos de los “me gusta” y comentarios, así como personalizar el tamaño y el color.
Para acabar, en esta pestaña también puedes elegir si quieres que se muestren los comentarios de la publicación en el popup que se abre al clicar sobre una imagen y el número de comentarios a mostrar.
Para terminar de personalizar tu feed, puedes filtrar qué publicaciones mostrar u ocultar, añadiendo los hashtags o palabras que deben contener las publicaciones a mostrar u ocultar.
También puedes seleccionar publicaciones individualmente a ocultar, ya sea indicando el ID de la publicación (Manual) o de manera visual, que añade un botón al feed que te permitirá ocultar las publicaciones que quieras.
Verás que hay una pestaña más llamada “Avanzado”, pero no voy a profundizar en ella porque no será necesario tocar nada de ahí para la gran mayoría de usuarios.
Mostrar el feed de Instagram en tu web
Después de ver cómo configurarlo y personalizarlo, vamos a ver cómo puedes mostrarlo en tu web.
Te voy a mostrar las dos formas que tiene Instagram Feed Pro para mostrarlo, cada una más sencilla que la anterior 🙂
Mostrar el feed de Instagram mediante shortcode
Puedes utilizar un shortcode para mostrar el feed en el lugar de la web que tú quieras. Para ello, solo tienes que copiar y pegar el siguiente shortcode:
[instagram-feed]
Con esto, se mostrará el feed tal y como lo has configurado y personalizado. A medida que vayas haciendo cambios en las opciones de personalización, el feed mostrado a través de este shortcode irá cambiando.
Aparte, puedes asignarle varios parámetros directamente en el shortcode para personalizar únicamente ese feed. Esto puede ser útil si vas a mostrar más de un feed y quieres que sean diferentes entre ellos.
Esos parámetros los puedes ver en la pestaña “Display your feed”, dentro de las opciones del plugin.
Mostrar el feed de Instagram como widget de WordPress
También lo puedes mostrar dentro de una de las áreas de widget que tenga tu tema. Para ello, tienes que ir al personalizador o a la pestaña “Widgets”. Si no estás familiarizado con los widgets, aquí te explico qué son y cómo ponerlos en tu web.
Busca el widget “Instagram Feed” y añádelo.
Básicamente, lo que hace este widget es añadir el shortcode que acabamos de ver.
Por supuesto, puedes utilizar los dos métodos en el caso de que quieras insertar el feed en varios sitios de tu web, y personalizar cada uno de ellos mediante los diferentes parámetros en el shortcode.
Conclusión sobre Instagram Feed Pro
Pues después de haber probado este plugin, pienso que la gente de Smash Ballon ha hecho un gran trabajo con el diseño y las funcionalidades del plugin.
Además, siempre se están adaptando a los cambios que hace Instagram en su API y mantienen su plugin actualizado, por lo que es otro motivo para elegirlo.
Si te ha convencido el funcionamiento, puedes comprarlo desde su web, y te invito a contar tus impresiones en los comentarios de abajo 😉
Si quieres saber cómo mostrar otros feeds de otras redes sociales, te dejo un par un artículos:
