Cómo mostrar tus fotos de Instagram en WordPress con estilo = Spotlight

Pues resulta que el otro día hablando con unos amigos salió el tema de Instagram y aunque es una red social que utilizo bastante poco, pero como yo soy el raro, y la realidad es que el resto del planeta sí que usa Instagram, me dio curiosidad ver que opciones teníamos en WordPress para enseñar sus famosos «feeds» y que si tú usas Instagram sepas como mostrar tus fotos en tu web WordPress.

Y es que para ciertos tipos de profesionales que vivan de su imagen o recursos muy visuales, empresas que hagan uso de Instagram debido a su negocio o gente que simplemente quiere conectar mejor algunas de sus redes sociales con sus páginas web, este tipo de funcionalidades son muy valiosas y útiles. Así que me puse manos a la obra y me puse a probar plugins.

Y tras muchas vueltas, entre otros muchos plugins, di con Spotlight, un plugin completísimo para mostrar tus feeds de fotos de Instagram en tu web.

Instalación y puesta a punto

El primer paso como siempre sería ir a nuestro querido apartado de Plugins en nuestro directorio WordPress y añadir este nuevo plugin Spotlight Social Media Feeds.

Instalar plugins

Lo activamos y la primera opción que nos da es de añadir otra aplicación mas para conseguir información para mejorar su servicio. Esto es completamente opcional y el plugin funciona perfectamente sin esto, así que es a gusto del consumidor.

A partir de aquí solo tienes que conectar una cuenta de Instagram y una vez conectada te saldrá una visualización previa de lo que se podrá ver en tu web una vez hecho todo el proceso.

Conectar cuenta
Modulo Conectar

¿Vale de algo la versión gratis de Spotlight?

Antes de empezar a crear nuestras feeds de Instagram, hay que remarcar que Spotlight tiene un Widget para Elementor. Así que si creas tu web con Elementor puedes directamente crear tus feeds desde el mismo Widget.

Widget Elementor
Ejemplo cuenta conectada

Pues una vez conectado este plugin con nuestro Instagram nos va a dar una cantidad muy valiosa de configuraciones para la visualización de nuestro Instagram en nuestra web.

Además puedes conectar mas de una cuenta para enseñar su contenido. Por ejemplo, en este apartado mismo vas a poder conectar mas cuentas desde el botón «Connect more Instagram accounts» y luego marcarlas para mostrarlas.

El apartado de diseño

Aquí es donde empieza lo bueno y aunque solo tienes un diseño para elegir en la versión gratuita, luego tienes un montón de configuraciones sobre cómo visualizar tu Instagram en tu web, aunque las de la versión Pro las veremos mejor un poco más abajo.

Bueno, pues vamos a ir viéndolas una por una en orden para que nadie se pierda, porque una de las únicas pegas que le he encontrado al plugin es que tiene pocas partes traducidas al español, pero su utilidad es indiscutible:

  1. Diseño(Layout): Aquí tenemos el diseño de la cuadrícula típica de entradas de Instagram como la única opción en la versión gratuita.
  2. Feed: Podemos elegir como se va a visualizar nuestra feed de Instagram.
    • Número de entradas a mostrar
    • Número de columnas
    • Orden de las entradas de Instagram: Nuevas, antiguas, mas populares, menos populares o aleatorias.
    • Tipos de contenido (Pro) que los veremos mas abajo.
    • Abrir las entradas en: No abrir, la misma pestaña, nueva pestaña o en una ventanita emergente(mi favorita).
  3. Apariencia (Appearance): Diferentes opciones respecto a la ventana que se mostrará en la web.
    • Ancho de la feed
    • Alto de la feed
    • Espaciado exterior o del borde sin contenido
    • Espaciado de las imágenes
    • Tamaño del texto
    • Color del fondo del contenido
    • Enseñar al pasar el cursor: Iconos de me gusta y comentarios, el icono de Instagram que es a la vez un enlace al mismo y otras opciones de la versión Pro.
  1. Encabezado (Header): Tenemos un montón de configuraciones útiles aquí sobre como enseñarles el contenido a tus lectores.
    • Enseñar o no encabezado
    • Cuenta a enseñar
    • Enseñar foto de perfil y biografía o no
    • Tamaño de foto de perfil
    • Añadir foto personalizada de perfil
    • Añadir biografía personalizada
    • Tamaño del texto de encabezado
    • Color de texto del encabezado
    • Color de fondo del encabezado
    • Espaciado del encabezado
  2. Botón de seguir (Follow button)
    • Enseñar o no
    • Si enseñarlo en el encabezado en el pie o en ambos.
    • Texto del botón
    • Color del texto
    • Color del botón
  3. Botón de cargar más (load more button): Este tiene las mismas opciones que el botón anterior.

Como puedes ver son un montón de ajustes, pero aún hay más. Así que vamos a usar esa prueba gratuita de 14 días de la versión Pro que te dejan el equipo de Spotlight.

La versión Pro es muy PRO

Bueno pues vamos a ver que nos ofrece la versión Pro…

Conectar Pro

Conectar con opciones Pro

Aquí ganamos un par de funcionalidades.

  1. Enseñar entradas donde se menciona a estas cuentas: Para ello tendrás que conectar una cuenta de empresa a través de Facebook.
  2. Enseñar entradas con estos hashtags: Es muy sencillo, añades la palabra de hashtag al lado de «#» y los posts con esos hashtags se enseñarán. De esta forma en diferentes partes de tu página puedes poner diferentes feeds de Instagram con diferentes temáticas.

Diseño Pro

Como puedes ver, en las secciones que ya teníamos ahora tenemos algunas opciones más:

  • Nuevos diseños que aplicar al feed
  • En el feed escoger entre enseñar todo tipos de entradas, solo fotos o solo vídeos.
  • Mostrar en las entradas los textos, el nombre de usuario o la fecha. Así como cambiar los colores al pasar por encima el ratón.
  • En el encabezado escoger si este se queda como está o situarlo centrado.
  • Incluir Instagram stories y su intervalo.

Estas son las secciones que se desbloquean al usar la versión Pro:

  • Ventana emergente: Enseñar la barra lateral con comentarios aunque los comentarios solo están disponibles para cuentas de empresa.
  • Texto de entrada: Elegir si enseñarlo, su tamaño, el color del texto y si eliminar los caracteres que son puntos.
  • Me gusta y comentarios: Enseñar los iconos sus colores y el tamaño de los mismos.

Filtrar

Opción Pro: Filtrar

Otra de las secciones que se desbloquea es la de Filtrar donde puedes filtrar por palabras qué entradas quieres o no quieres que se visualicen según las palabras que contengan en este feed personalizado y también puedes marcar las casillas para aplicar los filtros globales que veremos más adelante también.

También puedes filtrar por hashtags y aplicar filtros específicos o globales, igual que antes con las palabras.

Moderar

Opción Pro: Moderar

Este no tiene mucha sorpresa. Simplemente marca la primera opción para ocultar las entradas que quieras haciendo click encima de ellas o la segunda opción para que solo se muestren en las que hagas clic después.

Promocionar

Opción Pro: Promocionar

Otro modulo que no tiene mucha complicación. Hacemos click en la entrada de Instagram que queramos y podemos hacerla enlazar a una URL, entrada, pagina o producto así como personalizar el texto del enlace al aparecer la ventana emergente (popup box). Simple pero muy útil.

Automatizar promociones

Opción Pro: Automatizar

Pues sí, también te permite promocionar automáticamente. Spotlight detectará posts con los hashtags que tu le digas y los enlazará a la URL, entrada, página o producto que tu le indiques.

Para configurarlas ve a Instagram Feeds > Promotions en la barra de administración de WordPress. Luego «Create your first automation» y te redigirá a la pagina de automatizar.

Desde este módulo puedes establecer diferentes hashtags a promocionar como hicimos con la parte anterior. Luego guarda (Save) y ya estaría.

Configuraciones automatizar

Por último puedes establecer reglas para establecer qué posts de Instagram promocionar de forma global, aplicando estas normas a todos tus feeds.

Promociones de aplicación global

¿Que hemos creado con todo eso?

Pues después de todo este proceso ya haya sido con la versión gratuita o Pro vamos al último modulo de nuestra feed personalizada «Embed» y ahí nos habrá producido un mini código embed el cual podemos poner en cualquier parte de nuestra web o añadirlo mediante un bloque o widget que el propio plugin de Spotlight crea.

Codigo del Feed

¿Nos queda algo más?

Por supuesto que si. Todavía nos quedan por ver los ajustes del mismo plugin donde tenemos algunos muy útiles.

Cuentas

En la parte de cuentas podemos ver la información de nuestras cuentas y feeds personalizadas, así como borrarlas o conectar mas cuentas de Instagram también.

Filtros globales: Por palabras y por hashtags

Como ya vimos en la parte de filtros del feed personalizado aquí podemos también aplicar filtros por palabras o hashtags pero en este caso de forma global en todos nuestros feeds.

Configuración: Importar y optimizar

Luego tendríamos la parte de configuración donde podemos establecer cada cuanto tiempo Spotligh busca nuevos posts.

Y la parte de optimización, la cual quita entradas de Instagram de tus feeds personalizados cuando no se han visto durante un tiempo. ¿Y por qué lo hace dirás? Muy sencillo, hay muchas entradas que al ser antiguas, no se mostrarán al estar muy abajo, pero seguirían consumiendo recursos y podrían ralentizar tu web de más, así que con esto lo que hacemos esque las entradas que nadie llegue a ver por ser tan antiguas que casi no se muestren no consuman recursos.

Herramientas: Cache

Y por último en las herramientas tenemos el limpiado de caché, para que no se consuman muchos recursos guardando información que necesitaba el plugin pero que quizás a día de hoy no necesite.

Conclusión

La conclusión es que Spotlight es un plugin muy potente con un montón de configuraciones muy útiles para personalizar como quieres que se vean tus feeds de Instagram en tu web sin que desentonen con ella. Y más aún teniendo en cuenta que WordPress desde hace poco debido a cambios en la API de Facebook e Instagram desde hace poco no permite por si mismo mostrar feeds de Instagram con widgets propios o de redes sociales.

La única pega que le veo es el bajo nivel de traducción que tiene el plugin, pero para eso he hecho esta guía, para enseñarte cómo configurarlo todo pasito a pasito y saber aprovechar el potencial de este fantástico plugin.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

1 comentario en “Cómo mostrar tus fotos de Instagram en WordPress con estilo = Spotlight”

  1. Buenos días
    Ufff vaya pedazo tutorial….muy bueno…Excelente!!!! aún estoy con otras cosas cosas en la web,pero ese era un tuto que iba a buscar externamente, porque me parece importante a día de hoy en que instagram está dando pasos de gigante .
    Gracias Fernando ,ente tu y Siteground nos hacéis el trabajo mucho más ameno y sencillo a los principiantes.
    Saludos desde Vigo y mucha salud
    * Voy a hacerte otra pregunta ya que tengo «una» duda sobre el tema Astra, pero esa en el apartado correspondiente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido