Amo las webs que incluyen en la parte del footer de su pagina imágenes de cuenta de Instagram en forma de fila. Investigando y probando dí con una solución buenísima , bonita y muy eficaz.
La herramienta se llama Light Widget y te sirve para crear un widget personalizado de tu cuenta de Instagram y agregarlo a cualquier parte de tu web. Incluso también puedes colocarlo en el sidebar de tu web con el código HTML que te genera.
Pero yo, en mi afán por encontrar una solución fácil para aquellos que no somos programadores profesionales y para facilitarnos la vida no me detuve hasta dar con una técnica fácil y práctica. Te la contaré paso a paso.
- Configurar el widget desde Light Widget. Aquí deberás conectar tu cuenta de Instagram, configurar cuantas filas y columnas quieres que tenga tu widget, distancia entres las fotos, si quieres que se muestre el preloader, los captions y demás. Cuanto tengas tu widget configurado, le das a Preview para ver como quedaría y si está todo bien pues le das a Get Code!.
- Deberás colocar este código, tomando en cuenta que lo que está marcado con rojo debes cambiarlo por tu cuenta de Instagram y tu usuario, y por el código generado en Light Widget. Deberás insertarlo en el archivo de pie de página del tema (footer.php) de tu web inmediatamente después de <div class=”clear”></div>
<div id=”ig-footer”><div id=”null-instagram-feed-2″ class=”instagram-widget null-instagram-feed”>
<h4 class=”instagram-title”>TU USUARIO EN INSTAGRAM @TU_USUARIO</h4>
AQUÍ EL CÓDIGO DE LIGHWEIGHT WIDGET GENERADO
</div>
</div>
- Para lograr el resultado que te muestro más abajo, debes dirigirte a tu Hoja de Estilo (Style.css) y agregar este código:
position:relative;
text-align:center;
overflow:hidden;
}
#ig-footer h4 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background: #fff;
padding: 20px 22px;
z-index: 999;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
}
#ig-footer .instagram-pics li {
width:16.66666666666667%;
display:inline;
float:left;
}
#ig-footer .instagram-pics li img {
max-width:100%;
height:auto;
vertical-align:middle;
}
#ig-footer .instagram-pics li img:hover {
opacity:.87;
}
#ig-footer p.clear {
display:none;
}
Este será el resultado final:
