Script de partage social sans service externe
Par Edward Cage | Le 26/05/2018
Ce n'est un secret pour personne : la présence sur les réseaux sociaux est un aspect incontournable de la promotion d'un service web. Référencement, apport direct de trafic, amélioration de l'image de marque : chaque partage de contenu sur ces plates-formes présente plusieurs avantages immédiats. Qu'il s'agisse d'interpeller, d'informer ou de vendre, n'importe quel créateur de contenu ou de service sur Internet cherchera à faciliter ce type d'interaction, s'il souhaite que sa communication ait un vrai impact. Ce n'est pas pour rien qu'une large majorité de sites web affichent des boutons de partage sur leurs pages et que les CMS proposent et encouragent leur mise en place à coup de conseils et de tutoriels. Faciliter le partage est une démarche incontournable et placer dans cet objectif des boutons sur les pages de son site est un moyen efficace de l'atteindre en minimisant les manipulations que doivent effectuer les visiteurs.
En effet, l'utilité des boutons de partage n'est pas seulement de permettre à l'internaute de partager votre contenu sur les réseaux sociaux : c'est déjà une chose qu'il peut faire sans votre aide en intégrant l'adresse d'une page à un message sur son réseau favori. Leur grand intérêt est surtout de lui permettre de le faire sans le moindre effort, en à peine deux ou trois clics. Mentionner un contenu que l'on vient de lire est une décision qui se prend rapidement et la nécessité de copier-coller une adresse ou d'écrire un message constitue un micro-obstacle. Ce n'est bien-sûr pas le principal élément qui va conditionner cette décision, loin de là. Mais placer ces habituels boutons sur une zone visible de son site est un moyen de mettre toutes les chances de son côté.
C'est d'ailleurs pour cet intérêt que la plupart des CMS proposent d'intégrer ce type de boutons, soit en utilisant les boutons fournis par les réseaux sociaux, soit en faisant usage d'un service tiers. Mais, aussi utile que ces boutons puissent être pour la promotion de son contenu, ils peuvent aussi ne pas convenir à tout le monde.
Principale limite des services externes : la récupération discrète de données
Si un simple script directement fourni par un réseau social peut avoir l'avantage d'être mis en place très facilement sur un site web, utiliser plusieurs de ces boutons présente tout de même certains gros défauts. On citera notamment un ralentissement du chargement des pages (en conséquence des multiples scripts exécutés en même temps) et un fort manque d'harmonie (les boutons ayant des aspects très différents les uns des autres). Dès lors que l'on souhaite proposer des boutons de partage vers plusieurs réseaux, l'utilisation de ces scripts perd rapidement de son intérêt. Et c'est là que les plates-formes de partage généralistes entrent en jeu, puisque ces dernières proposent un jeu de boutons conçus ensemble et fonctionnant de concert.
Toutefois, si les plates-formes de partage permettent de se débarrasser des deux inconvénients précédemment cités, il reste tout de même celui de la vie privée des internautes. En effet, lorsque l'on utilise un service externe à son site, d'une part, on installe un script créé par autrui et pas toujours facile à décrypter et, d'autre part, on fait appel à un intermédiaire entre son propre site et les réseaux sociaux. Une telle plate-forme est ainsi susceptible de récupérer facilement et discrètement des informations sur votre site et sur la navigation des internautes :
- Lors du partage, il peut enregistrer l'action de partage d'une page précise, par un internaute précis, associé à un profil précis, sur un réseau social précis.
- S'il fait usage d'un raccourcisseur d'URL, il peut intercepter et analyser le trafic en provenance de ce partage.
- Même si aucun partage n'est fait, le script qu'il propose est susceptible d'avoir des fonctionnalités supplémentaires qui ne sont pas toujours très explicites (telles que le suivi permanent du trafic de votre site).
On citera comme exemple l'insertion discrète, dans le contenu des pages, de codes indiquant au navigateur de télécharger des fichiers depuis le sous-domaine rp.gwallet.com, lors de l'utilisation de la plate-forme de partage Po.st. L'exécution des scripts fournis par cette plate-forme permets à cette dernière de récupérer des données de toutes sortes sur votre site et ses visiteurs, de manière très peu visible et explicite.
Pour ces différentes raisons et les conséquences qu'elles ont, entre autres, sur la vie privée des visiteurs, ce type de service ne conviendra pas à tout le monde. En conséquence de cela, j'ai créé un script offrant les fonctionnalités habituelles de partage en évitant totalement les intermédiaires et respectant la vie privée des internautes, puisque les boutons sont intégralement générés par le navigateur de l'internaute.
Mise en place du script
Le script suivant peut être utilisé tel quel entre deux balises <script> du code HTML, ou alors intégré à un fichier javascript externe appelé depuis vos pages. Il nécessite comme unique pré-requis l'installation de la bibliothèque JQuery (qui est généralement déjà installée sur la plupart des CMS), même s'il s'agit d'une ancienne version telle que celles précédant la 2.0 : le script n'en utilise que des fonctions basiques. Si nécessaire, il suffira de remplacer le symbole $ par jQuery, pour éviter d'éventuels conflits avec d'autres bibliothèques.
Ce script peut être largement modifié afin de convenir au mieux à vos besoins. Néanmoins, pour ceux ne disposant pas de connaissances en javascript, quatre options d'affichage sont proposées et offrent une personnalisation de base, en définissant les position, taille et couleur des boutons ainsi que la liste des réseaux sociaux que vous souhaitez voir figurer. Pour cela, cherchez la zone Options d'affichage située à peu près aux deux tiers du code et suivez les instructions.
/* Edward Cage (http://www.edwardcage.pro/) Mai 2018 | Script sous licence Creative Commons CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0/) | Icônes Font Awesome (https://fontawesome.com/license) */
$(document).ready(function(){
var title="",description="",imagesrc="",sharecolor="";
/* Récupération du titre, de la description, etc, s'ils existent*/
var url=$(location).attr("href");
if ($(document).attr("title")){var title=$(document).attr("title");var titlecode=encodeURIComponent(title)};
if ($("meta[name=description]")){var description=$("meta[name=description]").attr("content");var descriptioncode=encodeURIComponent(description)};
if ($("link[rel=image_src]")){var imagesrc=$("link[rel=image_src]").attr("href")};
/* Définition des specs utilisés pour la fenêtre pop-up dans laquelle les outils de partage des réseaux sociaux s'afficheront */
var displayoptions="location=no,resizable=yes,scrollbars=yes,menubar=no,width=920,height=518";
/* Création des liens (en fonction des données récupérées) et des icônes */
var facebook="<a class=\"share-btn share-facebook\" onclick=\"window.open('https://www.facebook.com/sharer/sharer.php?u="+url+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 264 512\" fill=\"#fff\"><path d=\"M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229\"/></svg></a>",twitter="<a class=\"share-btn share-twitter\" onclick=\"window.open('https://twitter.com/intent/tweet?url="+url+"&text="+titlecode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"#fff\"><path d=\"M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z\"/></svg></a>",google="<a class=\"share-btn share-google\" onclick=\"window.open('https://plus.google.com/share?url="+url+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\" fill=\"#fff\"><path d=\"M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z\"/></svg></a>",pinterest="<a class=\"share-btn share-pinterest\" onclick=\"window.open('https://pinterest.com/pin/create/button/?url="+url+"&media="+imagesrc+"&description="+descriptioncode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" fill=\"#fff\"><path d=\"M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z\"/></svg></a>",linkedin="<a class=\"share-btn share-linkedin\" onclick=\"window.open('https://www.linkedin.com/shareArticle?mini=true&url="+url+"&title="+titlecode+"&summary="+descriptioncode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" fill=\"#fff\"><path d=\"M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z\"/></svg></a>",viadeo="<a class=\"share-btn share-viadeo\" onclick=\"window.open('https://www.viadeo.com/shareit/share/?url="+url+"&title="+titlecode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" fill=\"#fff\"><path d=\"M276.2 150.5v.7C258.3 98.6 233.6 47.8 205.4 0c43.3 29.2 67 100 70.8 150.5zm32.7 121.7c7.6 18.2 11 37.5 11 57 0 77.7-57.8 141-137.8 139.4l3.8-.3c74.2-46.7 109.3-118.6 109.3-205.1 0-38.1-6.5-75.9-18.9-112 1 11.7 1 23.7 1 35.4 0 91.8-18.1 241.6-116.6 280C95 455.2 49.4 398 49.4 329.2c0-75.6 57.4-142.3 135.4-142.3 16.8 0 33.7 3.1 49.1 9.6 1.7-15.1 6.5-29.9 13.4-43.3-19.9-7.2-41.2-10.7-62.5-10.7-161.5 0-238.7 195.9-129.9 313.7 67.9 74.6 192 73.9 259.8 0 56.6-61.3 60.9-142.4 36.4-201-12.7 8-27.1 13.9-42.2 17zM418.1 11.7c-31 66.5-81.3 47.2-115.8 80.1-12.4 12-20.6 34-20.6 50.5 0 14.1 4.5 27.1 12 38.8 47.4-11 98.3-46 118.2-90.7-.7 5.5-4.8 14.4-7.2 19.2-20.3 35.7-64.6 65.6-99.7 84.9 14.8 14.4 33.7 25.8 55 25.8 79 0 110.1-134.6 58.1-208.6z\"/></svg></a>",tumblr="<a class=\"share-btn share-tumblr\" onclick=\"window.open('https://www.tumblr.com/share/link?url="+url+"&name="+titlecode+"&description="+descriptioncode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" fill=\"#fff\"><path d=\"M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z\"/></svg></a>",reddit="<a class=\"share-btn share-reddit\" onclick=\"window.open('https://reddit.com/submit?url="+url+"&title="+titlecode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"#fff\"><path d=\"M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z\"/></svg></a>",digg="<a class=\"share-btn share-digg\" onclick=\"window.open('https://digg.com/submit?url="+url+"&title="+titlecode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"#fff\"><path d=\"M81.7 172.3H0v174.4h132.7V96h-51v76.3zm0 133.4H50.9v-92.3h30.8v92.3zm297.2-133.4v174.4h81.8v28.5h-81.8V416H512V172.3H378.9zm81.8 133.4h-30.8v-92.3h30.8v92.3zm-235.6 41h82.1v28.5h-82.1V416h133.3V172.3H225.1v174.4zm51.2-133.3h30.8v92.3h-30.8v-92.3zM153.3 96h51.3v51h-51.3V96zm0 76.3h51.3v174.4h-51.3V172.3z\"/></svg></a>",wordpress="<a class=\"share-btn share-wordpress\" onclick=\"window.open('https://wordpress.com/press-this.php?u="+url+"&t="+titlecode+"&s="+descriptioncode+"&i="+imagesrc+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" fill=\"#fff\"><path d=\"M256 8C119.3 8 8 119.2 8 256c0 136.7 111.3 248 248 248s248-111.3 248-248C504 119.2 392.7 8 256 8zM33 256c0-32.3 6.9-63 19.3-90.7l106.4 291.4C84.3 420.5 33 344.2 33 256zm223 223c-21.9 0-43-3.2-63-9.1l66.9-194.4 68.5 187.8c.5 1.1 1 2.1 1.6 3.1-23.1 8.1-48 12.6-74 12.6zm30.7-327.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-21.9 0-58.7-2.8-58.7-2.8-12-.7-13.4 17.7-1.4 18.4 0 0 11.4 1.4 23.4 2.1l34.7 95.2L200.6 393l-81.2-241.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-4.2 0-9.1-.1-14.4-.3C109.6 73 178.1 33 256 33c58 0 110.9 22.2 150.6 58.5-1-.1-1.9-.2-2.9-.2-21.9 0-37.4 19.1-37.4 39.6 0 18.4 10.6 33.9 21.9 52.3 8.5 14.8 18.4 33.9 18.4 61.5 0 19.1-7.3 41.2-17 72.1l-22.2 74.3-80.7-239.6zm81.4 297.2l68.1-196.9c12.7-31.8 17-57.2 17-79.9 0-8.2-.5-15.8-1.5-22.9 17.4 31.8 27.3 68.2 27.3 107 0 82.3-44.6 154.1-110.9 192.7z\"/></svg></a>",pocket="<a class=\"share-btn share-pocket\" onclick=\"window.open('https://getpocket.com/save?url="+url+"&title="+titlecode+"','','"+displayoptions+"')\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" fill=\"#fff\"><path d=\"M407.6 64h-367C18.5 64 0 82.5 0 104.6v135.2C0 364.5 99.7 464 224.2 464c124 0 223.8-99.5 223.8-224.2V104.6c0-22.4-17.7-40.6-40.4-40.6zm-162 268.5c-12.4 11.8-31.4 11.1-42.4 0C89.5 223.6 88.3 227.4 88.3 209.3c0-16.9 13.8-30.7 30.7-30.7 17 0 16.1 3.8 105.2 89.3 90.6-86.9 88.6-89.3 105.5-89.3 16.9 0 30.7 13.8 30.7 30.7 0 17.8-2.9 15.7-114.8 123.2z\"/></svg></a>";
/* ================================================================================= */
/* ================================================================================= */
/* ========= OPTIONS D'AFFICHAGE ========= */
/* Position des boutons de partage | Indiquer "g" (vertical Gauche), "h" (Horizontal) ou "d" (vertical Droite) */
var shareposition = "h";
/* Liste et ordre des boutons de réseaux sociaux à proposer | Tous les réseaux sociaux supportés sont indiqués ici ; supprimer les boutons superflus en conservant toujours un + entre chaque réseau social */
var sharebtns = facebook + twitter + google + pinterest + linkedin + viadeo + tumblr + reddit + digg + wordpress + pocket;
/* Taille des boutons en px | Valeur conseillée : entre 32 et 64, selon le nombre de boutons voulus (et la place qu'ils occuperont en conséquence) */
var sharesize = 48;
/* Couleur des boutons | Supprimmer cette variable ou la laisser vide (var sharecolor = "";) pour utiliser les couleurs officielles de chacun des réseaux sociaux choisis */
var sharecolor = "#555";
/* ========= FIN DES OPTIONS D'AFFICHAGE ========= */
/* ================================================================================= */
/* ================================================================================= */
/* Création des variables et balises CSS, selon les options d'affichage choisies */
var shareisize=sharesize*0.61803398875,shareimargin=sharesize*0.1909830056250727;
var facebookcolor="#3b5999",twittercolor="#55acee",googlecolor="#dd4b39",pinterestcolor="#bd081c",linkedincolor="#0077b5",viadeocolor="#ee7252",tumblrcolor="#34465d",redditcolor="#ff5700",diggcolor="#486ca3",wordpresscolor="#21759b",pocketcolor="#ed374d";
if (sharecolor != ""){facebookcolor=sharecolor;twittercolor=sharecolor;googlecolor=sharecolor;pinterestcolor=sharecolor;linkedincolor=sharecolor;viadeocolor=sharecolor;tumblrcolor=sharecolor;redditcolor=sharecolor;diggcolor=sharecolor;wordpresscolor=sharecolor;pocketcolor=sharecolor;}
if (shareposition === "g"){var sharestyleposition=".share-btns{left:0;}.share-btn{float:left;clear:left;text-align:left;transition:width .2s ease-in-out;}.share-btn:hover{width:"+(sharesize*1.61803398875)+"px;height:"+sharesize+"px;transition:width .2s ease-in-out;}.share-btn svg{left:auto;right:"+shareimargin+"px;}";}
if (shareposition === "h"){var sharestyleposition=".share-btns{left:0;}.share-btn{vertical-align:bottom;text-align:center;transition:height .2s ease-in-out;}.share-btn:hover{width:"+sharesize+"px;height:"+(sharesize*1.61803398875)+"px;transition:height .2s ease-in-out;}.share-btn svg{left:"+shareimargin+"px;right:"+shareimargin+"px;}"}
if (shareposition === "d"){var sharestyleposition=".share-btns{right:0;}.share-btn{float:right;clear:right;text-align:right;transition:width .2s ease-in-out;}.share-btn:hover{width:"+(sharesize*1.61803398875)+"px;height:"+sharesize+"px;transition:width .2s ease-in-out;}.share-btn svg{left:"+shareimargin+"px;right:auto;}";}
var sharestyle="<style>.share-btns{position:fixed;bottom:0;white-space:nowrap;z-index:9999;}.share-btn{display:inline-block;position:relative;width:"+sharesize+"px;height:"+sharesize+"px;text-decoration:none;cursor:pointer;}.share-btn svg{position:absolute;top:"+shareimargin+"px;width:"+shareisize+ "px;height:"+shareisize +"px;}.share-facebook{background-color:"+facebookcolor+";}.share-twitter{background-color:"+twittercolor+";}.share-google{background-color:"+googlecolor+";}.share-pinterest{background-color:"+pinterestcolor+";}.share-linkedin{background-color:"+linkedincolor+";}.share-viadeo{background-color:"+viadeocolor+";}.share-tumblr{background-color:"+tumblrcolor+";}.share-reddit{background-color:"+redditcolor+";}.share-digg{background-color:"+diggcolor+";}.share-wordpress{background-color:"+wordpresscolor+";}.share-pocket{background-color:"+pocketcolor+";}"+sharestyleposition+"</style>";
/* Intégration de l'ensemble des balises générant les boutons de partage, à la fin de la balise BODY */
$("body").append(sharestyle+"<div class=\"share-btns\">"+sharebtns+"</div>");
});
/* Edward Cage (http://www.edwardcage.pro/) Mai 2018 | Script sous licence Creative Commons CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0/) | Icônes Font Awesome (https://fontawesome.com/license) */Comment ça marche ?
Dans le cas de nombreux réseaux sociaux, la fenêtre ouverte par n'importe quel service de partage fonctionne via les paramètres indiqués dans l'URL. On y retrouve l'adresse de l'outil de partage du réseau social, suivi d'un point d'interrogation et d'un ensemble de données qui sont utilisées pour remplir cet outil avec du texte, une description, l'URL de la page que l'on souhaite partager, etc. Toutes les fonctionnalités des boutons de partage social se font donc en générant une URL spécifique. L'objectif n'est donc pas seulement de renvoyer l'internaute vers l'outil de partage des différents réseaux sociaux : il faut également qu'un ensemble d'informations soient déjà insérées pour lui éviter autant d'efforts que possible.
Le principe de ce code est donc de renvoyer l'internaute vers une URL qui doit être générée différemment en fonction de la page ouverte : celle-ci doit indiquer un texte différent, une image différente, qui doivent être liés au contenu de la page. Pour cela, le script agit en trois étapes :
- Premièrement, il récupère sous forme de variables l'url de la page (contenu de la barre d'adresse du navigateur), son titre (contenu de la balise Title), sa description (contenu de la balise Meta Description) et l'url de son image d'illustration (contenu de la balise Link rel=img_src).
- Ensuite, il encode le titre et la description et en crée de nouvelles variables. Cette étape est nécessaire dès qu'il y a des accents, des guillemets et d'autres caractères qui ne sont pas censés se trouver dans une URL.
- Enfin, il crée les liens qui seront constitués de l'adresse de l'outil de partage suivi des différents paramètres contenus dans les variables créées précédemment.
Les icônes, quant à elles, sont des images SVG en provenance de la police d'écriture Font Awesome et constituées de coordonnées qui sont indiquées directement dans le script. Comme les liens, ces images sont donc générées par le navigateur de l'internaute. Des balises de style sont également ajoutées et leur contenu généré selon les variables indiquées dans les options d'affichage du script.
Ainsi, le script proposé ici permet la création de boutons et le partage de vos pages sur les réseaux sociaux tout en respectant la vie privée de vos visiteurs. À aucun moment de son exécution il ne télécharge des données ni ne fait appel à un quelconque site ou service tiers. Le script indique simplement au navigateur qu'il doit créer une zone contenant des icones d'une certaine forme et des liens redirigeant vers une url qu'il doit générer à partir d'informations dont il dispose déjà. Il ne transmet aucune information vers l'extérieur et ne fait que renvoyer l'internaute directement vers l'outil de partage du réseau social sur lequel il a cliqué.