Kit de "botones sociales" para Blogger

Por si alguien quiere usar los botones que hice para compartir esta página por Facebook + Twitter + Menéame + Divúlgame + GooglePlus, les dejo debajo las instrucciones. Tuve que modificar otras versiones de botones que encontré por ahí porque quería que todos los botones fuesen pequeños y tuviesen contador (el contador de Menéame aparece como texto Alt en su versión actual).

En Blogger, ir al menú "Plantilla" -> "Edición de HTML" y marcar "Expandir plantillas de artilugios" (antes de nada, recomiendo hacer una copia de seguridad de la plantilla).

Buscar esta línea:

<data:post.body/>

Y justo antes de ella, dentro del mismo contenedor div, insertar este código:

<!-- ME: Tabla de social sharing: -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div align='center' style='float:right;margin-left:10px;'>
<!-- ====== -->
<table border='0' style='background-color: #F8F8F8; border: solid 1px #DDD; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border-spacing: 2px;'>
<tr><td>
<div align='left' style='margin-bottom:5px;'>
<a expr:share_url='data:post.url' name='fb_share' type=' button_count'>Compartir</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
</div>
</td>
</tr>
 <!-- ====== -->
<tr><td>
<div align='left' style='margin-bottom:0px;margin-top:0px;'>
<a class='twitter-share-button' data-count='horizontal' expr:counturl='data:post.url' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div></td></tr>
<!-- ====== -->
<tr><td style='margin-bottom:0px;margin-top:0px;'>
<iframe allowtransparency='true' expr:src='&quot;http://meneame.net/api/check_url.php?url=&quot;+data:post.url' frameborder='0' height='21' hspace='0' marginheight='0' marginwidth='0' scrolling='no' vspace='0' width='110'/>
</td></tr>  <!-- ====== -->
<!-- ====== -->
<tr><td style='margin-bottom:0px;margin-top:0px;'>
<iframe allowtransparency='true' expr:src='&quot;http://divulgame.net/api/check_url.php?url=&quot;+data:post.url' frameborder='0' height='21' hspace='0' marginheight='0' marginwidth='0' scrolling='no' vspace='0' width='110'/>
</td></tr>  <!-- ====== -->
<!-- ====== -->
<tr><td style='margin-bottom:0px;margin-top:0px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone expr:href='data:post.url' size='small'/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;es&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</td></tr>  <!-- ====== -->
</table>
</div> 
</b:if>
<!-- fin de tabla social -->

¡Y eso es todo!

Dadle a "Previsualizar" antes de guardar y si todo se ve correctamente, guardad los cambios.

¡Espero que sea útil!

Tweet