nIQnutn

Le numérique libre en contre-addiction

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.

PluXml 5.3.1
plxMySocialNetwork 1.7

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>


code
/article.php
...
</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: {$url}
  • Titre du conteu à partager: {$title}

L'URL à indiquer dans la configuration: https://twitter.com/share?url={$url}&text={$title}
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é.

Il est possible que certains services demandent de s'authentifier avant de pouvoir partager.

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

8 commentaires

antistress |

ni tracking ni JS, voilà qui me parle !
C'est bien possible que je regarde ce WE comme l'installer sur mon blogue, merci à toi :)

David |

Je viens de découvrir ton blog avec intérêt et ravissement, on a les même centres d'intérêts :)

Parfait cette petite extension pour mon PluXml chéri, merci à toi ! Mis en place en quelques minutes, je prendrai le temps de l'intégrer plus tard, les réglages de bases sont bien suffisants.

Phipe |

Hello et merci pour ce plugin !

Je viens de l'installer sur mon PluXml mias je n'arrive toujours pas à obtenir l'affichage des boutons, je n'ai systématiquement qu'une liste de lien, sans image.
Le fait de décommenter les paragraphes concernant un style de boutons ne change rien, donc, je me dis que....j'ai ratée une étape.... , Mais laquelle....?

Voici ce que j'obtiens systématiquement
https://lut.im/IsoOGUsUUh/bn2996MgBnUMTncx.png

Je prends toutes les pistes, merci.

Phipe

nIQnutn |

@Phipe :
Merci pour ton retour.
Par défaut, tu devrais avoir les icônes simples.
Je t'invite à ouvrir un sujet sur le forum http://forum.pluxml.org/search.php?action=show_recent pour essayer de trouver une solution.
Tu peux essayer de supprimer complètement le CSS du plugin pour voir ce qui se passe.
J'imagine que tu as mal modifié le CSS dans les paramètres du plugin où c'est un pb du plugin et dans ce cas le chemin vers l'image n'est pas correct.
il faudrait nous indiquer le CSS utilisé et la version de PluXml et éventuellement la page où le pb est présent ?

A noter que le .svg pour afficher les icônes ne marche pas sur tous les navigateurs.

Pentux |

Bonjour, merci pour ce plugin et la philosphie qu'il transporte, j'aime !
Après moulte essaie j'ai cru comprendre que ce plugin n'est disponible que pour Pluxml 5.3 ? Il n'est pas possible de le faire fonctionner sous 5.5 ?

nIQnutn |

@Pentux :
Il n'a pas été testé avec 5.5 donc il est possible que certains bugs apparaissent.
Si c'est le cas, ne pas hésiter à faire remonter les problèmes.
J'ai testé avec PluXml 5.5 et plxMySocialNetwork et l'essentiel semble tout de même marcher.

bg62 |

pas de possibilité pour Pinterest ? c'est volontaire ou ... ???
@+

nIQnutn |

@bg62 :
je connais pas Pinterest donc j'ai pas mis par défaut faute de pouvoir tester.
il faut trouver comment partager sur Pinterest et le format de l'URL, après il suffit d'aller dans la configuration pour l'ajouter.
si tu trouves quelque chose qui marche, je le rajouterai dans la configuration de base.

Fil RSS des commentaires de cet article

Écrire un commentaire