6 décembre 2017

Ajouter des liens vers des articles similaires à la fin d'un article Blogger



Petite introduction avant de t'expliquer comment ajouter des liens vers les articles similaires dans blogger. Alors ici, tu pourras trouver tout ce qui pourrait alimenter (un peu) un geek. Je ne me qualifierais plus aujourd'hui comme un geek, mais je l'ai été. Du coup, il y a des restes que je ne peux pas renier. Et puis il faut bien que je garde des traces des résultats de mes recherches pour gagner du temps la prochaine fois que la situation se présente. Du coup, ici, je te parlerais aussi bien de programmation (astuces sur blogger, wordpress, HTML, CSS, JS, etc.), d'équipements techno, que de films ou de livres. Et l'article du jour est un bon exemple. J'ai passé du temps à chercher une solution, à comparer les possibilités pour finalement arriver à un résultat qui me satisfait. Donc, j'en prend note, et je suis sympa, je partage.

Un beau jour, Melissa vient me voir et me dit "Hé, je voudrais bien avoir des propositions d'articles liés à celui du jour a la fin de mes posts, tu peux me le faire". Youpi, un nouvel os à ronger - j'aime bien améliorer petit à petit nos blogs respectifs, les rendre plus dynamiques et la navigation plus facile, le tout pour ton confort à toi, cher lecteur (et lectrice, bien sûr). Je sais bien que parmi vous il y en a d'ailleurs plus d'un/une qui sont aussi blogueurs, et que c'est pas toujours évident de s'y retrouver dans le bazar des outils et autres codes. Pourtant ça reste faisable et tu peux t'en sortir avec un très bon "fait-maison", crois-moi. Bref, comme je suis sympa, je partage : voici comment je m'y suis pris pour mettre des suggestions d'articles liées au post en lecture, sur blogger.

Le choix

Après avoir questionné mon partenaire depuis toujours (Google, bien entendu - c'est qu'il en sait, des choses), je me suis trouvé confronté à 2 choix : soit un plugin, soit un bout de code à intégrer au modèle.

L'avantage d'un service extérieur comme Linkwithin, est que c'est très facile. On renseigne certains paramètres (le nom du blog, la plateforme sur laquelle on travaille, le nombre de miniatures à afficher) et le tour est joué. Très facile, mais trop limité.
Un des inconvénients est qu'il aura besoin de se connecter au site pour récupérer un script qui fera le travail. Du coup, risque de ralentissement dans le chargement de ton propre site.
Encore un inconvénient, le code est difficilement personnalisable. C'est devenu un inconvénient quand Melissa m'a dit qu'elle voulait que les miniatures soient rondes, comme sur le site de sa copine Lucie (dont elle est fan et qui, selon elle, est la grande prêtresse de la blogo).

Donc mon choix s'est tourné vers le code à intégrer et customiser dans le thème blogspot.



Le code

Me voilà de retour pour une petite papote avec mon pote Google, histoire de chercher des exemples de code. Après tout, je ne dois pas être le seul à chercher ce genre de chose, si ? J'allais quand même pas pondre un code déjà écrit ! Un vrai fainéant je vous dis, le moins j'en fais, le mieux je me porte.
Bref, je suis tombé sur le site CodeItPretty qui proposait une version personnalisable et très bien écrite. Voici un peu son fonctionnement : il va lire les libellés de l'article en cours, et faire une recherche sur les 500 derniers articles pour voir si d'autres articles le contiennent. S'il en trouvent au minimum 3, il les affiche (dans la limite de 5). Ces paramètres sont modifiables, j'ai mis des commentaires dans le code ci-dessous pour t'éclairer.

Seul bémol, ce code ne fonctionne pas avec les thèmes dynamiques de blogger et il faut que les libellés soient visibles dans les articles.

NB : Surtout, avant toute modification du thème, on n'oublie pas de le sauvegarder !


<!-- DEBUT DU WIDGET RELATED POSTS -->
<b:if cond='data:blog.pageType == "item"'>
<!-- cette première ligne fera que le widget ne s'affichera que si tu te trouves sur un article -->    
<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}
 
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
}
</style>
    
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
 
