La façon la plus simple (et la plus performante) d’offrir des liens de partage pour les médias sociaux

L’été dernier, j’ai écrit Les balises méta essentielles pour les médias sociaux sur la façon dont les développeurs peuvent préparer les pages Web pour optimiser leur apparence lorsqu’elles sont partagées sur les médias sociaux. Mais qu’en est-il de la création des liens permettant aux utilisateurs de partager ces pages Web ? Facebook, Twitter et LinkedIn proposent de nombreux moyens de le faire, certains impliquant des générateurs de boutons et d’autres nécessitant un JavaScript externe. Mais pour éviter tout cela, vous pouvez créer vos propres liens pour partager des pages Web. Et le meilleur, c’est que c’est simple à faire soi-même. Voici comment.

Concept de base : Juste un lien

Lorsque vous partagez des pages Web à l’aide de liens, vous soumettez essentiellement une requête GET (c’est-à-dire que vous cliquez sur un lien) à une URL fournie par chaque service de médias sociaux. Ensuite, en ajoutant une série de paires nom/valeur (paramètres de requête comme ?title=Titre) à la fin de cette URL, vous pouvez spécifier l’URL de la page web que vous souhaitez partager et, parfois, des informations supplémentaires.

Maintenant, certains symboles dans les requêtes GET, connus sous le nom de « caractères réservés », doivent être encodés correctement afin de ne pas interférer avec les fonctions normales du navigateur. Ces caractères sont soumis à un « codage en pourcentage » – c’est-à-dire qu’ils sont représentés dans les paramètres de requête par un « % » suivi d’un code hexadécimal à deux chiffres. Voici les caractères réservés et leurs équivalents codés en pourcentage.

.

Note : Un espace peut être représenté par « %20 » ou « + ».

Bien sûr, il n’est pas nécessaire de mémoriser ces codes hexadécimaux. Il existe de nombreuses ressources qui fournissent des conversions (Bing en a une intégrée au moteur de recherche) et, comme vous le verrez bientôt, JavaScript peut également se charger du gros travail à cet égard. Examinons quelques-uns des services de médias sociaux les plus populaires et apprenons comment nous pouvons partager des pages web par leur intermédiaire.

Facebook

Par leur guide du développeur, Facebook spécifie l’URL suivante pour soumettre des requêtes GET lors du partage d’une page web:

https://www.facebook.com/dialog/share

Bien qu’il y ait quatre paramètres de requête disponibles, seuls deux sont nécessaires : l’URL de la page web que vous voulez partager et un App ID, que les développeurs peuvent obtenir en s’enregistrant sur Facebook. Si vous n’avez pas d’App ID, le processus d’enregistrement n’est pas onéreux, mais il n’est pas nécessaire de s’en préoccuper quand une solution encore plus simple existe.

La méthode originale de Facebook pour partager des pages web, sans l’App ID requis, n’est plus mentionnée dans aucune de leurs documentations, mais elle est toujours supportée. En fait, avec d’innombrables sites web utilisant cette méthode, je ne peux pas imaginer qu’elle soit dépréciée de sitôt. Cette URL est :

https://www.facebook.com/sharer.php

Le seul paramètre disponible est « u », qui est utilisé pour spécifier l’URL de la page Web que vous souhaitez partager. Voici un exemple qui partage la page d’accueil de CSS-Tricks sur Facebook – allez-y, faites un copier-coller dans un navigateur pour voir le résultat.

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

Comme expliqué précédemment, l’URL partagée est nécessairement codée en pourcentage. Notez également comment  » ? » désigne le début du premier paramètre de requête. Les paramètres de requête suivants sont séparés par « & », comme nous le verrons bientôt.

Twitter

Twitter fait référence au partage d’une page web via une URL en tant que Tweet Web Intent – l’URL à utiliser est :

https://twitter.com/intent/tweet

Contrairement à Facebook, où seule la page web partagée peut être spécifiée, Twitter permet d’ajouter du texte et un nombre quelconque de hashtags. Les utilisateurs auront la possibilité de modifier tout cela avant de tweeter, mais cela leur donne une longueur d’avance au cas où ils ne pourraient pas s’en occuper. Par exemple, disons que vous voulez tweeter les informations suivantes :

L’URL pour cela, avec les paramètres de requête codés en pourcentage et les sauts de ligne ajoutés pour plus de clarté, est :

https://twitter.com/intent/tweet?url=http%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html

Et cela vous donne:

Vous remarquerez que Twitter présélectionne le texte, ce qui permet à l’utilisateur de le modifier facilement. Et, n’oubliez pas que le tweet doit comporter moins de 140 caractères, alors mieux vaut ne pas fournir une copie trop longue. Dans un souci de simplicité, j’ai omis de parler de trois paramètres moins utilisés, qui sont décrits en détail dans la documentation pour les développeurs de Twitter. Ces paramètres supplémentaires vous permettent de spécifier le nom d’utilisateur associé au tweet, les noms d’utilisateur suggérés liés, et un ID d’un tweet lié.

LinkedIn

L’URL à utiliser lors d’un partage sur LinkedIn est :

https://www.linkedin.com/shareArticle

Au total, cinq paramètres sont disponibles, comme le détaille ce tableau tiré de la documentation des développeurs de LinkedIn :

