Los botones para compartir de Blogger

Por fin Blogger Buzz ha decidido hacer público que los botones de compartir están disponibles en todos los blogs; casi un mes después de haberlos agregados y varios dias después que Rosa nos contara que habían comenzado a funcionar.

El includable que controla todo eso ya fue incorporado a todas las plantillas así que podemos verlo si expandimos los artilugios:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
.......
</b:if>
</b:includable>

Lo que puede faltar en algunas plantillas es el código que carga esa parte y que debería encontrarse dentro del includable de las entradas, por lo general, en el pie de página, por ejemplo, luego del ícono de edición:

<b:includable id='post' var='post'>
.......
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
.......
<!-- share buttons -->
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

De no existir, simplemente lo agregamos allí o donde se nos ocurra mostrarlo; además se debe habilitar como cualquier otra opción. Para eso, hay que ir a Diseño, hacer click en Editar Entradas del blog y marcar la casilla correspondiente.

Como todo elemento de Blogger, puede ser eliminado pero para eso no basta borrar el includable ya que es uno de esos elementos "obligatorios", por más que lo borremos, volverá a aparecer. Para quitarlo, hay que eliminar el contenido y dejar las etiquetas del includable:

<b:includable id='shareButtons' var='post' />

Así, tal como está pensado, posee una serie de propiedades por defecto, algunas de las cuales podemos modificar pero no demasiado.

.post-share-buttons  {
display: inline-block;
margin: 0 0.5em !important;
vertical-align: middle;
width: 106px;
}
.share-button {
background: url("/img/share_buttons.png") no-repeat scroll left center transparent !important;
display: block;
float: left;
height: 22px;
overflow: hidden;
width: 21px;
}
a.share-button:hover {text-decoration: none;}
.share-button-link-text {
left: -999px;
position: absolute;
}
.sb-email {background-position: 0 0 !important;}
a.sb-email:hover {background-position: 0 -22px !important;}
a.sb-email:active {background-position: 0 -44px !important;}
.sb-blog {background-position: -21px 0 !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-blog:active {background-position: -21px -44px !important;}
.sb-twitter {background-position: -42px 0 !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-twitter:active {background-position: -42px -44px !important;}
.sb-facebook {background-position: -63px 0 !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-facebook:active {background-position: -63px -44px !important;}
.sb-buzz {background-position: -84px 0 !important;width:22px;}
a.sb-buzz:hover {background-position: -84px -22px !important;}
a.sb-buzz:active {background-position: -84px -44px !important;}

La más simple es ocultar cualquiera de ellos con display:none aunque, como se trata de un sprite, si ocultamos el primero o el último, se perderá el efecto de "curva" de esos botones; es decir, esta pensado para ser usado así como viene; de todos modos:

.sb-email {display:none;} /* oculta el ícono de email */
.sb-blog {display:none;} /* oculta el ícono de blog */
.sb-twitter {display:none;} /* oculta el ícono de Twitter */
.sb-facebook {display:none;} /* oculta el ícono de Facebook */
.sb-buzz {display:none;} /* oculta el ícono de Goggle Buzz */

El rectángulo que los contiene tiene un clase CSS que es posible sobrescribir y de esa manera, posicionarlo con cierta exactitud donde se nos ocurra. Para eso, me parece que lo mejor es utilizar las propiedades de posición (left top right bottom) aunque podría usarse cualquier otra:

.post-share-buttons {
display: block;
margin: 0 auto !important;
position: relative;
top: -30px;
}

Aunque no lo utilicemos y sigamos empleando nuestros propios íconos para compartir, podríamos sacar ventaja de ellos porque nos ayudará a simplificar nuestros códigos y a darles una mejor terminación. Por ejemplo, en una entrada anterior se mostraba la forma de agregar esos botones y bastaría cambiar un poco ese código:

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToFacebookMsg + &quot;\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Compartir en Facebook' target='_blank' rel='nofollow'> texto/imagen Facebook </a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' title='Enviar a Twitter' target='_blank' rel='nofollow'> texto/imagen Twitter </a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToBuzzMsg + &quot;\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' title='Compartir con Google Buzz' target='_blank'> texto/imagen Google Buzz </a>

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' title='Enviar por correo electrónico' target='_blank' rel='nofollow'> texto/imagen EMail </a>

Y agregamos el de enviar al blog:

<a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.blogThisMsg + &quot;\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' title='Escribe un blog' target='_blank' rel='nofollow'> texto/imagen Blogger </a>

Para que esto funcione debemos habilitar la opción y eliminar <b:include data='post' name='shareButtons'/> de nuestra plantilla.

No hay mucho más que eso excepto, esperar que ahora que ya está funcionando, reparen el problema con Facebook ya que, vaya uno a saber por qué motivo, de un tiempo a esta parte no se muestra el resumen de las entradas tal como ocurría antes y entonces, el compartir se transforma en algo bastante precario.