Gadget Social Hub de Mashable para aumentar seguidores del blog

por Yurisander Guevara Zaila

Ya he comentado sobre cómo instalar botones expansibles para compartir el blog en las Redes Sociales, una buena forma de conseguir más lectores en nuestra bitácora.

Así, les traigo un nuevo recurso, un gadget de Mashable, que reúne en un solo lugar las redes sociales más “populares”. Antes del tutorial, una vista previa de cómo luciría una vez instalado.

Este gadget permite compartir ganar seguidores en Facebook, Twitter y Google Plus, además de la suscripción directa por correo electrónico.

Para instalar el gadget, visita la sección de Diseño de tu blog y selecciona Añadir un gadget/ HMTL/Javascrtip. Una vez dentro, copia el siguiente código.

<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-googleplus {height: 57px;}
.w2b-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>

    <div id="w2b-mashable">

 <div class="w2b-googleplus">

    <script type="text/javascript">

  /*<![CDATA[*/

  window.___gcfg = {lang: 'en'};

  (function(){

      var po = document.createElement("script");

      po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";

      var s = document.getElementsByTagName("script")[0];

      s.parentNode.insertBefore(po, s);
  })();
  /*]]>*/
    </script>
    <div class="g-plus" data-href="https://plus.google.com/XXXXXXXXX" data-width="300" data-height="69" data-theme="light"></div>
 </div>
 <div class="w2b-facebook">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FXXXXXXXXXX&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
 </div>
 <div class="w2b-gplusone">
    <script type="text/javascript">/*<![CDATA[*/
      (function() {
  var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
  po.src = "https://apis.google.com/js/plusone.js";
  var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
      })();/*]]>*/
    </script>
    <div class="g-plusone" data-size="medium" data-href="XXXXXXXXXXX/"></div>
    <span>Recommend on Google</span>
 </div>
 <div class="w2b-twitter">
    <a href="https://twitter.com/XXXXXXX" class="twitter-follow-button" data-show-count="true">Follow @XXXXXXXXXX</a>
    <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
 </div>
 <div class="w2b-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXXXXXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
  <table width="100%">
      <tr>
   <td>
       <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
   </td>
   <td width="64px">
       <input class="submitu w2bDefault" type="submit" value="Subscribe"/>
   </td>
      </tr>
  </table>
  <input name="uri" type="hidden" value="XXXXXXXX"/>
  <input name="loc" type="hidden" value="en_US"/>
    </form>
 </div>
 <div class="w2b-moresubs">
    <a href="http://vivirdela-red.blogspot.com.es/">Get this Gadget</a>
 </div>
    </div>

Ahora, en cada lugar del código marcado con X´s rojas, sustituimos por cada usuario de nuestras redes sociales correspondientes. El usuario es lo que sigue a la URL madre, por ejemplo, en Facebook el usuario de esta página es www.facebook.com/MiradorSocialMedia. En Google+, el usuario es una sarta de números como estos: 115264979532247520276

Igualmente, dentro del código HTML, podemos ajustar el gadget. Cuando hice la prueba con Mirador Social Media, quedaba enorme. Pero sin que seas un experto en HTML, puedes hacer que encaje a tu gusto. Simplemente lee el código y verás cómo se divide por secciones.

Cuando veas la palabra width con un valor en px (píxeles), lo ajustas al ancho de la columna en que estará el gadget y ya está.

Finalmente, si no quieres incluir alguno de los servicios, digamos, por ejemplo, la subscripción por correo electrónico, eliminar del código todos los trozos completos que contengan la palabra “email”. Igual funciona para Facebook, Twitter y Google Plus.

Espero que disfrutes de este gadget.