De afgelopen zomer heb ik The Essential Meta Tags for Social Media geschreven over hoe ontwikkelaars webpagina’s zo kunnen voorbereiden dat ze er optimaal uitzien wanneer ze worden gedeeld op sociale media. Maar hoe zit het met het maken van de links waarmee gebruikers deze webpagina’s kunnen delen? Facebook, Twitter, en LinkedIn bieden tal van manieren om dit te doen, sommige met behulp van knop generatoren en anderen die externe JavaScript nodig hebben. Maar om dat allemaal te vermijden, kunt u uw eigen links maken om webpagina’s te delen. En het beste deel is dat het eenvoudig is om het zelf te doen. Hier volgt hoe.
Basisconcept: Just a Link
Wanneer u webpagina’s deelt met behulp van links, verzendt u in wezen een GET-verzoek (d.w.z. klikken op een link) naar een URL die door elke sociale-mediadienst wordt verstrekt. Door vervolgens een reeks naam/waarde-paren (queryparameters zoals ?title=Title) aan het einde van deze URL toe te voegen, kunt u de URL van de webpagina die u wilt delen en, soms, aanvullende informatie specificeren.
Nu moeten bepaalde symbolen in GET-verzoeken, bekend als “gereserveerde tekens”, op de juiste wijze worden gecodeerd om niet te interfereren met normale browserfuncties. Deze tekens zijn onderworpen aan “percent-encoding” – dat wil zeggen dat ze in query-parameters worden weergegeven met een “%” gevolgd door een tweecijferige hex-code. Dit zijn de gereserveerde tekens en hun procentgecodeerde equivalenten.
| ! | # | $ | & | ‘ | ( | ) | * | + |
|---|---|---|---|---|---|---|---|---|
| %21 | %23 | %24 | %26 | %27 | %28 | %29 | %2A | %2B |
| , | / | : | ; | = | ? | @ | ||
|---|---|---|---|---|---|---|---|---|
| %2C | %2F | %3A | %3B | %3D | %3F | %40 | %5B | %5D |
Noot: Een spatie kan worden weergegeven door “%20” of “+”.
Natuurlijk is het niet nodig om deze hexcodes uit het hoofd te leren. Er zijn veel bronnen die conversies aanbieden (Bing heeft er een ingebouwd in de zoekmachine) en, zoals je spoedig zult zien, kan JavaScript ook het zware werk aan in dit verband. Laten we eens kijken naar een paar van de meer populaire social media services en leren hoe we webpagina’s via hen kunnen delen.
Per hun Developer’s Guide, specificeert Facebook de volgende URL om GET requests in te dienen bij het delen van een webpagina:
https://www.facebook.com/dialog/shareTerwijl er vier query parameters beschikbaar zijn, zijn er slechts twee vereist: de URL van de webpagina die je wilt delen en een App ID, die ontwikkelaars kunnen verkrijgen door zich te registreren bij Facebook. Als je geen App ID hebt, is het registratieproces niet lastig, maar het is niet nodig als er een nog eenvoudigere oplossing bestaat.
De oorspronkelijke methode van Facebook om webpagina’s te delen, zonder de vereiste App ID, wordt niet meer genoemd in hun documentatie, maar het wordt nog steeds ondersteund. Ontelbaar veel websites gebruiken deze methode, dus ik kan me niet voorstellen dat deze snel zal worden afgeschaft. Deze URL is:
https://www.facebook.com/sharer.phpDe enige beschikbare parameter is “u”, die wordt gebruikt om de URL van de webpagina die je wilt delen te specificeren. Hier is een voorbeeld van het delen van de homepage van CSS-Tricks op Facebook – ga je gang, knip-en-plak in een browser om het resultaat te zien.
https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F
Zoals eerder uitgelegd, is de gedeelde URL noodzakelijkerwijs procent-gecodeerd. Merk ook op hoe “?” het begin van de eerste queryparameter aanduidt. De volgende queryparameters worden gescheiden door “&”, zoals we zo zullen zien.
Twitter verwijst naar het delen van een webpagina via een URL als een Tweet Web Intent – de te gebruiken URL is:
https://twitter.com/intent/tweetIn tegenstelling tot Facebook, waar alleen de te delen webpagina kan worden gespecificeerd, staat Twitter toe dat je er wat tekst en een willekeurig aantal hashtags aan toevoegt. Gebruikers hebben de mogelijkheid om dit alles aan te passen voordat ze tweeten, maar het geeft ze een voorsprong voor het geval ze niet gehinderd kunnen worden. Stel dat u bijvoorbeeld de volgende informatie wilt tweeten:
| parameter | waarde |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| tekst | Tips, trucs en technieken voor het gebruik van Cascading Style Sheets. |
| hashtags | css html |
De URL daarvoor, met de queryparameters percent-gecodeerd en regeleinden toegevoegd voor de duidelijkheid, is:
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,htmlEn dat levert op:
Je zult zien dat Twitter de tekst vooraf selecteert, zodat de gebruiker die gemakkelijk kan bewerken. En vergeet niet dat de tweet onder de 140 tekens moet blijven, dus het is beter geen te lange tekst aan te leveren. In het belang van de eenvoud heb ik de bespreking van drie minder gebruikte parameters achterwege gelaten, die in detail beschreven kunnen worden in Twitter’s Developers Documentation. Met deze extra parameters kunt u de gebruikersnaam opgeven die bij de tweet hoort, suggesties voor gerelateerde gebruikersnamen en een ID van een gerelateerde tweet.
De te gebruiken URL bij het delen op LinkedIn is:
https://www.linkedin.com/shareArticleIn totaal zijn er vijf parameters beschikbaar, zoals gedetailleerd in deze grafiek uit LinkedIn’s Developers documentatie:
| Parameter | Description | Max Length | Required |
|---|---|---|---|
| url | De url-gecodeerde URL van de pagina die u wenst te delen. | 1024 | Ja |
| mini | Een verplicht argument waarvan de waarde altijd moet zijn: true | 4 | Ja |
| title | De url-gecodeerde titelwaarde die u wenst te gebruiken. | 200 | Nee |
| summary | De url-gecodeerde beschrijving die u wenst te gebruiken. | 256 | Nee |
| bron | De url-gecodeerde bron van de inhoud (b.v. uw website of applicatienaam) | 200 | Nee |
Naast de URL van de webpagina die u wilt delen, is nog een queryparameter nodig, genaamd “mini”. Maar, zoals je kunt zien, verandert de waarde nooit, dus kunnen we die hard coderen in de URL. Om dit te demonstreren, laten we het volgende delen op LinkedIn:
| parameter | waarde |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| title | CSS-Tricks |
| summary | Tips, Trucs, en Technieken over het gebruik van Cascading Style Sheets. |
| source | CSS-Tricks |
Dit levert de volgende URL op – ook hier zijn voor de duidelijkheid regeleinden toegevoegd:
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
Hoewel de “title” parameter niet expliciet in hun documentatie wordt vermeld, zal LinkedIn deze inhoud uit de Open Graph tag <meta property="og:title"> van de gedeelde pagina halen. Op dezelfde manier, als de “samenvatting” parameter wordt weggelaten, wordt de Open Graph tag <meta property="og:description"> gebruikt. Wat betreft de “bron”-parameter, niets in de documentatie specificeert hoe deze waarde wordt gebruikt of weergegeven bij het delen van een webpagina – het lijkt erop dat het veilig kan worden genegeerd.
Dit alles wetende, als de webpagina die wordt gedeeld de juiste aanvulling van Open Graph tags heeft, is het simpelweg specificeren van de URL voldoende omdat de parameters “title” en “summary” naar behoren zullen worden gevuld.
Putting it all together
Nu we weten welke syntaxis we moeten gebruiken bij het delen van webpagina’s op sociale media, hoe kunnen we deze code dan precies implementeren? De meest gebruikelijke manier is misschien wel het opsommen van een groep links voor delen, op de juiste manier gestyled met 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>Door target="_blank" in de anchor-tag toe te voegen, verschijnt het dialoogvenster voor delen in een nieuw venster of tabblad, wat goed werkt op alle apparaten, van desktop tot mobiel.
Maar het hard coderen van deze links, met de percentuele codering van de query-parameters, kan vervelend en foutgevoelig zijn. Voor elke webpagina die dynamisch door een CMS wordt geserveerd, zou dit de perfecte gelegenheid zijn om deze gegevens aan de serverkant te laten kraken en waar nodig in de HTML in te voegen.
Een andere optie is het gebruik van de Social Media Sharing: HTML Links Generator die ik heb gemaakt op CodePen. Hiermee kunt u een of alle van de noodzakelijke parameters die we zojuist hebben besproken, en het zal de output van de juiste HTML voor u om in te voegen in uw eigen code.
Zie de Pen Social Media Sharing: HTML Links Generator door Adam Coti (@adamcoti) op CodePen.
Als freelance webontwikkelaar die bijna uitsluitend aan de front-end werkt, heb ik ervoor gekozen om JavaScript/jQuery-functionaliteit te gebruiken die, zonder maatwerk, werkt als een kant-en-klare oplossing voor mijn projecten. Op deze manier kan ik er zeker van zijn dat alle links voor delen correct worden afgehandeld, of ik nu aan een statische website werk, WordPress-thema’s aanpas of sjablonen aanlever die in een CMS moeten worden geïntegreerd.
Dit is de HTML die ik gebruik, met klassen die de specifieke dienst voor delen aanduiden. In de JavaScript wordt de functie setShareLinks(), die click events aan de deelknoppen koppelt, aangeroepen wanneer het Document Object Model (DOM) klaar is:
<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); })}De URL van de huidige webpagina wordt eenvoudig verkregen door een eigenschap van het document-object te lezen. En, voor Twitter, de Open Graph tag <meta property="og:description"> levert handig de juiste inhoud voor een standaard tweet.
Nu, op verzoek van sommige van mijn klanten, lanceer ik de nieuw gevormde URL in een speciaal formaat secundair (pop-up) venster door gebruik te maken van window.open(). Op de meeste desktop browsers, wordt dit venster horizontaal en verticaal gecentreerd op het scherm. Interessant genoeg, als een gebruiker is ingelogd op zijn social media account, zullen Facebook en LinkedIn het formaat van dit secundaire venster aanpassen aan de benodigde afmetingen. Twitter doet dat niet, dus gebruik ik een standaard breedte en hoogte die het voldoende ruimte geeft. Wat de responsiviteit betreft, interpreteren tablets en mobiele toestellen het secundaire venster als een nieuw tabblad. Een demo van deze functionaliteit is te vinden op CodePen.
Zie de Pen Social Media Sharing: Automated Link Creator door Adam Coti (@adamcoti) op CodePen.
Maar het gebruik van een pop-up venster, hoewel ooit gebruikelijk, wordt nu afgekeurd om toegankelijkheidsredenen. Een eenvoudige oplossing is om de variabele params op een lege string te zetten in het bovenstaande JavaScript. Hierdoor wordt de URL in een nieuw venster of tabblad geopend, afhankelijk van de browser-instelling van de gebruiker.
Conclusie
Zoals het gruwelijke gezegde luidt, er zijn vele manieren om een kat te villen. De bovenstaande techniek is gewoon mijn voorkeursmethode. Misschien heeft u een betere, meer geoptimaliseerde manier. Misschien kun je gegevensattributen in de HTML gebruiken (om hashtags te specificeren, bijvoorbeeld) die door JavaScript kunnen worden gelezen en waar nodig als queryparameter kunnen worden toegevoegd. Hopelijk kan dit op zijn minst dienen als inspiratie voor uw eigen implementatie.
Geef een antwoord