plxMySocialNetwork - Partager vos articles sur les réseaux sociaux avec PluXml

Avec l'utilisation de PluXml, j'ai fait le constat que de nombreux utilisateurs du CMS utilisent des plugins pour partager leurs contenus sur les réseaux sociaux ou services divers (read-it-later / bookmark / ...).

En regardant ce qui existait, j'ai trouvé quelques plugins intéressant mais ils ne faisaient pas tout ce que j'attendais. Le seul moyen d'avoir ce que je voulais, c'était encore de le faire moi même.

Premièrement, j'ai pas envie d'intégrer les outils de Facebook, Twitter et cie parce que ça pose des questions de vie privée et de tracking des utilisateurs. Ensuite, il n'y a pas besoin de récupérer des scripts sur différents sites pour finir d'afficher la page. Il est possible d'obtenir un résultat identique avec de simples liens en HTML et avec un peu de CSS. En plus, une partie des visiteurs n'activent pas Javascript ou utilisent des extensions pour bloquer les traqueurs ce qui rend certains plugins inutiles. Pour finir, aucun ne gérait Diaspora*.

C'est secondaire mais le style du plugin ne me convenait pas toujours. J'aime les choses simples et qui s'intègrent facilement au site comme Font-Awesome.

J'ai également noté que certains plugins ne géraient pas toujours le partage de page statique (seulement les articles) et je trouve ça un peu dommage.

Au final, j'ai essayé de faire un plugin neutre, auquel on peut intégrer n'importe quel service et personnalisable via CSS selon les besoins de chacun.

plxMySocialNetwork, qu'est ce que ça fait ?

Le plugin plxMySocialNetwork permet uniquement de partager un contenu sur les réseaux sociaux ou services en lignes. Il génère automatiquement une URL contenant le lien et le titre de l'article sur la page du site.

On intègre plxMySocialNetwork où l'on veut dans la page (en haut, en bas, ... en fonction de votre thème) pour les articles et/ou pages statique en utilisant un hook (code à placer dans le thème du site). L'affichage des liens se fait par des icônes (par défaut) ou avec Font-Awesome. Il est possible de le modifier à volonté depuis le menu pour l'adapter à votre site.

Au final, on obtient une liste de liens qui peut ressembler à ça:

Installation

On va voir comment installer et activer plxMySocialNetwork mais aussi comment le modifier et le personnaliser. Le plugin est fonctionnel dés l'activation et peut être utilisé tel quel pour les moins exigeants.

Activer le plugin

Pour installer le plugin, il faut commencer par récupérer l'archive sur mon dépôt de plugins Pluxml. Il est également disponible sur Github mais il faut penser à renommer le dossier en "plxMySocialNetwork".

Ensuite, décompresser l'archive et envoyer le dossier "plxMySocialNetwork" via FTP sur votre site et le placer dans "/plugins".

Après avoir copié le plugin dans votre PluXml, il ne vous reste plus qu’à l’activer. Pour ça, il faut se connecter sur le site en tant qu'administrateur et aller dans le menu: Paramètres > Plugins.

Dans l'onglet Plugins inactifs, sélectionner le plugin MySocialNetwork et dans le menu déroulant "Pour la sélection" choisir "Activer", puis cliquer sur le bouton "Ok" pour enregistrer la modification.

Maintenant le plugin est activé mais n’apparaît toujours pas sur votre site.

Pour rendre visible le plugin, il faut placer un hook dans le thème utilisé. Cela permet de définir précisément où les liens seront affichés.
Dans le menu: Paramètres > Options d'affichage, en face de Choix du thème cliquer sur Éditer les fichiers du thème «defaut» (vous adapterez en fonction de votre site et du thème utilisé).