En plus de l’URL de la page web que vous souhaitez partager, un autre paramètre de requête appelé « mini » est nécessaire. Mais, comme vous pouvez le voir, sa valeur ne change jamais, nous pouvons donc le coder en dur dans l’URL. Pour faire une démonstration, partageons ce qui suit sur LinkedIn :

Cela donne l’URL suivante – là encore, les sauts de ligne ont été ajoutés pour plus de clarté :

https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.css-tricks.com%2F&title=CSS-Tricks&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&source=CSS-Tricks

Bien que cela ne soit pas mentionné explicitement dans leur documentation, si le paramètre « title » est omis, LinkedIn récupérera ce contenu à partir de la balise Open Graph <meta property="og:title"> de la page partagée. De même, si le paramètre « summary » est omis, la balise Open Graph <meta property="og:description"> est utilisée. Quant au paramètre « source », rien dans la documentation ne précise comment cette valeur est utilisée ou affichée lors du partage d’une page Web – il semble qu’elle puisse être ignorée sans risque.

Connaissant tout cela, si la page web partagée possède le complément approprié de balises Open Graph, il suffira de spécifier l’URL, car les paramètres « title » et « summary » seront convenablement remplis.

Putting It All Together

Maintenant que nous connaissons la syntaxe à utiliser lors du partage de pages web sur les médias sociaux, comment pouvons-nous exactement mettre en œuvre ce code ? La façon la plus courante consiste peut-être à simplement lister un groupe de liens de partage stylisés de façon appropriée avec CSS :

<ul> <li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li> <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li> <li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>

L’ajout de target="_blank" dans la balise d’ancrage permet à la boîte de dialogue de partage d’apparaître dans une nouvelle fenêtre ou un nouvel onglet, ce qui fonctionne bien sur tous les appareils, du bureau au mobile.

Mais le codage en dur de ces liens, avec le codage en pourcentage des paramètres de requête, peut être fastidieux et source d’erreurs. Pour toute page web servie dynamiquement par un CMS, ce serait l’occasion parfaite pour que ce traitement de données soit effectué côté serveur et inséré là où c’est nécessaire dans le HTML.

Une autre option est d’utiliser le Social Media Sharing : HTML Links Generator que j’ai créé sur CodePen. Cela vous permet d’entrer un ou tous les paramètres nécessaires que nous venons de passer en revue, et il produira le HTML approprié pour que vous puissiez l’insérer dans votre propre code.

Voir le Pen Social Media Sharing : HTML Links Generator par Adam Coti (@adamcoti) sur CodePen.

En tant que développeur web indépendant travaillant presque exclusivement sur le front-end, j’ai opté pour l’utilisation de fonctionnalités JavaScript/jQuery qui, sans personnalisation, fonctionnent comme une solution clé en main pour mes projets. De cette façon, je peux être assuré que tous les liens de partage seront correctement traités, que je travaille sur un site web statique, que je personnalise des thèmes WordPress ou que je remette des modèles à intégrer dans un CMS.

Voici le HTML que j’utilise, les classes désignant le service de partage particulier. Dans le JavaScript, la fonction setShareLinks(), qui attache des événements click aux boutons de partage, est appelée lorsque le Document Object Model (DOM) est prêt :

<ul> <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li> <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li> <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li></ul>

function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params);}function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent(jQuery("meta").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); jQuery(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }); jQuery(".social-share.linkedin").on("click", function() { url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl; socialWindow(url); })}

L’URL de la page web actuelle est facilement acquise en lisant une propriété de l’objet document. Et, pour Twitter, la balise Open Graph <meta property="og:description"> fournit commodément le contenu approprié pour un tweet par défaut.

Maintenant, à la demande de certains de mes clients, je lance l’URL nouvellement formée dans une fenêtre secondaire (pop-up) de taille spéciale en utilisant window.open(). Sur la plupart des navigateurs de bureau, cette fenêtre est positionnée horizontalement et verticalement centrée sur l’écran. Il est intéressant de noter que si un utilisateur est connecté à son compte de média social, Facebook et LinkedIn redimensionnent cette fenêtre secondaire aux dimensions nécessaires. Ce n’est pas le cas de Twitter, c’est pourquoi j’utilise une largeur et une hauteur par défaut qui lui donnent suffisamment d’espace. En ce qui concerne la réactivité, les tablettes et les appareils mobiles interprètent la fenêtre secondaire comme un nouvel onglet. Une démo de cette fonctionnalité peut être trouvée sur CodePen.

Voir le stylo Partage des médias sociaux : Automated Link Creator par Adam Coti (@adamcoti) sur CodePen.

Mais l’utilisation d’une fenêtre pop-up, bien qu’autrefois courante, est désormais mal vue pour des raisons d’accessibilité. Une solution simple consiste à définir la variable params à une chaîne vide dans le JavaScript ci-dessus. Ce faisant, l’URL est lancée dans une nouvelle fenêtre ou un nouvel onglet, selon les paramètres du navigateur de l’utilisateur.

Conclusion

Comme le dit le dicton macabre, il y a plusieurs façons de dépecer un chat. La technique ci-dessus est simplement ma méthode préférée. Vous avez peut-être un meilleur moyen, plus optimisé. Peut-être en utilisant des attributs de données dans le HTML (pour spécifier les hashtags, par exemple) qui peuvent être lus par JavaScript et ajoutés comme paramètre de requête si nécessaire. J’espère que cela peut au moins servir d’inspiration pour votre propre mise en œuvre.