Botón para compartir por Twitter y Facebook

11 de noviembre de 2009 Publicado por El Potro , 465 comentarios ,

Cada vez más son las personas que tienen una cuenta en Twitter y Facebook, y ambas redes sociales se han convertido en un buen medio de promoción para los blogs, así que podemos aprovechar estas vías y poner un botón que permita compartir una entrada en cualquiera de estas dos redes.

El botón de Facebook es un script de Fbshare.me que permite enviar contenido a Facebook y al mismo tiempo marca cuántas veces se ha compartido ese post.

El botón de Tweetmeme hace lo mismo, permite enviar la entrada a Twitter y cuenta las veces que se ha hecho esto.

Podemos combinar ambos servicios para tener en el mismo espacio ambas posibilidades de compartir y promocionar.

Para colocarlos en tu blog entra en Plantilla | Edición de HTML, y busca esta etiqueta:

<b:if cond='data:post.title'>

Y justo debajo de ella pega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- boton tweetmeme -->
<div style='float: right;'>
<ul style='list-style:none;'><li>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></li>
<br/>
<!-- boton facebook -->
<li><script>var fbShare = {
url: &#39;<data:post.url/>&#39;,
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/></li></ul>
</div>
</b:if>

El resultado será este:



Los botones quedan acomodados uno encima del otro, si los quisieras en línea horizontal, es decir, uno seguido del otro, entonces usa este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- boton tweetmeme -->
<div style='float: right;margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<!-- boton facebook -->
<script>var fbShare = {
url: &#39;<data:post.url/>&#39;,
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
</b:if>

El resultado será este:



Aun si tampoco ninguno de esos te gustara puedes usar la versión mini que sería esta:



En ese caso el código sería este:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- boton facebook -->
<div style='float: right;'>
<script>var fbShare = {
url: &#39;<data:post.url/>&#39;,
size: &#39;small&#39;,
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
<!-- boton tweetmeme -->
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = &#39;compact&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</b:if>

Tres buenas opciones para compartir tus entradas, si lo deseas puedes poner sólo un botón, ya sea el de Tweetmeme o el de Facebook, sólo quita la parte del código que corresponda, al inicio de cada código tiene la etiqueta que especifica si es de Tweetmeme o de Facebook.

En cualquiera de los tres casos los botones sólo se verán al estar dentro de una entrada, esto es para que tengan un mejor funcionamiento.

ACTUALIZACIÓN:
El botón de Facebook ha estado fallando últimamente, si lo prefieres mira esta otra entrada para usar el botón oficial para compartir de Facebook.