Nejjednodušší (a nejvýkonnější) způsob, jak nabídnout odkazy pro sdílení na sociálních sítích

V létě jsem napsal knihu The Essential Meta Tags for Social Media o tom, jak mohou vývojáři připravit webové stránky, aby optimalizovali jejich vzhled při sdílení na sociálních sítích. Jak je to ale s vytvářením odkazů, které uživatelům umožní tyto webové stránky sdílet? Facebook, Twitter a LinkedIn nabízejí řadu způsobů, jak to provést, přičemž některé zahrnují generátory tlačítek a jiné vyžadují externí JavaScript. Abyste se tomu všemu vyhnuli, můžete si však vytvořit vlastní odkazy pro sdílení webových stránek. A nejlepší na tom je, že to můžete jednoduše udělat sami. Zde je návod, jak na to.

Základní koncept: Při sdílení webových stránek pomocí odkazů v podstatě odesíláte požadavek GET (tj. kliknete na odkaz) na adresu URL, kterou poskytuje každá služba sociálních médií. Poté připojením řady dvojic jméno/hodnota (parametrů dotazu, jako je ?title=Title) na konec této adresy URL můžete specifikovat adresu URL webové stránky, kterou chcete sdílet, a někdy i další informace.

No, některé symboly v požadavcích GET, známé jako „vyhrazené znaky“, musí být správně zakódovány, aby nenarušovaly běžné funkce prohlížeče. Tyto znaky podléhají „procentuálnímu kódování“ – to znamená, že jsou v parametrech dotazu reprezentovány znakem „%“ následovaným dvoumístným hexadecimálním kódem. Toto jsou vyhrazené znaky a jejich procentuálně kódované ekvivalenty:

Pozn: Mezera může být reprezentována znakem „%20“ nebo „+“.

Tyto šestnáctkové kódy si samozřejmě nemusíte pamatovat. Existuje mnoho zdrojů, které poskytují převody (Bing má jeden zabudovaný ve vyhledávači), a jak brzy uvidíte, JavaScript si v tomto ohledu poradí i s těžkou prací. Podívejme se na několik nejoblíbenějších služeb sociálních médií a zjistěme, jak můžeme jejich prostřednictvím sdílet webové stránky.

Facebook

Podle jejich příručky pro vývojáře uvádí Facebook následující adresu URL pro odesílání požadavků GET při sdílení webové stránky:

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

Přestože jsou k dispozici čtyři parametry dotazu, jsou vyžadovány pouze dva: adresa URL webové stránky, kterou chcete sdílet, a ID aplikace, které mohou vývojáři získat registrací na Facebooku. Pokud ID aplikace nemáte, není proces registrace nijak zatěžující, ale není třeba se tím zabývat, když existuje ještě jednodušší řešení.

Původní způsob sdílení webových stránek bez požadovaného ID aplikace již Facebook v žádné své dokumentaci neuvádí, ale stále jej podporuje. Vzhledem k tomu, že tuto metodu používá nespočet webových stránek, nedovedu si představit, že by byla v dohledné době zastaralá. Tato adresa URL je:

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

Jediným dostupným parametrem je „u“, který slouží k zadání adresy URL webové stránky, kterou chcete sdílet. Zde je příklad, který sdílí domovskou stránku CSS-Tricks na Facebooku – klidně vystřihněte a vložte do prohlížeče, abyste viděli výsledek.

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

Jak již bylo vysvětleno, sdílená adresa URL je nutně procentuálně kódovaná. Všimněte si také, jak „?“ označuje začátek prvního parametru dotazu. Následující parametry dotazu jsou odděleny znakem „&“, jak uvidíme za chvíli.

Twitter

Twitter označuje sdílení webové stránky prostřednictvím adresy URL jako Tweet Web Intent – adresa URL, kterou je třeba použít, je:

https://twitter.com/intent/tweet

Na rozdíl od Facebooku, kde lze specifikovat pouze sdílenou webovou stránku, Twitter umožňuje připojit nějaký text a libovolný počet hashtagů. Uživatelé budou mít možnost vše před odesláním tweetu upravit, ale dává jim to náskok pro případ, že by se nemohli obtěžovat. Řekněme, že chcete tweetovat například následující informace:

Adresa URL s procentuelně zakódovanými parametry dotazu a přidanými zalomeními řádků pro přehlednost je následující:

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

A tak získáte:

Všimněte si, že Twitter předem vybírá text, což uživateli umožňuje snadné úpravy. A nezapomeňte, že tweet musí mít méně než 140 znaků, takže raději nedodávejte příliš dlouhou kopii. V zájmu jednoduchosti jsem vynechal diskusi o třech méně používaných parametrech, které najdete podrobně popsané v dokumentaci pro vývojáře Twitteru. Tyto další parametry umožňují zadat uživatelské jméno spojené s tweetem, navrhovaná související uživatelská jména a ID souvisejícího tweetu.

LinkedIn

Adresa URL, kterou je třeba použít při sdílení na LinkedIn, je:

https://www.linkedin.com/shareArticle