//<![CDATA[
$(document).ready(function() {
    
    
    
    //OPTIONS DISPONIBLES
    //pensez à bien laisser les ; a la fin de chaques lignes
    
    
    var maxSearched = 500;     //combien d'articles seront balayés par le programme 
    var minimum = 3;           //combien d'articles seront affichés au MINIMUM
    var maximum = 5;           //combien d'articles seront affichés au MAXIMUM
    var imageSize = 150;       //taille de l'image affichée
    var roundImages = false;   //est-ce que les images seront rondes (true ou false)
    var relatedTitle = true;   //est-ce qu'on affiche un titre au gadget (true ou false)
    var labelInTitle = true;   //est-ce qu'on met les titre des articles (true ou false) 
    var relatedTitleText = "Ces articles pourraient vous intéresser"; //le titre du gadget 
    var defaultImage = "";     //si on affiche une image par défaut, mettre son URL
    var campaignTracking = false;   //est-ce qu'on fait du tracking via google Anlytics
    var campaignSource = "";    //les paramètres Google Analytics
    var campaignMedium = ""; 
    var campaignName = ""; 
    var insertBefore = $('.post-footer');  //l'emplacement du gadget
    
   // NE PAS MODIFIER LE CODE ICI
 
var labels=[];var label;var alternateLabel;var minposts=minimum-1;var postlabels=$(".post-labels a");if(postlabels.length===1){label=postlabels.text().trim()}else if(postlabels.length>1){$(postlabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css("max-width",imageSize);$(".related-posts ul li img").css({"max-width":imageSize,height:imageSize});if(roundImages===true){$(".related-posts ul li img").css("border-radius","50%")}}})}
});
//]]>
</script>
    
</b:if>
<!-- FIN DU CODE RELATED POSTS -->


Il ne reste plus qu'à insérer ce bout de code à la fin de votre modèle HTML, juste avant la balise </body>
Et voilà, le tour est joué, te voilà avec des suggestions au bas de tes articles, liées au thème de celui qui est en lecture !




Au moment ou j'écris ce post, il n'y a pas assez d'articles dans chaque catégorie pour que le gadget s'affiche sur tout les articles du blog. Mais, si ce type de petite astuce blogesque t'intéresse, il pourrait y en avoir d'autres bientôt, n'hésite donc pas à me faire signe et à me confier tes attentes... ou tes problèmes ! En attendant, si tu veux voir comment ça rend pour de vrai, va donc faire un tour sur le blog de Melissa et regarde bien à la fin d'un de ses articles.

Si ce code t'a été utile ou si tu comptes l'utiliser sur ton blog, n'hésite pas à me laisser un petit commentaire, ça me fait toujours plaisir.

Golden Daddy

