Como poner botones Me Gusta, Twittear, Google+. Bajo el Título del Post.

Hoy veremos como poner los botones de las redes sociales de Facebook, Google+ y Twitter para promover nuestros blogs. Ya que los que pone por defecto Blogger, en realidad no son muy visibles.

Aquí un ejemplo:

Como siempre el truco está probado en las plantillas del diseñador de Blogger.

Lo primero que haremos es ir a plantilla, Edición de Html, continuar. Debemos hacer clic en expandir plantillas de artilugios.

Presionamos F3 (Chrome) y nos saldrá un buscador, allí pondremos lo siguiente:

 <div class='post-header-line-1'/>

Si no lo encuentras con ese código búscalo nuevamente introduciendo el código sin el final "/>". Existen 2 lineas con el mismo código, prueba en ambas ya que para algunos resulta bajo la primera y en otros bajo la segunda:

<table border='0' cellpadding='0' style='float:left;'><tbody>
<tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' expr:data-text='data:post.title'></a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=true&amp;share=true&amp;width=120&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; height:21px'/>
</td>
</tr>
</tbody></table>

Con eso ya deberiamos tener listos nuestros botones para compartir nuestras entradas.

Si tenemos entradas resumidas y queremos que los botones solo sean visibles dentro de la entrada entonces pondremos en mismo código anterior pero encerrado dentro de una condicional, de la siguiente forma:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
CODIGO ANTERIOR
 </b:if>

*Si no funciona el botón de Google+ no te preocupes. Pon el siguiente script antes de </body>

<script type="text/javascript">
  (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>

Si te gustó compártelo en tu red social o recomiéndalo en Google!!!