Den enkleste (og mest effektive) måde at tilbyde delingslinks til sociale medier

Sidste sommer skrev jeg The Essential Meta Tags for Social Media om, hvordan udviklere kan forberede websider til at optimere deres udseende, når de deles på sociale medier. Men hvad med at skabe de links, der gør det muligt for brugerne at dele disse websider? Facebook, Twitter og LinkedIn tilbyder adskillige måder at gøre dette på, hvoraf nogle involverer knapgeneratorer og andre kræver ekstern JavaScript. Hvis du vil undgå alt dette, kan du dog oprette dine egne links til at dele websider. Og det bedste af det hele er, at det er nemt at gøre selv. Her er hvordan.

Grundlæggende koncept: Når du deler websider ved hjælp af links, sender du i det væsentlige en GET-forespørgsel (dvs. klikker på et link) til en URL, der leveres af de enkelte sociale medietjenester. Ved at tilføje en række navne/værdipar (forespørgselsparametre som f.eks. ?title=Title) til slutningen af denne URL kan du angive URL’en for den webside, du vil dele, og nogle gange yderligere oplysninger.

Nu skal visse symboler i GET-forespørgsler, der er kendt som “reserverede tegn”, være kodet korrekt, så de ikke forstyrrer normale browserfunktioner. Disse tegn er underlagt “procent-kodning” – det vil sige, at de repræsenteres i forespørgselsparametre med et “%” efterfulgt af en tocifret hex-kode. Dette er de reserverede tegn og deres procentkodede ækvivalenter.

Note: Et mellemrum kan repræsenteres ved “%20” eller “+”.

Der er naturligvis ingen grund til at lære disse hex-koder udenad. Der findes mange ressourcer, der tilbyder konverteringer (Bing har en indbygget i søgemaskinen), og som du snart vil se, kan JavaScript også klare det tunge arbejde i denne henseende. Lad os se på nogle af de mere populære sociale medietjenester og lære, hvordan vi kan dele websider via dem.

Facebook

I deres udviklervejledning angiver Facebook følgende URL til at indsende GET-forespørgsler, når en webside skal deles:

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

Selv om der er fire forespørgselsparametre til rådighed, er der kun to nødvendige: URL’en for den webside, du vil dele, og et App-ID, som udviklere kan få ved at registrere sig hos Facebook. Hvis du ikke har et App ID, er registreringsprocessen ikke besværlig, men der er ingen grund til at gøre sig den ulejlighed, når der findes en endnu enklere løsning.

Facebooks oprindelige metode til deling af websider, uden det krævede App ID, er ikke længere nævnt i deres dokumentation, men den understøttes stadig. Med utallige websteder, der bruger denne metode, kan jeg faktisk ikke forestille mig, at den snart vil blive forældet. Denne URL er:

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

Den eneste tilgængelige parameter er “u”, som bruges til at angive URL’en for den webside, du ønsker at dele. Her er et eksempel, der deler CSS-Tricks’ hjemmeside på Facebook – klip og sæt den ind i en browser for at se resultatet:

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

Som tidligere forklaret er den delte URL nødvendigvis procentkodet. Bemærk også, hvordan “?” betegner starten af den første forespørgselsparameter. Efterfølgende forespørgselsparametre er adskilt af “&”, som det vil fremgå om lidt.

Twitter

Twitter henviser til deling af en webside via URL som en Tweet Web Intent – den URL, der skal bruges, er:

https://twitter.com/intent/tweet

I modsætning til Facebook, hvor kun den webside, der deles, kan angives, giver Twitter mulighed for at hæfte noget tekst og et vilkårligt antal hashtags på. Brugerne vil have mulighed for at redigere alt dette, inden de tweeter, men det giver dem et forspring, hvis de ikke har tid til at gøre det. Lad os f.eks. sige, at du ønsker at tweete følgende oplysninger:

Den URL for det, med forespørgselsparametrene procentkodet og linjeskift tilføjet for overskuelighedens skyld, er:

:

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

Og det giver dig:

Du vil bemærke, at Twitter forhåndsudvælger teksten, hvilket gør det nemt for brugeren at redigere den. Og husk, at tweetet skal være på under 140 tegn, så det er bedst ikke at levere en for lang tekst. For enkelhedens skyld har jeg undladt at diskutere tre mindre anvendte parametre, som kan findes beskrevet i detaljer på Twitters Developers Documentation. Disse yderligere parametre giver dig mulighed for at angive det brugernavn, der er knyttet til tweetet, foreslåede relaterede brugernavne og et ID for et relateret tweet.

LinkedIn

Den URL, der skal bruges, når du deler på LinkedIn, er:

https://www.linkedin.com/shareArticle

I alt er der fem parametre til rådighed, som det fremgår af dette skema fra LinkedIns Developers dokumentation:

