Mostrar trackbacks de Twitter en las entradas de Blogger

Los trackbacks son menciones desde un sitio a otro con el fin de promover los blogs de manera mas fácil. En Blogger no existe un sistema de visualización de trackbacks propio por lo que es un poco dificil conocer quién hace referencias a un sitio.

Existe un plugin llamado Twitter Trackbacks, un complemento basado en jQuery el cual permite integrar los trackbacks desde Twitter a algún sitio web. He hecho una adaptación al script para que funcione de manera automática en Blogger y no sea necesaria ninguna intervención.

El Tutorial:

Paso 1: Añadiendo jQuery y el script:

En "Diseño | Edición HTML" deberás buscar el siguiente código:

</head>

Arriba de este pega el siguiente:

<script type="text/javascript" src="http://dl.dropbox.com/u/28164309/AyudaBloggers/APPS/jquery.twittertrackbacks-1.0.min.js"></script>
<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/Recompressed/jquery151.min.js' type='text/javascript'></script>

Si ya tienes instalado jQuery en tu plantilla deberás eliminar el código destacado.

Paso 2: Añadiendo los estilos:

Ahora busca la siguiente zona:

]]></b:skin>

Arriba de ésta pega el siguiente código:

ul.ttw-inner{
    padding:0;
    margin:0;
}
ul.ttw-inner li{
    border-bottom:silver 1px dotted;
    float:left;
    margin:1px 0 1px 0;
    padding:2px 2px 4px 2px;
    list-style-type:none;
    position:relative;
    height:48px;
    overflow:hidden;
    width:100%;
}

ul.ttw-inner span.ttw-author-img{
    display:block;
        padding:0;
    width:48px;
    height:48px;
    margin:0 5px 0 2px;
    left:0;
    position:absolute;
}
/* author name */
ul.ttw-inner strong a{
    margin-right:5px;
}
/* tweet body */
ul.ttw-inner span.ttw-body {
    display:block;
    margin-left:55px;
}
/* tweet content */
ul.ttw-inner span.ttw-content{}

/* tweet meta : date, reply, retweet line */
ul.ttw-inner span.ttw-meta {
    color:#999999;
    display:block;
    font-size:0.764em;
    margin:3px 0 0;
}
ul.ttw-inner span.ttw-meta a{
    color:#999999;
    text-decoration:none;
}
ul.ttw-inner span.ttw-meta a:hover{
    text-decoration:underline;
}

ul.ttw-inner a.ttw-reply { /* RESPONDER */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXL0f0Wtojge0bWJTnrxlstR6VOk-0M-6-l-7BlIoGCQesG6ezBcJ1edPl8jmvdYwGtzgWG5m_OMwbPeIeQUTjFzPYZNnlhtumbaCmAYMwfylGM5qwHRJHCwTwzQv89Wz1M5Jz3pInHY/s1600/icon-twitter-reply.png) no-repeat left;
padding-left:14px;
}

ul.ttw-inner a.ttw-retweet {  /* RETWITTEAR */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ctROOQEsdMmuhIJMTAuct6HlEYVjSAZxKRtMAFmTxWeGEmR6ge0nuWzJr9RFJ6ZMl-tYrcXXXhK42vIxgD1KIaQAUYUHfhT9RYtEUNw-i78bgBfh-NLvdqQVYKbVkCSQKX6XNdVhZbE/s1600/icon-twitter-retweet.png) no-repeat left;
padding-left:20px;
}


/*Hashtags -Ejemplo: #fail-*/

ul.ttw-inner a.ttw-hashtag { color:#2d2d2d; }

Paso 3: Añadiendo los trackbacks:

Ahora deberás buscar algún sitio en donde se mostrarán los trackbacks, mostraré un ejemplo de cómo situarlos debajo de cada entrada.

Busca en tu plantilla el siguiente código:

<data:post.body/>

Debajo de éste pega el siguiente:

<b:if cond='data:blog.pageType == "item"'><script type="text/javascript">
$(document).ready(function(){
   $('div.trackbacks-blogger').twitterTrackbacks({
      url:'<data:post.url/>'
      ,n:8
      ,show_n:0
      ,inf_tip:1
   });
});
</script>
<div id="twitter-tweets">
<div class="trackbacks-blogger">Cargando trackbacks....</div>
</div></b:if>

Guarda los cambios y listo.

Importante: 

• Si los tweets se vén cortados o no se vén correctamente puedes aplicar CSS para corregir el alto y los paddings en el selector "ul.ttw-inner li".
• Si no hay tweets de una entrada no cargará el contenedor y por lo tanto el mensaje "Cargando trackbacks...." no desaparecerá. Puedes cambiar este texto por uno distinto o bien twittea cada entrada que no tenga un tweet.

Documentación sobre el script en : Twitter Trackbacks Widget.

Traducción del script por Ayuda Bloggers.