Agregar un módulo de instagram en Business Pro

Para cuando estoy escribiendo este artículo Instagram ya ha superado los 900 millones de usuarios activos mensuales. Eso lo convierte en la red social con mayor crecimiento de estos últimos años. Dado esta cantidad de clientes, no es de extrañar que haya empresas y freelancers que basen su campaña de marketing online en Instagram. 

No es de extrañar que en el mundo WordPress se creen widgets y plugins relacionados con esta red social. 

En este artículo veremos como implementar un plugin que a su vez proporciona un widget para mostrar donde queramos nuestras últimas publicaciones de Instagram. Esta vez lo implementaremos en el tema Business Pro. Vamos a ello!

Instalar el plugin

El plugin WP Instagram Widget es el que suelo utilizar y que me da muy buenos resultados. Además es sencillo de configurar. 

Como su nombre indica, crea un widget el cual configuraremos con la cuenta de Isntagram que queremos mostrar, el número de fotos, el tamaño de las mismas y si queremos que el enlace de cada foto se abra en otra ventana o en la actual. Nos da una última opción para añadir un enlace a nuestra cuenta de Instagram

Aquí os dejo una captura de como he configurado yo el del ejemplo para el diseño. La he alojado en la sección Front Page 5 de la página de inicio del tema Business Pro

Configuración del widget de Instagram
Configuración del widget de Instagram

El código CSS

Esta vez más que nunca, necesitamos código CSS para dar estilo a nuestras fotos. Y para asegurarnos la adaptavilidad lo haremos con Flexbox, como ya hemos trabajo en otros artículos.

.front-page-5 .wrap {
	width: 100%;
	max-width: 100%;
	text-align: center;
}
/*Aplicamos Flexbox*/
.instagram-pics {
  	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-flex-flow: row wrap;
  	-ms-flex-flow: row wrap;
  	flex-flow: row wrap;
  	-webkit-align-content: flex-start;
  	-ms-flex-line-pack: start;
  	align-content: flex-start;
}
.instagram-pics li {
  	width: 100%;
}
/* Hacemos nuestro diseño adaptativo o "responsive" */
@media (min-width:360px) {
	.instagram-pics li {
    	width: 50%;
  	}
  	.front-page-5 .widget ul > li {
    	margin-bottom: 0;
    	padding-bottom: 0;
  	}
}

@media (min-width:550px) {
	.instagram-pics li {
    	width: 33.3334%;
  	}
}

@media (min-width:768px) {
	.instagram-pics li {
    	width: 16.6667%;
  	}
}

Como podéis ver el resultado ha quedado bastante minimalista y limpio. Siempre me ha gustado este estilo en el que las fotos no tienen ningún margen. Y por regla general suele gustar también a los clientes. 

Feed de Instagram a todo el ancho de la página.
Feed de Instagram a todo el ancho de la página.

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.

Interacciones con los lectores

Deja tu duda o comentario

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

¿Olvidaste tu contraseña?