I somras skrev jag The Essential Meta Tags for Social Media om hur utvecklare kan förbereda webbsidor för att optimera deras utseende när de delas på sociala medier. Men hur är det med att skapa länkarna så att användarna kan dela dessa webbsidor? Facebook, Twitter och LinkedIn erbjuder många sätt att göra detta, vissa med knappgeneratorer och andra som kräver extern JavaScript. För att undvika allt detta kan du dock skapa dina egna länkar för att dela webbsidor. Och det bästa är att det är enkelt att göra själv. Så här gör du.
- Grundläggande koncept: När du delar webbsidor med hjälp av länkar skickar du i princip en GET-förfrågan (dvs. du klickar på en länk) till en URL som tillhandahålls av varje social mediatjänst. Genom att lägga till en rad namn- och värdepar (frågeparametrar som ?title=Title) i slutet av URL:n kan du ange URL:n för den webbsida du vill dela och ibland ytterligare information.
- Att sätta ihop allting
- Slutsats
Vissa symboler i GET-begäranden, som kallas ”reserverade tecken”, måste kodas på rätt sätt för att inte störa normala webbläsarfunktioner. Dessa tecken är föremål för ”procentkodning” – det vill säga de representeras i frågeparametrar med en ”%” följt av en tvåsiffrig hex-kod. Detta är de reserverade tecknen och deras procentkodade motsvarigheter.
| ! | # | $ | & | ’ | ( | ) | * | + |
|---|---|---|---|---|---|---|---|---|
| %21 | %23 | %24 | %26 | %27 | %28 | %29 | %2A | %2B |
| , | / | : | ; | = | ? | @ | ||
|---|---|---|---|---|---|---|---|---|
| %2C | %2F | %3A | %3B | %3D | %3F | %40 | %5B | %5D |
Note: Ett mellanslag kan representeras av ”%20” eller ”+”.
Det finns naturligtvis ingen anledning att memorera dessa hexakoder. Det finns många resurser som tillhandahåller konverteringar (Bing har en sådan inbyggd i sökmotorn) och, som du snart kommer att se, kan JavaScript också hantera det tunga arbetet i detta avseende. Låt oss titta på några av de mer populära sociala medietjänsterna och lära oss hur vi kan dela webbsidor via dem.
I sin guide för utvecklare anger Facebook följande URL för att skicka in GET-förfrågningar när man delar en webbsida:
https://www.facebook.com/dialog/shareOch även om det finns fyra förfrågningsparametrar tillgängliga krävs endast två: URL:n för den webbsida som du vill dela och ett App-ID, som utvecklare kan få genom att registrera sig på Facebook. Om du inte har ett App-ID är registreringsprocessen inte betungande, men det finns ingen anledning att bry sig när det finns en ännu enklare lösning.
Facebooks ursprungliga metod för att dela webbsidor, utan det nödvändiga App-ID:t, nämns inte längre i någon av deras dokumentationer, men den stöds fortfarande. Eftersom otaliga webbplatser använder den här metoden kan jag faktiskt inte föreställa mig att den skulle bli överspelad inom en snar framtid. Den här webbadressen är:
https://www.facebook.com/sharer.phpDen enda tillgängliga parametern är ”u”, som används för att ange webbadressen för den webbsida du vill dela. Här är ett exempel som delar CSS-Tricks hemsida på Facebook – klipp och klistra in i en webbläsare för att se resultatet.
https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F
Som tidigare förklarats är den delade webbadressen nödvändigtvis procentkodad. Observera också hur ”?” betecknar början av den första frågeparametern. Efterföljande frågeparametrar separeras med ”&”, vilket vi kommer att se inom kort.
Twitter hänvisar till att dela en webbsida via URL som en Tweet Web Intent – den URL som ska användas är:
https://twitter.com/intent/tweetTill skillnad från Facebook, där endast webbsidan som ska delas kan specificeras, tillåter Twitter att du häftar på lite text och ett obegränsat antal hashtaggar. Användarna kommer att ha möjlighet att redigera allt detta innan de twittrar, men det ger dem ett försprång ifall de inte orkar. Låt oss till exempel säga att du vill twittra följande information:
| parameter | värde |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| text | Tips, tricks och tekniker för att använda Cascading Style Sheets. |
| hashtags | css html |
Den URL för detta, med frågeparametrarna procentkodade och radbrytningar tillagda för tydlighetens skull, är:
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,htmlDet ger dig:
Du märker att Twitter gör ett förval av texten, vilket gör det enkelt för användaren att redigera den. Och kom ihåg att tweeten måste vara på mindre än 140 tecken, så det är bäst att inte lämna en för lång text. För enkelhetens skull utelämnade jag diskussionen om tre mindre använda parametrar, som finns beskrivna i detalj i Twitters Developers Documentation. Med dessa ytterligare parametrar kan du ange det användarnamn som är kopplat till tweeten, föreslagna relaterade användarnamn och ett ID för en relaterad tweet.
Den URL som ska användas när du delar på LinkedIn är:
https://www.linkedin.com/shareArticleTotalt finns det fem parametrar tillgängliga enligt det här diagrammet från LinkedIns utvecklardokumentation:
| Parameter | Description | Max Length | Required |
|---|---|---|---|
| url | Den url-kodade URL:n för den sida du vill dela. | 1024 | Ja |
| mini | Ett obligatoriskt argument vars värde alltid måste vara: true | 4 | Ja |
| title | Det url-kodade titelvärdet som du vill att du använder. | 200 | No |
| summary | Den url-kodade beskrivning som du vill använda. | 256 | No |
| source | Den url-kodade källan till innehållet (t.ex. din webbplats eller ditt programnamn) | 200 | No |
Inom URL:en för den webbsida som du vill dela krävs en annan frågeparameter som kallas ”mini”. Men som du kan se ändras dess värde aldrig, så vi kan koda in den i URL:en. För att demonstrera detta, låt oss dela följande på LinkedIn:
| parameter | värde |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| title | CSS-Tricks |
| summary | Tips, Tricks och tekniker för att använda Cascading Style Sheets. |
| source | CSS-Tricks |
Detta ger följande URL – återigen har radbrytningar lagts till för tydlighetens skull:
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
Och även om parametern ”title” inte nämns uttryckligen i dokumentationen, om parametern ”title” utelämnas, hämtar LinkedIn det här innehållet från Open Graph-taggen <meta property="og:title"> från den delade sidan. På samma sätt används Open Graph-taggen <meta property="og:description"> om parametern ”summary” utelämnas. När det gäller parametern ”source” finns det inget i dokumentationen som anger hur det här värdet används eller visas när man delar en webbsida – det ser ut som om det säkert kan ignoreras.
Med tanke på allt detta, om webbsidan som delas har rätt komplement av Open Graph-taggar, räcker det med att ange webbadressen eftersom parametrarna ”title” och ”summary” kommer att fyllas på lämpligt sätt.
Att sätta ihop allting
När vi nu känner till syntaxen som ska användas när vi delar webbsidor på sociala medier, hur exakt kan vi implementera denna kod? Det kanske vanligaste sättet är att helt enkelt lista en grupp delningslänkar som stylats på lämpligt sätt 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>Insättningen av target="_blank" i ankartaggen gör att dialogrutan för delning visas i ett nytt fönster eller en ny flik, vilket fungerar bra på alla enheter, från stationära datorer till mobiler.
Men hårdkodning av dessa länkar, med procentuell kodning av frågeparametrarna, kan vara tråkigt och felkänsligt. För alla webbsidor som serveras dynamiskt av ett CMS skulle detta vara det perfekta tillfället att få denna datakryptering utförd på serversidan och infogas där det behövs i HTML.
Ett annat alternativ är att använda delning i sociala medier: HTML Links Generator som jag skapade på CodePen. Där kan du ange någon eller några av de nödvändiga parametrarna som vi just har gått igenom, och den kommer att ge ut lämplig HTML som du kan infoga i din egen kod.
Se Pen Social Media Sharing: HTML Links Generator av Adam Coti (@adamcoti) på CodePen.
Som frilansande webbutvecklare som nästan uteslutande arbetar med front-end har jag valt att använda JavaScript/jQuery-funktionalitet som utan anpassning fungerar som en nyckelfärdig lösning för mina projekt. På så sätt kan jag vara säker på att alla delningslänkar kommer att hanteras korrekt, oavsett om jag arbetar med en statisk webbplats, anpassar WordPress-teman eller överlämnar mallar som ska integreras i ett CMS.
Detta är den HTML som jag använder, med klasser som anger den särskilda delningstjänsten. I JavaScript anropas funktionen setShareLinks(), som kopplar click-händelser till delningsknapparna, när Document Object Model (DOM) är 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 aktuella webbsidans URL fås enkelt genom att läsa en egenskap i document-objektet. Och för Twitter ger Open Graph-taggen <meta property="og:description"> bekvämt lämpligt innehåll för en standardtweet.
Nu, på begäran av några av mina kunder, lanserar jag den nybildade URL:en i ett sekundärt fönster (popup-fönster) av särskild storlek genom att använda window.open(). På de flesta stationära webbläsare placeras det här fönstret horisontellt och vertikalt centrerat på skärmen. Intressant nog kommer Facebook och LinkedIn, om användaren är inloggad på sitt konto i sociala medier, att ändra storleken på detta sekundära fönster till de nödvändiga dimensionerna. Twitter gör det inte, så jag använder en standardbredd och -höjd som ger det tillräckligt med utrymme. När det gäller responsivitet tolkar surfplattor och mobila enheter det sekundära fönstret som en ny flik. En demo av denna funktionalitet finns på CodePen.
Se Pen Social Media Sharing: Automated Link Creator av Adam Coti (@adamcoti) på CodePen.
Men att använda ett popup-fönster, även om det en gång var vanligt, är numera inte populärt av tillgänglighetsskäl. En enkel lösning är att sätta variabeln params till en tom sträng i ovanstående JavaScript. På så sätt startas webbadressen i ett nytt fönster eller en ny flik beroende på användarens webbläsarinställning.
Slutsats
Som det grymma talesättet säger finns det många sätt att flå en katt på. Ovanstående teknik är helt enkelt den metod jag föredrar. Du kanske har ett bättre och mer optimerat sätt. Kanske genom att använda dataattribut i HTML (för att ange hashtaggar, till exempel) som kan läsas av JavaScript och läggas till som en frågeparameter vid behov. Förhoppningsvis kan detta åtminstone tjäna som inspiration för ditt eget genomförande.
Lämna ett svar