Tuto mettre des thumbs aux trackbacks Wordpress

Puisque je n’ai trouvée aucun plugin wordpress pour mettre des thumbs à mes trackback, j’ai codée une petite fonction dont je vous partage les sources.

En pratique ce tutorial vous permettra d’afficher automatiquement une mini capture d’écran de la page d’un site référent lorsque vous obtenez un trackback/pingback vers un article de votre blog Wordpress. Exemples ici et là.

Image : Trackbacks imagés sur Twun.ch – Twunch

Avantages des trackbacks avec image ?

1. Pour celui qui vous fait un lien : Son blog mis en avant dans votre page grâce à la vignette imagée, descriptif + titre du trackback agira comme une petite pub de remerciement. Selon la notoriété de votre blog il se peut même que vous lui rapportiez + de visiteurs qu’il ne vous en envoi via votre citation dans son article.

2. Pour le visiteur/lecteur : D’un point de vue utilisateur la mise en avant des pingback de façon claire et esthétique sera d’une utilité appréciable puisque cela permettra au lecteur de découvrir de nouvelles sources externes sur lesquelles continuer à lire et approfondir les sujets de vos articles.

3. Pour vous : Mettre en place cette technique/tutorial sur votre blog vous offrira également quelques avantages.. Je pense notamment au référencement en utilisant par exemple le titre du trackback en h3, h4 ou h5 au lieu d’une simple balise p. Mais aussi, selon la logique du point 1. Il est possible que travailler vos trackback puisse vous faire gagner d’avantages de backlinks. (qui à dis nerf de guerre de Wikio ?)

Installation des Trackback Thumbs

Etape 1 : Création de la fonction imgTrackback

Copier-coller ce code PHP à la fin de votre fichier functions.php dans le répertoire de votre thème Wordpress, juste avant le dernier ?>.

function imgTrackback($postid) {

 global $wpdb;

 $pings = $wpdb->get_results("SELECT comment_author, comment_author_url, comment_content, comment_ID FROM $wpdb->comments WHERE comment_post_ID = '$postid' AND comment_type = 'pingback' AND comment_approved = '1' ORDER BY comment_date DESC LIMIT 0 , 20");

 if (!$pings) {
 // echo "<a name='trackping' id='trackping'></a>";
 // echo "<div id='trackbacks-blog'>";
 // echo "<div class='no-trackback'>Aucun trackback</div>";
 // echo "</div>";
 }

 elseif ($pings) {
 echo "<a name='trackping' id='trackping'></a>";
 echo "<div id='trackbacks-blog'>";
 echo "<h3>Blogs - Pingbacks</h3>";
 foreach ($pings as $ping) {
 setup_postdata($ping);
 $tracktitre = $ping->comment_author;
 $trackurl = $ping->comment_author_url;
 $trackdesc = $ping->comment_content;
 $trackid = $ping->comment_ID;
 // $extapi = 'http://snapcasa.com/get.aspx?code=0000&size=s&url=' . $trackurl . '';
 $extapi = 'http://api.thumbalizr.com/?url=' . $trackurl . '&width=140';

 echo "<div class='trackback-bloc'><div class='clearfix'>
 <div class='trackback-image'><a href='" . $trackurl . "' title='" . $tracktitre . "' target='_blank'>
 <img src='" . $extapi . "' alt='Pingback " . $trackid . "' /></a></div> <div class='trackback-text'><h4>" . $tracktitre . "</h4> <p>" . $trackdesc . "</p> </div></div></div>";

 } echo "</div>";
 }
}

Instructions : La ligne n°5 va récupérer les pingbacks dans votre base de donnée, vous avez la possibilité de trier les résultats du plus ancien/récent en changeant la condition ORDER BY comment_date par ASC ou DESC. Vous pouvez également paramétrer le nombre de résultats à afficher en modifiant le LIMIT par une autre valeure que 20.

Lignes 8, 9, 10 et 11 : Si vous souhaitez afficher un message lorsque il n’y a aucun pingback/trackback sur vos articles, il vous suffit de dé-commenter les 4 lignes en supprimant les doubles slash //.

Lignes 24, 25 : Ici se trouve la variable $extapi qui appelle l’api de votre générateur de thumbnails préféré. Je vous l’ai mise de base avec l’api de Thumbalizr.. vous pouvez bien évidemment configurer à votre guise quel générateur utiliser, et y passer l’url du trackback avec $trackurl. (j’évoque en fin d’article les points forts/faibles de 2 d’entre eux).

Etape 2 : Insérer les Trackback imagés dans vos pages

Dans le fichier single.php insérer cette ligne de code à l’endroit où vous souhaitez faire ressortir les trackbacks imagés. Idéalement juste après le </div> end post, ou juste avant comments_template();

