jueves, 22 de octubre de 2015

Tutorial: Cómo poner un botón de seguir en Instagram en tu blog

¡Comparte el tutorial!
Para los usuarios de Instagram que cuenten con un blog o sitio web este tutorial les puede ser de utilidad.


Hoy les mostraré cómo poner un botón de seguir en Instagram. En este caso serían Insignias de Instagram las que agregaríamos, ya que botones en si, no hay.

¿Que necesitamos?

* Blog o sitio en donde colocar el código
* Cuenta en Instagram

Dificultad

Fácil

Paso 1:

Bien, pues como les digo, botones oficialesde Instagram para seguir usuarios no hay, pero si unas bonitas insignias o badges que facilitan el acceso a tu cuenta de Instagram para los usuarios. Te mostraré cómo implementarlas en tu blog.

Lo primero que debes hacer es seleccionar cual de las siguientes insignias te gusta más:
Instagram
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }</style>
<div align="center"><a href="http://instagram.com/TUUSUARIOAQUÍ?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a></div>
Instagram
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-32 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-32@2x.png); background-size: 60px 178px; } }</style>
<div align="center"><a href="http://instagram.com/TUUSUARIOAQUÍ?ref=badge" class="ig-b- ig-b-32"><img src="//badges.instagram.com/static/images/ig-badge-32.png" alt="Instagram" /></a></div>
Instagram
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-24 { width: 24px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; } }</style>
<div align="center"><a href="http://instagram.com/TUUSUARIOAQUÍ?ref=badge" class="ig-b- ig-b-24"><img src="//badges.instagram.com/static/images/ig-badge-24.png" alt="Instagram" /></a></div>
Instagram
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-16 { width: 16px; height: 16px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-16.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-16 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-16@2x.png); background-size: 60px 178px; } }</style>
<div align="center"><a href="http://instagram.com/TUUSUARIOAQUÍ?ref=badge" class="ig-b- ig-b-16"><img src="//badges.instagram.com/static/images/ig-badge-16.png" alt="Instagram" /></a></div>
Instagram
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }</style>
<div align="center"><a href="http://instagram.com/TUUSUARIOAQUÍ?ref=badge" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a></div>

Ahora solo debes copiar el código y pegarlo en donde quieras que la insignia sea visible.
Una vez que coloques el código debes reemplazar el texto naranja por tu nombre de usuario en Instagram.
El resultado final lo puedes ver ahí mismo justo arriba del código al que corresponden.

Como podrás notar, son botones que envían a tu perfil de Instagram a quien los pulse, con esto facilitas el acceso a tus imágenes a tus usuarios y de esta manera ganar más seguidores en Instagram. Y bueno, esto es todo sobre cómo poner un botón de seguir en Instagram.

Fin del tutorial
Ayúdanos compartiendo esto
WhatsApp

En este momento hay comentario(s) sobre Tutorial: Cómo poner un botón de seguir en Instagram en tu blog.


En este momento hay 0 comentarios sobre Tutorial: Cómo poner un botón de seguir en Instagram en tu blog.

 
Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.