Blog d'astuces

Mes astuces au quotidien

Ajouter un bouton "Tooter sur Mastodon"

Rédigé par Aisyk 1 commentaire

Vous avez remarqué à droite ?

Hé oui !

J'utilise une extension, MySocialNetwork, qui me donne le choix entre pas mal d'icônes de partage sur les réseaux (twitter, facebook, pinterest...). certains me sont utiles, d'autres moins. Par contre, j'aurai bien souhaité avoir un bouton Mastodon ! C'est chose faite !

Étape 1 : étudier le fonctionnement du plugin

Comment faire ? Aller voir dans les options de configuration du plugin, regarder la documentation de celui-ci et tester.

Image

On peut ajouter des services à ce plugin, et c'est ce qui en fait sa force, vous avez vu la dernière ligne ? C'est ici que j'ai rajouté mastodon.

Je continue mes investigations sur le fonctionnement du plugin, et je vois que sa configuration se fait grâce à un fichier CSS, appelé "site.css".

Image

Vous voyez tout à droite ? Il est indiqué "Code CSS". Regardons de plus près ce fichier. Nous constatons que les lignes faisant appel aux différents réseaux de partage font appel à des images.

Étape 2 : L'image du logo de Mastodon

Les logos des réseaux sociaux sont affichées par le plugin. Et, Ô miracle, il existe un dossier /img dans le dossier du plugin ! Voyons voir la taille et les caractéristiques de ces images, histoire de ne pas trop se tromper.

32x32 pixels, pour des fichiers .svg Ok, je capte ! Ce sont des images vectorielles qu'il me faut. À moi d'aller les chercher le logo de Mastodon, par exemple sur sa page Wikipedia anglaise. Je redimensionne le logo en 32x32 pixels avec Inkscape (histoire de garder le format de fichier et qu'il ne soit pas trnasformé en .png ou pire, en .jpg)

Étape 3 : Comment je fais pour trouver ma ligne de code ?

En cherchant et en allant voir les autres ! Je suis allé sur Framablog et tout simplement sur l'article qui parle de Mastodon.

Image

Il n'y a plus qu'à copier l'adresse du lien et l'étudier !

Voici le lien :

web+mastodon://share?text=Mastodon%2C+le+r%C3%A9seau+social+libre+qui+est+en+train+de+bousculer+twitter%0Ahttps%3A%2F%2Fframablog.org%2F2017%2F04%2F05%2Fmastodon-le-reseau-social-libre-qui-est-en-train-de-bousculer-twitter%2F

Voici le lien final dans mon extension :

web+mastodon://share?{$url}&title={$title}

Vous remarquerez quelques trucs :

Dans le premier lien, il y a directement le titre de la page que je souhaite partager (là l'article sur Mastodon du site Framablog), puis le lien commençant par "https". La synthaxe de tout cela est un peu difficile à remarquer (je l'ai mise en gras) car de nombreux caractères brouillent le message, les "+", les "%2F" et autres "%3A%2F%2F"... Si vous regardez le lien final, nous pouvons voir que notre extension demande une mention {$url} et une mention {$title}.

Pourquoi j'ai "web+mastodon://" au lieu de "http://www. ..." ?

Parce que Mastodon fonctionne un peu différemment apparemment (en fait je n'en sais rien :p ).

Étape 4 : Modifier le fichier CSS en conséquence.

Maintenant que nous avons toutes nos informations, ajoutons-les dans notre fichier de référence.

Image

Oui, à chaque fois, j'ai recopié la dernière ligne, et  j'ai édité avec les termes "mastodon". Par contre, je ne connais pas le code final dans la dernière ligne... il a avoir avec le projet Font Awesome, mais je ne vois nullement ce code dans le projet... Et bien sûr aucun commentaire dans le code CSS pour savoir où piocher ce code. Je choisi de reprendre le code initial, celui du service "share-alt" que je ne connais pas (je ne l'utiliserai pas comme ça !).

Voilà ! C'est fini ! J'espère que cette petite aventure vous aura plus !

1 commentaire

#1  - nIQnutn a dit :

Merci pour l'astuce.
Pour le css, j'ai intégré différentes solutions pour afficher les boutons. La dernière est liée à Font-Awesome (maintenant remplacé par Fork-Awesome).
Il suffit de l'installer via le plugin : https://blog.niqnutn.com/index.php?article112/fork-awesome
Les infos sur plxMysocialnetwork
https://blog.niqnutn.com/index.php?article19/plxmysocialnetwork

Répondre

Écrire un commentaire

Quelle est la dernière lettre du mot mhol ?

Fil RSS des commentaires de cet article