<?php imgTrackback($post->ID); ?>

A ce stade vous devriez déjà pouvoir constater que votre patience à payé et que la technique fonctionne sur votre blog.. certes c’est désordonné et relativement peu élégant mais le résultat est là ! Profitons du laps de temps de génération des thumbs pour mettre en forme tout ça.

Etape 3 : Donnez du Style (.css) a vos Trackback WP

Intégrez ces quelques lignes de CSS à la fin du fichier style.css de votre thème Wordpress. Et surtout amusez-vous en y ajoutant quelques propriétés CSS3 ;)

/* Trackback images */

#trackbacks-blog {
 margin-top:20px;
 padding:20px 0;
 background:#FFF;
}

#trackbacks-blog h3 {
 margin: 0;
 padding:0 0 15px 15px;
 font-size:22px;
 font-weight:bold;
 color:#634168;
}

.trackback-bloc {
 margin-bottom:10px;
}

.trackback-image {
 margin:0 0 10px 17px;
 position:relative;
 float: left;
 width:140px;
 height:105px;
 text-align:center;
}

.trackback-text {
 margin: 0 17px 0 0;
 position:relative;
 float: right;
 width: 380px;
}

.trackback-text h4 {
 margin: 0 0 10px 0;
 padding:5px 0 5px 8px;
 font-size:13px;
 font-weight:bold;
 color:#FFF;
 background:#C40D5B;
}

.no-trackback {
 margin: 0 15px;
 padding:5px 0;
 font-size:13px;
 font-weight:bold;
}

/* FIN Trackbacks images */

Etape 4 : Sépaer les trackbacks et les commentaires

Un dernier petit effort pour enlever (si ce ne l’est pas de base) les trackbacks / pingbacks qui sont mélangés à vos commentaires WP.. 2 façon de faire.

Dans les vieux thèmes wordpress

Soit vous avez un thème ancestral qui a été créé avant la version 2.8 de Wordpress dans ce cas changez de thème il est probable que vous devriez vous y prendre comme ceci :

Ouvrir le fichier comments.php à la recherche de cette ligne :

<?php foreach ($comments as $comment) : ?>

Juste après celle-ci, collez ceci :

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

Cherchez maintenant :

<?php endforeach; /* end for each comment */ ?>

et copiez avant la ligne en question :

<?php } else { $trackback = true; } ?>

Pour les nouveaux thèmes wordpress

Soit vous avez de la chance d’utiliser un thème wordpress codé avec les dernières « normes » et il vous suffit de remplacer (dans comments.php) ceci :

<?php wp_list_comments(); ?>

Par :

<?php wp_list_comments( 'type=comment' ); ?>

Choix du générateur de thumbnails

Il existe une multitude de générateurs de thumbnails gratuits jusqu’à une certaine limite. J’en ai pour ma part tester deux, Snapcasa.com et Thumbalizr.com.. les 2 ont l’avantage de pouvoir prendre une capture d’une page interne d’un site (et non juste sa home page) ce qui est adapté à notre cas.

J’ai laissée tourner le 1^er un bon mois car malgré qu’il faille obligatoirement créer un compte il propose la génération jusqu’à 500′000 thumbs par mois sans watermark (la petite pub sur la thumb) ce qui est rare en free plan. Malheureusement la rapidité et l’exactitude n’étaient pas au rendez-vous.. il ne générait pas d’image pour la moitié des trackbacks.

Thumbalizr quant à lui peut être utilisé sans inscription (c’est d’ailleurs celui que j’ai intégrée par défaut dans le code de ce tuto pour qu’il soit prêt à l’emploi). Il est cependant intéressant de créer un compte gratuit chez eux pour pouvoir télécharger le script qui vous permettra de mettre en cache localement en PHP les images générées. Aidez-vous de l’API Thumbalizr pour connaître les limites et différents paramètres de personnalisation.

Trackbacks Thumbs mon 1er turoriel WP

J’espère que ce tutoriel vous sera utile et si vous décidez de l’appliquer à votre blog Wordpress partager-nous le résultats en commentaire ! :] Ceci était mon premier billet dans la catégorie développement, il y en aura d’autres mais pas forcément en rapport avec Wordpress ni même avec PHP.. restez à l’écoute [flux].

Note : Tous le long de l’article je parle de trackbacks mais en réalité les backlinks de blogs sont des pingbacks. Les trackbacks sont surtout créés par la connerie de ubervu social comments intégré à wordpress.. Pour comprendre la différance entre trackback et pingback un bon article du Journal du Net.

Suggestion : En modifiant quelque peut la fonction du point 1. vous pouvez afficher l’image de votre dernier pingback (tout article confondu) dans votre sidebare wordpress. C’est sympa aussi ;)