Spip : plugin ou pas plugin ?

Accueil / Articles / Spip : plugin ou pas plugin ?
Spip : plugin ou pas plugin ?

Article publié le 31 janvier 2014  Mot(s) clé :   Spip  Enregistrer au format PDF   Version PDF

Lorsque l’on cherche une fonctionnalité qui n’est pas implantée dans le core de Spip, on se tourne automatiquement vers la vaste bibliothèque de plugins. Parfois cela convient, mais dans certains cas, on peut s’en passer. Exemples.

Le plugin "social Tags"

J’ai plus d’une fois utilisé le plugin "Social Tags", qui globalement fonctionne assez bien. Mais est-ce vraiment nécessaire de le mettre en place ?

Ce plugin offre la possibilité d’afficher sur son site une foule de liens vers des réseaux sociaux. Or, me semble-t-il, de nos jours, 3 réseaux sont globalement utilisés ; Facebook, Twitter, et Google +

Et peut-être que dans un an, un nouveau réseau sera apparu, et l’un de ces trois que je viens de citer ne sera plus utilisé.

L’aspect des icônes et des liens vers les réseaux obéit à certaines modes, qui évoluent assez vite. (Faut-il suivre la mode ? Ceci est un autre débat...)

Sans compter que la mise en place des CSS n’est pas immédiate : le plugin ajoute une DIV, qu’il convient d’ajuster. On peut y passer un certain temps.

Pour la refonte de ce site, j’ai choisi d’utiliser les liens directs proposés par ces trois réseaux pour afficher les boutons correspondants.

Pour Facebook

Toutes les indications se trouvent sur cette page :

https://developers.facebook.com/docs/plugins/like-button

Ce qui nous donne :

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Puis le lien pour afficher le bouton :

<div class="fb-like" data-href="#URL_ARTICLE" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

L’indication est pour un site Spip, et donc l’URL de l’article à recommandé est passé avec les balises Spip (data-href="#URL_ARTICLE")

Pour Twitter :

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Enfin pour Google +

<!-- Placez cette balise où vous souhaitez faire apparaître le gadget Bouton +1. -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>

<!-- Placez cette balise après la dernière balise Bouton +1. -->
<script type="text/javascript">
 window.___gcfg = {lang: 'fr'};

 (function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/platform.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>

Le résultat est visible en haut de l’article.

Images responsives

L’un des objectifs de la refonte de mon site était de le rendre responsive et fluide. Globalement tout fonctionnait bien, sauf pour les images insérées dans les articles de Spip, qui gardaient une taille fixe.

J’ai voulu utiliser le plugin Adaptives Images, très complet pour régler la question. Il offre en particulier la possibilité d’afficher une image de remplacement lorsque la taille de l’écran devient trop petite.

Oui mais... Le plugin agissait sur tout le site, en particulier sur mon "Slider Responsive" qui n’avait pas besoin du plugin.

En cherchant, j’ai trouvé qu’une instruction CSS pouvait régler mon problème. Voici la code que j’ai utilisé :

.texte img {vertical-align:middle; margin-right:1em; max-width:100%;height:auto;}

la solution consiste à donner à img un max-width de 100%, et une hauteur automatique. L’image se redimensionne automatiquement.

Je n’ai donc pas utilisé le plugin Adaptives Images

Conclusion

Mon propos n’est pas de critiquer. Je remercie évidemment ceux qui développent ces bouts de programme additionnels. Je souligne simplement qu’ils doivent être utilisés à bon escient, et pas automatiquement.

Ces articles peuvent vous intéresser