Twitter Trackbacks Backlinks de Twitter en tus entradas

Tweet

More Tech Tips! ha realizado un plugin que nos permite mostrar en nuestras entradas todos los backlinks o trackbaks que se producen sobre ellas.

Podemos enseñarlos de tres modos diferentes.



Su implementación es muy fácil, debemos agregar antes de </body> (recordad que debéis tener ya la librería JQuery cargada en vuestro blog)

<script type='text/javascript' src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>

Y hacemos la llamada según el ejemplo que queremos implementar:

►Demo 1 No es necesario ninguna llamada. Solo buscamos en nuestra plantilla <div class='post-footer-line-3'> y pegamos

<div class="twitter-trackbacks">cargando...</div>

►Demo 2 Buscamos en nuestra plantilla <div class='post-footer-line-3'> y pegamos

<div class="twitter-trackbacks" options="{
n:9
,show_n:3
,stay_time:8000
,animate:'height'
,inf_only:1
,inf_tip:1
}">cargando...</div>

Los parámetros que podemos ajustar

'n' ► Para limitar el numero de tweets a mostrar
'show_n' ► El numero de tweets que mostraremos a la vez.
'stay_time' ► El tiempo que se mostraran (8 segundos en el ejemplo).
'inf_only' ► En 1 para mostrar solo tweets de "personas influyentes".
'inf_tip' ► En 1 para mostrar un tool tip con el nivel de influencia.

►Demo 3 Este debemos colocarlo justo detrás de donde pusimos el plugin jquery.twittertrackbacks-1.0.min.js y colocamos

<script type='text/javascript'>
$(document).ready(function(){
$('div.my-trackbacks').twitterTrackbacks({
n:8
,show_n:0
,inf_tip:1
});
});
</script>

Los parámetros a elegir indican lo mismo que los de la Demo 2.

Buscamos en nuestra plantilla <div class='post-footer-line-3'> y pegamos

<div class="twitter-trackbacks">cargando...</div>

El CSS que nos permite darle nuestro estilo (aquí os expongo el que veis en las demos)

/* Estilo de la lista */
ul.ttw-inner{
border:silver 1px solid;
height:48px;
padding:4px;
overflow:hidden;
margin:0;
}
ul.ttw-inner li{
float:left;
margin:0;
list-style-type:none;
position:relative;
}
/* Imagen del autor */
ul.ttw-inner span.ttw-author-img{
display:block;
width:48px;
height:48px;
margin:0 5px 0 0;
overflow:hidden;
left:0;
position:absolute;
}
/* Nombre del autor */
ul.ttw-inner strong a{
margin-right:5px;
}
/* Contenedor del tweet */
ul.ttw-inner span.ttw-body {
display:block;
margin-left:55px;
}
/* Contenido del tweet */
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;
}
/* Estilo para los replies */
ul.ttw-inner a.ttw-reply { }
/* Estilo para los links de los retweet */
ul.ttw-inner a.ttw-retweet { }
/* Estilo para los enlaces */
ul.ttw-inner a.ttw-link { }
/* Estilo para los links de usuarios @user */
ul.ttw-inner a.ttw-at { }
/* Estilo para los enlaces #hashtags */
ul.ttw-inner a.ttw-hashtag { }

/* Estilo para los tweets de los usuarios con influencia */
li.ttw-inf-0{}
/* ...... */
li.ttw-inf-10{}

/* Estilo para las imageness de los niveles de influencia */
li.ttw-inf-0 img{}
/* ...... */
li.ttw-inf-10 img{}

/* Estilo para los nombres de los niveles de influencia */
li.ttw-inf-0 strong{}
/* ...... */
li.ttw-inf-10 strong{}

Te recomendamos también

+ Artículos relacionados de Tutorial