13 commentaires:

  1. Coucou Denis,

    Ah ! Chouette un article dans cette catégorie sur ton blog, j'en suis déjà fan !
    Je reconnais avoir un côté geek aussi. j'ai toujours aimé ça, les ordis, savoir comment ça fonctionne et puis quand est venu le jour où j'ai ouvert mon blog, je me suis retrouvée un peu perdue et puis je n'aimais pas le visuel du blog, sans âme.
    Alors j'en ai passé du temps avec mon ami Google à chercher tout un tas d'astuces pour me créer mon espace à moi, un truc qui me ressemble. J'ai découvert petit à petit un langage que je ne maîtrisais pas trop et puis finalement j'y suis arrivée. J'ai réussi une bonne partie de ce que je voulais ici tout en restant très objective, je connais mes limites.

    Je suis quelqu'un qui aime faire les choses seule, sans doute par fierté mais également parce que ça m'éclate. Je suis souvent coincée sur des trucs que je souhaite mettre en place, par moment ça fonctionne et puis d'autre fois non et là j'ai besoin d'une aide extérieur, n'est-ce pas ?

    Dernièrement, j'essaie tant bien que mal de mettre en place une vraie newsletter pour mes abonné(s). Celle que je possède pour l'instant ne prend pas en compte les abonnements et les abonné(e)s ne reçoivent pas de courrier quand un nouvel article est sorti... Bref, ça me saoule clairement. Donc pour l'instant c'est un échec cuisant !

    Mais le coup des propositions d'articles similaires en fin de page, j'ai réussi à l'installer celui-ci il y a quelque temps de ça et là ça marche j'en suis fière !

    Merci pour tes précieux conseils !

    Sophie

    RépondreSupprimer
    Réponses
    1. Salut Sophie !

      C'est un joli chemin que tu as suivi là. J'avoue avoir eu un coup de pouce lors de mes études. Mais la pratique reste la meilleure méthode pour apprendre. J'ai beaucoup appris dans ces domaines avec le blog de Melissa et le mien, ce qui m'a permis de proposer des accompagnements à mes clients (et aussi aux copains comme JeremWorld et son nouveau site JeremWorld.com). C'est une belle aventure qu'il a commencé là, et je suis très fier de lui avoir apporté mon expérience pour l'aider.

      C'est vrai que cet article est un peu un test, pour savoir si la catégorie trouvera son public et je suis content de t'y compter ;-)

      A suivre donc !

      Pour la newsletter, j'utilise le service de Google "feedburner". L'interface est un peu vieillotte, mais le résultat semble fonctionner. Il se base sur le flux RSS du blog pour détecter les nouveaux articles et envoi les liens aux inscrits.

      Supprimer
    2. Merci pour ta réponse,

      J'utilise aussi feedburner, mais cela ne fonctionne pas chez moi...
      Bon je sens que je vais y passer de nombreuses mais ça sera pour réaliser un chouette truc, enfin j'espère !

      Supprimer
    3. Coucou vous ! Pour ma part cela s'est directement via mon template mais j'espère que nous parlons de la même chose ;-)
      Pour la News lettre Soso je ne pourrais pas t'aider comme pour installer ton template et j'en suis désolée. Mais en tout cas j'ai bien aimé t'aider à te créer ton blog à cette époque où je venais d'apprendre ma grossesse. Je m'en rappèlerai toujours 😉 Gros bisous

      Supprimer
  2. Linkwithin est vraiment bien fait. Dernièrement, je me suis mise à Shareaholic qui en plus de linker vers d'autres articles, permet de mettre de jolis logos de partage. C'est gratuit aussi et simple à mettre en place sur Blogger (pour autant qu'on sait toucher au code).

    RépondreSupprimer
    Réponses
    1. Coucou Cleophis et merci pour ton partage.
      Je ne connaissais pas Shareaholic, mais visiblement, il incruste aussi des pubs dans les suggestions ce qui est un peu dommage.
      Les boutons de partage sont par contre super sympa !

      A bientôt !

      Supprimer
    2. Sur mon blog, il n'insère aucune pub, j'ai décoché l'option pour gagner de l'argent avec les pubs.

      Supprimer
    3. Visiblement ils en gagnent sur ton dos alors. C'est en regardant sur ton blog que j'ai vu les pubs insérées. Je t'ai envoyé une copie d'écran sur twitter...

      Supprimer
    4. Ah les méchants, ils avaient changé les options !! Tout est rentré dans l'ordre. Conclusion: Shareaholic c'est bien mais à vérifier régulièrement lol

      Supprimer
  3. Merci beaucoup pour cet article, je vais surement me lancer grâce à toi.
    Un peu comme tout le monde, au début, j'ai vraiment galeré pour faire des modifications sur le thème de mon blog... Rien que pour comprendre comment changer la police des titres d'articles, ça m'a pris une soirée. Puis finalement, à force (et grâce à notre ami commun, Google), on s'en sort :)

    Merci et continues à publier dans cette rubrique, elle est au top !

    RépondreSupprimer
  4. Mais mille mercis ! Cela faisait un bon moment que je cherchais CE code pour mettre des articles du même libellé en suggestion ! Et cela fonctionne à merveille ;)

    RépondreSupprimer
    Réponses
    1. Avec plaisir Estelle. Je suis content d'avoir pu t'aider.

      Supprimer

L'espace des commentaires est là pour te permettre d'exprimer ton opinion sur le sujet en cours, de proposer des alternatives à mes écrits (je n'ai pas la science infuse) ou juste de faire part de ton humeur. Par contre, si tu viens ici juste pour déverser de la colère, tartiner ta "pseudo-culture" ou si tu n'es pas d'humeur à débattre intelligemment, passe ton chemin ! On est là entre potes.