Inicio > Redes Sociales > Hacer que Blogger que te mencione al compartir tu post en Twitter

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.

Anuncios
  1. 12 febrero, 2013 en 12:02 am

    Hola,
    Tengo una duda. En la parte que hay que cambiar, concretamente el botón de twitter, el código es este:
    “para el botón de twitter:
    Tweet”

    Mi pregunta es ¿Por qué hay que poner “nombre de usuario google”? ¿No hay otra forma?
    Muchas gracias de antemano.

    Me gusta

    • 12 febrero, 2013 en 12:20 am

      No se si has llegado a leer el añadido que hay justo al final del post.

      En ese añadido comento mis dudas respecto a este mismo punto y aclaro el concepto de hacer que el botón te mencione.
      No puedo ser más claro, lo siento, en estos temas del HTML yo también tengo mis dudas.

      En cualquier caso a mi me funciona tal y como está descrito.

      Me gusta

  2. 12 febrero, 2013 en 12:58 am

    No lo había visto, disculpa. Voy a ir probándolo. Muchísimas gracias.

    Me gusta

  3. 26 abril, 2013 en 6:09 am

    fantastico me funciono
    puedo copiar parte del post y pegarlo en mi blog? y claro que pongo un link completo a este blog.
    avisame
    gracias

    Me gusta

    • 26 abril, 2013 en 6:41 am

      Hola, me alegro de que te funcionara.
      Quizás lo correcto sea explicar a tu manera tu experiencia, lo que te ha llevado a querer hacer esta mejora en tu blog, cómo encontraste la solución con el enlace a mi blog y luego que transcribas la parte del texto que necesites poniéndolo entre comillado y encursiva para que se distinga el texto copiado.
      Es lo que yo haría.
      Por supuesto agradecerte el interés y que compartas el contenido.
      Saludos

      Me gusta

  4. 24 noviembre, 2013 en 11:03 pm

    No logro hacerlo con Blogger 2013 ¿podías ayudarme por favor? Tengo la plantilla Awesone Inc. Gracias de antemano.

    Me gusta

    • 25 noviembre, 2013 en 7:32 am

      Diego no se qué diferencias puede haber en blogger 2013, si ha cambiado el código de las plantillas o sigue siendo el mismo.

      En este post cuento lo que yo hice investigando en su momento y la plantilla que tengas instalada no debe de influir para nada en esto que se explica.
      Si me cuentas el problema a lo mejor puedo ayudarte pero no estoy muy seguro de poder hacerlo.

      Saludos

      Me gusta

  1. 15 enero, 2013 en 1:00 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: