Generación OPin: Widget de suscripciones estilo Mashable

Hoy les traigo un widget orientado al tema de suscripciones a nuestro blog. La idea es agrupar en una sola área la totalidad de botones de enlace para que nuestros lectores se conviertan en seguidores.

Existen muchos de estos artilugios de estilo Masheable, pero éste en particular es una adaptación propia que hace uso de los colores fuertes para llamar la atención del visitante.

Mashable (Mashable Inc.) es un blog de noticias de Internet, fundado por Pete Cashmore en julio de 2005. Con un ranking de tráfico de 346 (170 a nivel de Estados Unidos), según Alexa, se ubica como uno de los blogs más importantes en Internet. Mashable trata regularmente temas relacionados con las redes sociales, tales como YouTube, Facebook, Google, Twitter, MySpace, asì como sobre empresas tecnológicas (como Apple), aunque también informa sobre sitios y redes sociales de perfil más bajo. Mashable es popular en muchas redes sociales. Según lo publicado en su homepage, para diciembre de 2011, tenía más de 2,6 millones de seguidores en Twitter, más de 730.000 seguidores en Facebook y más de 572.000 suscriptores de RSS.

En esta adaptación personal de otros artilugios similares también he colocado la aplicación de Facebook pero en su modalidad con imágenes de los seguidores. Si ya los tienes así, simplemente deberás suplantar mi codigo por el tuyo.

Seguramente podrás hacer las adaptaciones necesarias para que se ajuste a tus requerimientos y servicios que tienes contratados. Por lo pronto si copias el siguiente código y lo pegas en un elemento HTML/JAVA contarás con una versión funcional de uno de mis sitios.

Para adaptarlo sige las indicaciones que te dejo más abajo.

Hay una parte del código que deberás llenar con tus datos personales para que el widget te funcione correctamente.

Realiza estos cambios

1 <div class="g-plus" data-height="69" data-href="//plus.google.com/106558400164530258627" data-rel="author">
</div>

Los números que están marcados de color rojo 106558400164530258627 debes remplazarlos por los números que se definen tu perfil de google +.

2 <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPlano-Creativo/149021465232802#&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&height=80px" style="border: none; height: 80px; overflow: hidden; width: 280px;"></iframe>

El link que esta marcado de color verde
http%3A%2F%2Fwww.facebook.com%2Fpages%2FPlano-Creativo/149021465232802 debes remplazarlo por el link de tu pagina de Facebook fanpage.

3 <div class="g-plusone" data-href="http://www.planocreativo.blogspot.com/" data-size="large">
</div>

El link que esta marcado de color naranja http://www.planocreativo.blogspot.com/ deberás remplazarlo por el link de tu blog de blogger.

4 <div class="twitter"><a href="https://twitter.com/GrupoDLYC" class="twitter-follow-button" data-show-count="true" data-lang="es">Seguir a @GrupoDLYC</a>

El link que esta marcado de color purpura https://twitter.com/GrupoDLYC deberás cambiarlo por el link de tu pagina de twitter.

Al igual que las letras que están marcados de color azul GrupoDLYC deberás sustituirlo por las letras de tu follow twitter.

5 Ahora los links sociales que estan marcados de color violeta los deberás cambiar por los de tus cuentas en cada red social.

<ul class="social">
<li class="rss"><a href="http://feeds.feedburner.com/blogspot/otHSh">RSS Feed</a></li>
<li class="twitter"><a href="https://www.twitter.com/GrupoDLYC">Twitter</a></li>
<li class="facebook"><a href="https://www.facebook.com/pages/Plano-Creativo-Ideas-en-Foco/149021465232802">Facebook</a></li>
<li class="youtube"><a href="http://www.youtube.com/Pinchotheone">Youtube</a></li>
<li class="linkedin"><a href="http://www.linkedin.com/pub/orlando-daniel-pin/30/b81/a8/">Linkedin</a></li>
<li class="pinterest"><a href="http://pinterest.com/pinchothebest/">Pinterest</a></li>
</ul>

6 Si deseas eliminar o agregar otras redes sociales a las que te encuentras subscripto deberás agregarla o eliminarla en la secuencia que sigue, respetando la background-position de la correspondiente imagen en el sprite "OPin_socialsprite.png"

.sociallinks .social li.rss {
background-position: 0 -240px !important
}
.sociallinks .social li.twitter {
background-position: 0 -150px !important;
}
.sociallinks .social li.facebook {
background-position: 0 -450px !important;
}
.sociallinks .social li.youtube {
background-position: 0 -90px !important;
}
.sociallinks .social li.linkedin {
background-position: 0 -390px !important;
}
.sociallinks .social li.pinterest {
background-position: 0 -480px !important;
}

7 Para que funcione el box para suscripción vía email, el servicio debe estar habilitado en FeedBurner. Para ello, luego de habilitarlo en la pestaña Publicitar, deberás cambiar el texto marcado en verde blogspot/otHSh (que en este caso corresponde al blog Plano Creativo) por la uri que caracteriza el feed de tu blog.

<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogspot/otHSh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px;font-size: 12px;" id="email" name="email" value="Ingrese su Email aquí.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="blogspot/otHSh" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Suscribir" /></form>
</div>

8 No borres el pie de página "Quiero ésto en mi blog" así otros amigos también pueden usar este widget.

Recomiendame en Google

Seguir a @GrupoDLYC