mercredi 22 octobre 2014

Blogger - Blogspot : articles similaires, related posts widget, avec ou sans images



Afficher les articles similaires sur vos pages permet de retenir et fidéliser plus facilement vos visiteurs, et ce d'autant plus que l'information affichée et proposée dans des liens d'articles semblables représentent vraisemblablement de l'information additionnelle, complémentaire et adaptée à ce que vos visiteurs était premièrement venus chercher sur votre site.

Un widget d'articles similaires développé à partir de jquery, initialement par More Tech Tips, et modifié quelque peu par nos soins, vous permettra d'afficher en bas de vos articles les posts similaires calculés en fonction des tags, sans lien et sans pub, avec leur image thumbnails, ou sans!

Afficher les articles similaires simplement

La manœuvre est on ne peut plus simple : éditez votre template Blogger et ajoutez les appels css et javascript suivants* :

Bloc 1

<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>

Cherchez ensuite la place que vous désirez au sein de votre code d'article, par exemple, après la ligne contenant <data:post.body/> (pour que les articles similaires s'ajoutent à la fin de vos posts)

Bloc 2

<div class="related-posts-widget">
&lt;!-- {
blog_url:'http://www.psyblogs.net'
,max_posts:3
,related_title:'Articles similaires'
} --&gt;
loading..
</div>

Prenez bien soin de remplacer l'adresse http://www.psyblogs.net par l'adresse de votre site. Et voilà, votre widget est prêt et vos articles similaires s'affichent! N'oubliez pas aussi d'insérer ce bloc entre des balises <b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if> si vous ne souhaitez le voir apparaître que sur vos articles (et pas en accueil ni en pages statiques).

Notez que, cerise sur le gâteau, lorsque vous n'identifierez pas certains de vos articles par des tags (par exemple, pages de sommaires ou récapitulatifs, etc...), le widget affichera alors à la place, les derniers articles de votre site. Vous pouvez ainsi contrôler les pages réellement "articles" pour leur afficher les articles similaires, et vos pages statiques, de sorte à afficher vos articles récents.

* notez également que les appels javascript jquery ne sont pas nécessaires si vous appelez déjà une bibliothèque jquery, ce qui est courant dans les blogspots Blogger: vous pouvez testez la réponse du widget en ôtant la ligne d'appel jquery si vous possédez déjà une bibliothèque (un autre appel) jquery, pour vous assurer de la compatibilité de celle-ci.

Customisation

Bien entendu, les liens et images des related posts s'affichent de façon brute, et vous seriez peut-être intéressé à donner plus de profondeur et d'esthétique à votre widget Articles similaires.

Vous pouvez alors modifier votre style css (i-e. entre les balises de <styles>) en ajoutant (après les appels css réalisés par le premier bloc de code ci-dessus), par exemple : 

.rpw li {width:32%; border:1px solid #ccc;}
.rpw img {float:left;margin-left:2px;margin-top:2px;}
.rpw strong {margin:5px;font-size:14px;}

Cet exemple donnera à votre widget d'articles similaires un aspect dont vous pouvez voir une démonstration sur le site des records du monde, par exemple, à la page de l'animal le plus grand de tous les temps (non, ce n'est pas la baleine bleue).

Afficher seulement les liens, sans images

Ajoutez simplement ",thumbs:0" à l'appel javascript dans le bloc 2, après la ligne ,related_title:'Articles similaires'. Nous vous conseillons également d'ignorer le style par défaut, dans ce cas, en ôtant la ligne d'appel css du bloc 1.

Plus d'articles / moins d'articles

Modifiez le nombre d'articles dans le bloc 2

Effet javascript Jquery et autres adaptations.

Puisque le widget utilise la bibliothèque javascript, il permet également de se servir de nombreux effets de transitions, en même temps qu'il offre un panel de modifications conséquents : avec ou sans images, stylé horizontal ou vertical, articles liés ou récents, etc... N'hésitez pas à vous reporter au script initial pour modifier à votre convenance votre widget d'articles récents.


0 commentaires:

Enregistrer un commentaire