Ud over URL’en for den webside, du ønsker at dele, kræves der en anden forespørgselsparameter kaldet “mini”. Men som du kan se, ændres dens værdi aldrig, så vi kan hardcode den i URL’en. For at demonstrere det, lad os dele følgende på LinkedIn:

Dette giver følgende URL – igen, linjeskift tilføjet for klarhedens skyld:

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

Selv om parameteren “title” ikke er nævnt eksplicit i deres dokumentation, vil LinkedIn, hvis parameteren “title” udelades, hente dette indhold fra Open Graph-tag <meta property="og:title"> fra den delte side. Hvis parameteren “summary” udelades, anvendes Open Graph-tag <meta property="og:description"> på samme måde. Hvad angår parameteren “source”, er der intet i dokumentationen, der angiver, hvordan denne værdi bruges eller vises, når en webside deles – det ser ud som om, at den roligt kan ignoreres.

Med viden om alt dette vil det, hvis den webside, der deles, har det rette supplement af Open Graph-tags, være tilstrækkeligt blot at angive URL-adressen, da parametrene “title” og “summary” vil blive udfyldt på passende vis.

At sætte det hele sammen

Nu, hvor vi kender den syntaks, der skal bruges, når vi deler websider på sociale medier, hvordan kan vi så helt præcist implementere denne kode? Den mest almindelige måde er måske blot at liste en gruppe delingslinks, der er stylet korrekt med 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>

Tilføjelsen af target="_blank" i ankertagget gør det muligt for delingsdialogen at blive vist i et nyt vindue eller en ny fane, hvilket fungerer godt på alle enheder, fra desktop til mobil.

Men hårdkodning af disse links med procentkodning af forespørgselsparametrene kan være besværligt og fejlbehæftet. For enhver webside, der serveres dynamisk af et CMS, ville dette være den perfekte mulighed for at få denne datakryptering udført på serversiden og indsat hvor det er nødvendigt i HTML.

En anden mulighed er at bruge deling på sociale medier: HTML Links Generator, som jeg har oprettet på CodePen. Dette giver dig mulighed for at indtaste en eller alle de nødvendige parametre, som vi lige har gennemgået, og det vil output den passende HTML, som du kan indsætte i din egen kode.

Se Pen Social Media Sharing: HTML Links Generator af Adam Coti (@adamcoti) på CodePen.

Som freelance webudvikler, der næsten udelukkende arbejder på front-end, har jeg valgt at bruge JavaScript/jQuery-funktionalitet, der uden tilpasning fungerer som en nøglefærdig løsning til mine projekter. På den måde kan jeg være sikker på, at alle delingslinks vil blive håndteret korrekt, uanset om jeg arbejder på et statisk websted, tilpasser WordPress-temaer eller afleverer skabeloner, der skal integreres i et CMS.

Dette er den HTML, jeg bruger, med klasser, der angiver den pågældende delingstjeneste. I JavaScript kaldes funktionen setShareLinks(), der knytter click-hændelser til deleknapperne, når Document Object Model (DOM) er klar:

<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); })}

Den aktuelle websides URL kan nemt fås ved at læse en egenskab i document-objektet. Og for Twitter giver Open Graph-tag <meta property="og:description"> bekvemt et passende indhold til et standard tweet.

Nu lancerer jeg på anmodning af nogle af mine kunder den nyligt dannede URL i et sekundært (pop-up) vindue af en særlig størrelse ved hjælp af window.open(). På de fleste desktop-browsere er dette vindue placeret horisontalt og vertikalt centreret på skærmen. Det er interessant nok, at hvis en bruger er logget ind på sin konto på et socialt medie, vil Facebook og LinkedIn ændre størrelsen på dette sekundære vindue til de nødvendige dimensioner. Twitter gør det ikke, så jeg bruger en standardbredde og -højde, der giver det nok plads. Hvad angår responsivitet, fortolker tablets og mobile enheder det sekundære vindue som en ny fane. En demo af denne funktionalitet kan findes på CodePen.

Se Pen Social Media Sharing: Automated Link Creator af Adam Coti (@adamcoti) på CodePen.

Men brugen af et pop op-vindue er, selv om det engang var almindeligt, nu blevet misbilliget af tilgængelighedshensyn. En simpel løsning er at indstille variablen params til en tom streng i ovenstående JavaScript. Derved lanceres URL-adressen i et nyt vindue eller en ny fane afhængigt af brugerens browserindstilling.

Konklusion

Som et grusomt ordsprog siger, er der mange måder at flå en kat på. Ovenstående teknik er simpelthen min foretrukne metode. Du har måske en bedre og mere optimeret måde. Måske ved at bruge dataattributter i HTML (f.eks. til at angive hashtags), som kan læses af JavaScript og tilføjes som en forespørgselsparameter, hvor det er nødvendigt. Forhåbentlig kan dette i det mindste tjene som inspiration til din egen implementering.