Il faut modifier les templates des pages article.php / article-full-width.php et/ou static.php / static-full-width.php (si vous avez créé d'autres templates de pages, ajoutez également le hook).

Pour placer le plugin plxMySocialNetwork à la fin de l'article, ajouter le hook <?php eval($plxShow->callHook('MySocialNetwork')) ?> sous la balise </article>

...
</article>
<?php eval($plxShow->callHook('MySocialNetwork')) ?>
... 

Maintenant, les liens du plugin doivent s'afficher (penser à rafraîchir la page avec votre navigateur si besoin).

Configurer le plugin

Une fois que le plugin s'affiche correctement dans la page, on va pouvoir gérer nos réseaux sociaux.

Pour gérer la configuration du plugin, il faut se rendre dans le menu Paramètres > Plugins et cliquer sur le lien Configuration correspondant au plugin MySocialNetwork.

C'est le premier tableau qui nous intéresse nommé Réseaux sociaux. Par défaut, les principaux réseaux sociaux sont présents pour avoir un plugin fonctionnel dés l'installation.

On peut rajouter n'importe quel réseau social/service dés lors qu'il fournit une URL pour partager une page web. Le lien à utiliser est généralement composée de l'URL du service, l'URL du contenu à partager et le titre (optionnel).

Pour reprendre l'exemple de Twitter:

• URL du site: https://twitter.com
• URL du contenu à partager:
• Titre du conteu à partager:

L'URL à indiquer dans la configuration: https://twitter.com/share?url=&text=
Pour partager l'article 12, mon lien sur le site ressemblera à: https://twitter.com/share?url=https://blog.niqnutn.com/index.php?article12&text=ArticleAPartager

Il ne vous reste plus qu'à ajouté les réseaux sociaux qui intéressent vos lecteurs. Pour déterminer l'URL de partage, le plus simple est de consulter directement la documentation fournie par le service à ajouter.

Pour supprimer un lien, il suffit de supprimer l'URL. Pour une gestion plus facile et éviter d'effacer systématiquement un service, on a la possibilité d'afficher/masquer certains réseaux sociaux pour ne garder que les liens les plus pertinents ou ne pas surcharger la page.

Ensuite, il y a la partie CSS class qui permettra de gérer votre CSS pour les services que vous ajouterez.

J'ai également ajouté la possibilité de partager un contenu via courriel. C'est un peu old-school mais c'est le même principe donc pourquoi faire l'impasse. On peut définir le sujet et le corps du message mais j'avoue que l'ajout d'un destinataire n'a que peu d’intérêt dans son utilisation normale.

Outre la possibilité de gérer le CSS, on peut aussi personnaliser les labels. C'est pas grand chose mais c'est ce qui fait l'identité d'un site, il suffit de voir le site Warrior du Dimanche de Bronco pour s'en convaincre.

À noter que le fichier de configuration sera stocké dans: data/configuration/plugins/plxMySocialNetwork.xml

Modifier le CSS

Par défaut, je propose d'afficher les réseaux sociaux en utilisant des icônes (avec plusieurs variantes) ou avec Font-Awesome.

Pour modifier l'apparence, il suffit de se rendre dans menu: Paramètres > Plugins et cliquer sur le lien Code CSS correspondant au plugin MySocialNetwork.

Pour activer/désactiver un des styles par défaut, il suffit de commenter/dé-commenter le code CSS qui nous intéresse.

On peut ensuite vérifier directement sur une page son apparence (penser à actualiser la page si besoin).

Exemples:

Si vous ajoutez des réseaux sociaux, pensez à indiquer la class CSS dans la partie configuration et si besoin ajouter les images correspondantes aux services ajoutés. Les images sont en SVG (vectoriel) parce que c'est plus léger et bien plus jolie (pas certains que tous les navigateurs gèrent le SVG correctement). Libre à vous de faire selon votre inspiration en modifiant le CSS.

À noter que le fichier de configuration sera stocké dans: data/configuration/plugins/plxMySocialNetwork.site.css

Utilisation

Quand on est sur la page d'un article, il suffit de cliquer sur le lien du réseau social sur lequel on souhaite partager. Une nouvelle page devrait s'afficher avec l'URL du contenu partagé et son titre (certains services vont récupérer automatiquement le contenu de la page avec la première image et les premières lignes de l'article). Pour la suite, cela dépendra du fonctionnement du service utilisé.

plxMySocialNetwork comme gestionnaire de liens

Il est possible de détourner l'utilisation de plxMySocialNetwork pour afficher des liens vers vos pages personnels sur les réseaux sociaux, votre chaîne YouTube ou d'autres sites. Il faudra simplement adapter les URLs / les libellés et ajouter le hook dans la sidebar, par exemple:

Du coup, c'est bien pratique de pouvoir ajouter un destinataire pour le mail .

Conclusion

plxMySocialNetwork n'est pas révolutionnaire mais fournit une alternative paramétrable et personnalisable. Même si les fonctionnalités de partage de contenu sont de plus en plus intégrées au navigateur, je pense que l'ajout de cette extension à votre PluXml peut s'avérer utile pour certains.

Il n'y a pas de traduction du plugin, mais il suffit de reprendre le dossier "/lang" qui regroupe l'ensemble des chaînes de caractères à traduire. Cela m'a obligé à reprendre le plugin mais ça sera plus facile à gérer par la suite.

C'était aussi l'occasion de voir comment on réalise un plugin pour PluXml. Au final, ce n'est pas trop compliqué mais faut se documenter un minimum (la doc suffit) et se débrouiller avec PHP/HTML/CSS. La gestion des données et du CSS est plutôt pratique et facilite grandement l'utilisation.

Si vous rencontrez un problème ou pour des demandes d'évolutions, n'hésitez pas à me contacter. Je peux également compléter les liens vers les différents réseaux sociaux et services si vous me communiquez les bonnes informations.

Je n'ai pas parlé de plxMySocialNetwork avant pour éliminer un certains nombre de bugs. Le plugin est maintenant stable et ne devrait pas poser de problème. Il est sous licence MIT et peut être librement utilisé et distribué.

Ressources

• Télecharger plxMysocialnetwork sur mon dépôt de plugins Pluxml ou sur Github
• plxMysocialnetwork sur le forum PluXml
• Guide du développeur PluXml
• Documentation de PluXml