¿Quieres añadir el feed de Instagram a tu web wordpress pero no sabes cómo? Con los siguientes pasos podrás tener el feed de Instragram en tu web de forma fácil y sencilla. Esto demorará 5 minutos a lo sumo.
Opciones para instalar el feed de Instagram a tu web wordpress.
Sin plugins
Hay webs que te permiten generar código html para incrustar en un widget html de tu wordpress en la ubicación que prefieras. Las dos que he usado son Ligthwidget y Snapwidget.
Nota: También puedes usar la opción de desarrolladores de Instagram pero esto requiere saber programación y tocar el código de las plantillas de tu web.
Lightwidget
Generar el código en esta aplicación es muy fácil, solo te tomará 5 minutos máximo. La única pega es que si tienes una web con https, tendrás que pagar por una única vez 10 dólares para poder utilizarlo.
La ventaja de esta aplicación es que te permite tener tu feed como más te sirva y de acuerdo a la ubicación donde lo quieras poner en tu web. También te permite filtrar las fotos de acuerdo con hastags específicos, una buena opción para mostrar las fotos que mejor favorecen a tu marca.
Iniciemos con las opciones para construir tu feed ideal:
Tipo de widget (type of widget)
Elige entre tres opciones:
Grid: Es la presentación cuadriculada, como la ves en tu cuenta normal.
Diapositivas o carrusel (slideshow): Es una presentación horizontal con las fotos que tienes en tu cuenta.
Columnas estilo Pinterest (Columns – Pinterest style): La presentación de tu feed además de las fotos incluirá el texto que lo acompaña y se mostrará como un rectangulo vertical. Esta opción me parece antiestética.
Numero de columnas (Number columns)
Elige el numero de columnas que quieres que tenga tu feed. Te sugiero no más de tres para presentación en formato Grid y seis para el formato carrusel. A menos que quieras crear una página exclusiva para tu instagram con el mayor número de fotos.
Numero defilas (number rows)
Define la cantidad de fotos que llevara tu feed. Aquí te recomiendo poner máximo nueve para el formato Grid y diez para el formato carrusel.
Efectos flotantes de la imágen.
Elige la que te guste. En mi caso prefiero no utilizar esta opción.
Espacio (padding)
El espacio por defecto que aparece es de 2 píxeles. Si quieres ampliarlo más, pon la medida que quieras.
Formato de imágen (image format).
Hay dos opciones: cuadrada u original. Elige la que más te guste.
Cuando haz elegido la opción Grid, te preguntará si quieres añadir el texto de la imágen (show captions). Si lo eliges, te preguntará la cantidad de caracteres que quieres mostrar.
Imagenes de carga lenta (lazy-load-images).
Si activas esta opción, tus imágenes cargaran más lento. Te recomiendo no utilizarla.
Generar código.
Antes de generar el código, genera vistas previas con las opciones que hayas elegido, así estarás segura de que el feed de Instagram para tu web quede como lo deseas.
Pegar código en widget html de tu web
Una vez estés segura de como quieres el feed, generas el código, lo copias y lo pegas widget html en la ubicación de tu web que prefieras.
SnapWidget
Esta aplicación te permite generar widget para Instagram, Facebook y Twitter de manera fácil y rápida.
Tienes la opción de loguearte con tu correo o con Facebook. y una vez dentro, elige Instragram para crear el widget.
Elige el formato en que quieres tu feed
La aplicación de muestra varios formatos para que se muestre tu feed: carrusel, cuadricula y una sola foto. Estas opciones son para ponerlas generalmente en la barra lateral primaria de tu web.
Configura tu feed.
Username: Pon tu usuario de instagram sin @.
Descripción: El nombre que le pondrás a tu feed. Lo puedes dejar en blanco, si no quieres describirlo.
Thumbnail size: Escribe el tamaño en que quieres tu feed. También puedes dejar el que viene por defecto.
Layout (columnas y filas): define la cantidad de columnas y filas que quieres.
Photo border: define si quieres o no que exista borde para tus fotos.
Background color (color de fondo): Si quieres poner un color de fondo, pon el código del mismo.
Photo padding: Escribe el espacio que quieres que exista entre las fotos.
Hover effect (efectos flotantes): Hay 5 opciones que puedes elegir, los cuales son, ninguno (none), desvanecerse (fade on), aparecer gradualmente(fade in), acercar (zoom in) y likes y comentarios (likes & comments). Te recomiendo usar la última.
Sharing buttons: Elige si quieres o no que tengan botones de compartir en redes sociales. En este caso se podría compartir en Facebook, Twitter y Pinterest.
Responsive: Elige si quieres que tu feed se adapte a móviles o no.
Generar widget.
Luego de configurar tu feed, revisa primero la vista previa. Si te gusta lo que has configurado, procede a generar el código que debes incrustar en un widget html de tu web en wordpress.org.
Nota 1: Cuando incrustes el código en tu web, elimina la línea de código allowTransparency=”true” porque genera error y no te deja grabarlo.
Nota 2: Si un usuario da clic en tu feed creado con SnapWidget, lo llevará a una página creada por esta aplicación para tus fotos donde él podrá compartirlas por otras redes sociales. Este detalle personalmente, no me agradó.
2. Con plugins
Instragram feed.
Este es un plugin sencillo de instalar y configurar.
Configurar
En esta pestaña ingresas con tu usuario de Instagram para activar tu token de acceso e ID de Instagram.
Una vez los obtengas, pulsa “aceptar” y guardar los cambios.
Personalizar.
Aquí defines el ancho y el alto que tendra tu feed, numero de columnas, fotos, si deseas que aparezca la cabecera y la bio.
Mostrar tu feed
En este ítem puedes copiar el o los shortcodes que deseas. La aplicación te muestras varias combinaciones que puedes usar según lo que desees. Luego vas a apariencia/widget en WordPress y añades el shortcode en un widget de texto en la ubicación que prefieras.
¡Listo, ya tienes tu feed instalado!
2. WP Instagram widget
A diferencia del anterior, no necesita la API par funcionar. En cuanto lo instalas, se convierte en un widget más de tu wordpress. La única pega es que solo sirve para ubicarlo en la barra lateral porque su presentación es en forma vertical.
Establece el título de tu feed, pon el usuario de la cuenta de Instagram que mostrarás en tu blog, elige el tamaño de tus fotos (large, thumbnail, small u original) y configura el link para que tus lectores te puedan seguir.
Más simple, imposible.
2.3. Instagram Slider
Al igual que el anterior, cuando lo activas, se ubica en la sesión de widgets de tu wordpress y no necesita que te loguees.
La diferencia es que hay una sección aparte dentro de la sección de ubicaciones de los widget para configurar el shortcode del feed con las características que definas e instalarlo en un widget de texto en el lugar que desees.
Las opciones de configuración son más variadas.
Usuario y numero de fotos a mostrar
Escribe el usuario de tu cuenta y establece la cantidad de fotos que quieres mostrar y el tiempo te actualización. Si deseas que las fotos se alojen en tu WordPress, activa la casilla correspondiente.
Diseño de tu feed y el link
En este bloque defines la plantilla, el tamaño de las fotos y el orden (aleatorio, por fecha o destacada). Adicionalmente, puedes definir que quieres linkear (url, imágenes, etc).
Hay unas opciones avanzadas para las imágenes y el slider.
Conclusión
Con estas 4 formas de instalar el feed de Instagram puedes mostrar lo que se mueve en tu cuenta y atraer a tus lectores.
Elige la opción que mas de adapte a tu tiempo, conocimiento, especificaciones y el aspecto que más te guste de cada uno.
Si me preguntas mi opción preferida, sin duda elijo Instagram Slider porque es más bonito y cuando el lector da clic, lo lleva a mi cuenta original.
¿Tienes el feed de Instragram en tu web?
¿Usas alguno de estas opciones o tienes otras más interesantes?
Cuéntame en los comentarios.
Imágen cortesía de Shutterstock.
Hola Maryory, instalé Instagran Feed porque fue el primer plugin que pusiste y vi que tiene 5 estrellas.
He tardado 5 minutos en instalarlo y ha quedado chulísimo. Se puede personalizar de mil formas pero yo lo dejé así, solo retoqué donde pone SÍGUEME (ponía Síguenos).
Me encanta, está genial, tenía muchas ganas de tenerlo. Muchas gracias. Lo comparto.
Citar Comentario
Hola Beatriz:
¡Que bueno que te haya servido el post para instalar el feed! Cualquiera de las 5 opciones se instala rápido.
¡Gracias por compartirlo!
Saludos,
Maryory
Citar Comentario
Tengo blogger, hay opción para ponerlo allí? Gracias
Citar Comentario
Hola Sabrina:
Prueba con las dos opciones sin plugins porque generan un código que se puede incrustar en un widget de texto o html en tu blog.
Los plugins que menciono al final, solo aplican para blogs creados con WordPress.org
Saludos,
Maryory
Citar Comentario