Hacer que Blogger que te mencione al compartir tu post en Twitter

Hace unas semanas escribí un post sobre este mismo tema pero referido a WordPress.

El caso es que me ha sorprendido la enorme acogida que ha tenido y la gran cantidad de retuits que he visto de este post. Desde aquí mi gratitud a todos los que lo habéis compartido.

Hoy traigo algo similar pero más complicado. Esta vez hay que meterle mano al código HTML de la plantilla de Blogger para que funcione. Yo por lo menos no he encontrado otro modo más sencillo para hacer que Blogger te mencione en twitter al compartir tu post.

1- Lo primero que tenemos que hacer es abrir nuestro blog de blogger en modo de administrador y añadir, si todavía no lo hemos hecho, el widget para compartir nuestros post. En realidad es para que nuestros lectores puedan compartir nuestros post.

Para ello entramos en el blog como administradores y veremos a la izquierda un menú en el que poder ver la estadísitca del blog o personalizar su diseño.

La tercera opción por la cola es «diseño» y es en la que debemos entrar para activar el widget de compartir.

Para editar la plantilla hay que entrar en la opción indicada

En esta opción veremos la disposición de los widgets del blog y en el centro el que hace referencia a los mismos post. Pinchamos en su opción de editar y entraremos a activar las opciones que blogger nos ofrece en cada post.

Deberemos marcar «activar botones compartir» y más abajo podremos colocarlos en el orden necesario que es justo antes de las etiquetas, aunque en realidad este cambio no debería hacer falta.

2- Una vez hecho esto guardamos los cambios y volvemos a la pantalla de administración del blog, esta vez para entrar en la penúltima opción: «plantilla»

Aquí tenemos dos opciones: a) personalizar y b) edición de HTLM y en la esquina superior derecha un botón que se nos puede pasar desapercibido pero que es de lo más importante: el botón para hacer la copia de seguridad de la plantilla antes de comenzar los cambios. En realidad es el botón tanto para crear la copia de seguridad como para restaurarla.

En caso de tocar algo que no debíamos por error siempre podremos regresar al país de nunca jamás, es decir, a la plantilla original.

3 -Por lo tanto el tercer paso es hacer la copia de seguridad de la plantilla. Una vez hecha la copia de seguridad de la plantilla original y guardada a buen recaudo en varios discos en la nube y un par de pens entramos en la edición de HTML.

Primero nos advierte del peligro que corremos a lo que le contestamos que tenemos todas las vacunas en orden y pinchamos «continuar».

Al abrir la edición de la plantilla en HTML veremos una ventana en la que aparece una marca de verificación que dice: » Expandir plantillas de artilugios»

Es imprescindible activarla pues de lo contrario no veremos nada de lo que tenemos que editar.

4 –  Debemos localizar el trozo de código que describe el funcionamiento de los botones de compartir. Para eso movemos la barra de desplazamiento hasta casi el primer tercio y buscamos una masa grande de texto que comience de la siguiente manera:

«<div class=’clear’/>

</b:includable>
<b:includable id=’shareButtons’ var=’post’>»

Esta es la zona en la que se describe el funcionamiemto de los botones de compartir.

5- Localizar y separar el código de cada botón, comienzan con  «<b:if»  y terminan con «» puesto que están escritos uno a continuación de otros y de ese modo nos es muy complicado hacer lo que deseamos sin equivocarnos. Para ello basta con intercalar retornos de carro (tecla enter) para separar por párrafos cada botón.

El del compartir por email es el primero de todos y es este:

 <b:if cond=’data:top.showEmailButton’><a class=’goog-inline-block share-button sb-email’ expr:href=’data:post.sharePostUrl + &quot;&amp;target=email&quot;’ expr:title=’data:top.emailThisMsg’ target=’_blank’>
<span class=’share-button-link-text’><data:top.emailThisMsg/></span>
</a></b:if>

6-Una vez localizados y separados borramos el de twitter y el de Facebook. Si, no pasa nada, ahora mismo ponemos otros diferentes pero mejores.

Para que os sea más fácil os pongo como son.

Texto del botón de twitter que hay que borrar:

<b:if cond=’data:top.showTwitterButton’><a class=’goog-inline-block share-button sb-twitter’ expr:href=’data:post.sharePostUrl + &quot;&amp;target=twitter&quot;’ expr:title=’data:top.shareToTwitterMsg’ target=’_blank’><span class=’share-button-link-text’><data:top.shareToTwitterMsg/></span></a></b:if>

Texto del botón Facebook qeu hay que borrar:

<b:if cond=’data:top.showFacebookButton’><a class=’goog-inline-block share-button sb-facebook’ expr:href=’data:post.sharePostUrl + &quot;&amp;target=facebook&quot;’ expr:onclick=’&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;’ expr:title=’data:top.shareToFacebookMsg’ target=’_blank’><span class=’share-button-link-text’><data:top.shareToFacebookMsg/></span></a></b:if>

7-Localizar el código de cierre de los botones: justo antes de terminar el código, depués del botón de ORKUT, localizar la parte de cierre que dice:

</b:includable>
<b:includable id=’threaded_comment_js’ var=’post’>
<script async=’async’ expr:src=’data:post.commentSrc’ type=’text/javascript’/>
//

8- justo ante de esa parte incluir el sigiente código:

para el botón de twitter:
<a class=’twitter-share-button’ data-count=’horizontal’ data-lang=’es’ data-related=’nombre usuario google‘ data-via=’nombre de cuenta de twitter‘ href=’http://twitter.com/share’>Tweet

para el botón de Facebook:
<script src=’http://connect.facebook.net/es_ES/all.js#xfbml=1’/><fb:like font=» href=’http://nombreldeblog.blogspot.com/’ layout=’button_count’ send=’true’ show_faces=’true’ width=’168’/>

9- Guardar la plantilla y ya está.

Si no funciona algo será porque me he equivocado en algo o habéis metido el dedo en lugar equivocado. Volved a abrir la plantilla y repasarlo.

En caso necesario siempre se puede restaurar la plantilla y aquí no ha pasado nada.

Esto es lo que hecho yo ya dos veces en dos blgos diferentes y me ha funcionado. Para muestra un botón, basta con que vistéis esos blogs y miréis en el pie de un post:

Mi blog de fotógrafo

Blog de Bodas «Porque te casas»

 

NOTA IMPORTANTE:

Al escribir el post copié y pegué el código que logré hacer funcionar hace más de un año en uno de mis blogs y lo copié al otro cambiando sólo la mención de twitter (via «loquesea» ) y la url del blog.
Pero no medité sobre quién o por qué aparece la mención al usuario ni si ese usuario es de Google como yo rápidamente di por supuesto.

Ante la duda os hago un comentario y una reflexión: esto no es más que ediar una web, sin más. Es decir que igual que pongo un botón de Twitter puedo poner el de Linkedin o el de Pinterest (cosa que voy a hacer inmediatamente) a continuación de los botones que enseño en este post a modificar o añadir.
Es decir que para encontrar un botón de Twitter que funcione no tenéis más que acudir a vuestra cuenta de Twitter y cargar el código personalizado que más os guste, botón grande o pequeño, con contador o sin el, etc.
Lo mismo vale para el aspecto del botón de Facebook u otros que queráis añadir.

El proceso siempre es el mismo:

1-Lograr el código personalizado del botón que queramos insertar

2-leer estas instrucciones para encontrar la parte de la plantilla en cuyo lugar hay que insertarlo.

Espero que con esto quede un poco más claro si cabe.