Celkem je k dispozici pět parametrů, které podrobně popisuje tato tabulka převzatá z dokumentace pro vývojáře LinkedIn:

Kromě adresy URL webové stránky, kterou chcete sdílet, je vyžadován další parametr dotazu s názvem „mini“. Jak ale vidíte, jeho hodnota se nikdy nemění, takže jej můžeme do adresy URL zadat natvrdo. Pro demonstraci si ukážeme následující sdílení na síti LinkedIn:

Tím získáte následující adresu URL – opět pro přehlednost přidány zalomení řádků:

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

Ačkoli to v jejich dokumentaci není výslovně uvedeno, pokud je vynechán parametr „title“, LinkedIn tento obsah převezme ze značky Open Graph <meta property="og:title"> ze sdílené stránky. Podobně pokud je vynechán parametr „summary“, použije se značka Open Graph <meta property="og:description">. Pokud jde o parametr „source“, nic v dokumentaci neuvádí, jak se tato hodnota použije nebo zobrazí při sdílení webové stránky – vypadá to, že ji lze bezpečně ignorovat.

Pokud toto všechno víme, pokud má sdílená webová stránka správné doplnění značek Open Graph, postačí pouhé zadání adresy URL, protože parametry „title“ a „summary“ budou vhodně vyplněny.

Když to všechno dáme dohromady

Teď, když známe syntaxi, kterou je třeba použít při sdílení webových stránek na sociálních sítích, jak přesně můžeme tento kód implementovat? Asi nejběžnějším způsobem je prosté vypsání skupiny odkazů pro sdílení vhodně stylizovaných pomocí 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>

Přidání target="_blank" do značky kotvy umožňuje zobrazit dialogové okno pro sdílení v novém okně nebo kartě, což dobře funguje na všech zařízeních, od stolních počítačů po mobilní telefony.

Tvrdé kódování těchto odkazů s procentuálním kódováním parametrů dotazu však může být zdlouhavé a náchylné k chybám. Pro jakoukoli webovou stránku dynamicky obsluhovanou systémem CMS by to byla ideální příležitost, aby se toto chroupání dat provádělo na straně serveru a vkládalo se tam, kde je to potřeba, do jazyka HTML.

Další možností je použití sdílení v sociálních médiích: HTML Links Generator, který jsem vytvořil na CodePenu. Ten vám umožní zadat libovolné nebo všechny potřebné parametry, které jsme si právě prošli, a vygeneruje příslušné HTML, které můžete vložit do vlastního kódu.

Podívejte se na Pen Social Media Sharing:

Jako webový vývojář na volné noze pracující téměř výhradně na front-endu jsem se rozhodl používat funkce JavaScriptu/jQuery, které bez přizpůsobení fungují jako hotové řešení pro mé projekty. Tak mám jistotu, že všechny odkazy na sdílení budou správně zpracovány, ať už pracuji na statickém webu, přizpůsobuji témata WordPressu nebo předávám šablony k integraci do CMS.

Toto je HTML, které používám, s třídami označujícími konkrétní službu sdílení. V JavaScriptu je funkce setShareLinks(), která připojuje click události k tlačítkům pro sdílení, volána, když je připraven objektový model dokumentu (DOM):

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

Adresu URL aktuální webové stránky snadno získáte načtením vlastnosti objektu document. A pro Twitter značka Open Graph <meta property="og:description"> pohodlně poskytuje vhodný obsah pro výchozí tweet.

Nyní na žádost některých svých klientů spouštím nově vytvořenou adresu URL ve speciálně velkém sekundárním (pop-up) okně pomocí window.open(). Ve většině desktopových prohlížečů je toto okno umístěno horizontálně a vertikálně uprostřed obrazovky. Zajímavé je, že pokud je uživatel přihlášen ke svému účtu na sociální síti, Facebook a LinkedIn změní velikost tohoto sekundárního okna na potřebné rozměry. Twitter tak nečiní, takže používám výchozí šířku a výšku, které mu poskytují dostatečný prostor. Co se týče odezvy, tablety a mobilní zařízení interpretují sekundární okno jako novou kartu. Ukázku této funkce najdete na webu CodePen.

Podívejte se na stránku Sdílení sociálních médií Pen:

Používání vyskakovacího okna, ačkoli bylo kdysi běžné, je dnes z důvodu přístupnosti odmítáno. Jednoduchým řešením je nastavit ve výše uvedeném JavaScriptu proměnnou params na prázdný řetězec. Tím se adresa URL spustí v novém okně nebo na nové kartě v závislosti na nastavení prohlížeče uživatele.

Závěr

Jak se říká, kočka se dá stáhnout z kůže mnoha způsoby. Výše uvedená technika je jednoduše mnou preferovaná metoda. Možná máte lepší, optimalizovanější způsob. Třeba pomocí datových atributů v HTML (například pro zadání hashtagů), které lze načíst pomocí JavaScriptu a v případě potřeby připojit jako parametr dotazu. Doufejme, že to může sloužit alespoň jako inspirace pro vaši vlastní implementaci.