Také máte pod článkem několik tlačítek (pluginů) pro sociální sítě? Umožnit snadno sdílet článek a ukázat, kolik lidí už tak učinilo. Víte, že taková tlačítka dovedou přenést klidně stovky KB dat a načítat se 10 sekund?  Přečtěte si, jak je vytvořit lépe a jednoduše.

Kde je problém?

Vytvořil jsem jednoduchou ukázkovou stránku,do které jsem vložil běžná tlačítka pro sdílení na sociálních sítích. Stránka je k vidění tady: test sociálních tlačítek. Až odkaz rozkliknete, sledujte jak dlouho se tlačítka zobrazují.

Ve stránce není vloženo nic, než sdílecí tlačítka a čtyři odstavečky pro uvození konkrétní sítě a pod tím hned tlačítko. Žádný obsah, styly, nic dalšího. Přesto má stránka přímo obludné rozměry a parametry. Posuďte sami:

  • 22 requestů na různé URL
  • 392,3KB přenesených dat
  • 5.24s (onload: 6.31s) načítání stránky (subjektivní, záleží na připojení a počítači)

Když necháte svého čtenáře takovou zrůdnost stahovat na mobilu, při špatném připojení a s obvyklým FUP, moc vám nepoděkuje. Stránka se mu bude načítat dlouho, vytěžovat síť a zdržovat samotné vykreslení stránky. Dost možná samotná tlačítka přenesou více dat, než vaše stránka s obsahem.

Jasně, část z požadavků a dat zůstane nacachována v prohlížeči a nenačítá se vždy, při prvním přístupu ale ano. Krom toho, veškeré přístupy na váš web zpřístupňujete oněm sociálním sítím. Dovedou tak trackovat jak známé, tak neznámé uživatele. 

Pokud znáte a používáte Firebug nebo jeho obdoby v jiných prohlížečích, ověřte si sami, co taková stránka všechno dělá a jak dlouho ji to trvá. 

Aby toho nebylo málo, tlačítka i po načtení stránky dále komunikují se svou domovskou stránkou a stahují tak další a další KB dat. Stačí na prvek najet myší a ihned vyšle další požadavky a stahuje nová data. Nejaktivnější je v tomto směru prvek pro Google+. Při najetí myší nad každé ze čtyř tlačítek se vykoná celkem dalších 13 požadavků a stáhne 80,4KB dat.

Tlačítka jsem vygeneroval vždy v developer sekci té které sítě, tedy:

Externí služby - AddThis

Možná znáte službu AddThis, která umožňuje sociální tlačítka spravovat jednotně. V podstatě si vyberete design, služby a ona vám vygeneruje kód na míru pro vložení do stránky. Může to být lepší, než vkládat tlačítka po jednom? Vytvořil jsem testovací stránku pro tlačítka vložená přes AddThis. Načítá se (zdánlivě) jen jeden soubor - ten z webu addthis.com.

Tady jsou hodnoty:

  • 28 requestů na různé URL
  • 378,8KB přenesených dat
  • 5.78s načítání stránky (subjektivní, záleží na připojení a počítači)
Nejen, že neuspoříte žádná data, ale stránka udělá ještě o 6 dalších requestů navíc. Krom toho jsou tlačítka kompletně blokována addBlockem. Jako bonus poskytujete svá data nejen sociálním sítím, ale i addthis.com službě (viz podmínky služby). To rozhodně není cesta, jak odlehčit uživateli. 

Jak to dělat lépe?

Vždyť je to jen tlačítko, obrázek. Musí být lepší způsob, jak umožnit uživatelům sdílet a neprudit je přitom takovou záplavou požadavků a dat. Opravdu potřebujete, aby v bublině vedle tlačítka svítilo, kolik lidí už kliknulo? 

Netahejte žádné scripty a externí data. Pro každou síť si připravte obrázek/ikonku/text, nastavte jej jako odkaz a ten nasměrujte na správnou URL. Načteno bude v mžiku, nebudete umožňovat špehování uživatelů a především - nebudete zatěžovat uživatele.

Každá z běžných sociálních sítí má nějakou URL, na kterou jde poslat v parametrech adresu, popis nebo text a umožnit tak sdílet vaši stránku. Takovou url dovedete do tlačítka zanést ať už v okamžiku vykreslení stránky pomocí redakčního systému nebo programovacího jazyka, nebo až po načtení například pomocí vlastního jednoduchého JavaScriptu. Pokud si na to netroufáte, zeptejte se svého webmastera a ukažte mu tuto stránku. Bude vědět, jak na to.

Provozovatelé sociálních sítí to nepovažují za preferovanou cestu sdílení. Přicházejí tak o mnoho cených dat, která jim tak (nevědomky) poskytujete. Pro běžné sítě jsem tedy připravil popis, jak na to.

Twitter URL pro sdílení

Detailní popis je ve vývojářské dokumentaci na twitteru.Nejjednodušší zápis URL pro sdílení na twitteru může být:

http://twitter.com/share?url={articleUrl}&text={articleTitle}

Proměnné {articleUrl} a {articleTitle} nahraďte za konkrétní hodnoty pro vaši stránku(pro každý článek). Hodnoty by měly být URL encodovány (jak na to viz dokumentace pro PHPJavaScriptJavu). Další možné parametry jsou například {via}, {related} nebo {hashtags}. Kompletní seznam a návod najdete v již zmíněné dokumentaci.

Facebook URL pro sdílení

U facebooku se mi nepovedlo dohledat přímou dokumentaci ke konstrukci URL pro sdílení. Nějaká dokumentace je zde, ale samotná adresa tam popsána není.

Adresa pro sdílení na facebooku je jednodušší, než u jiných služeb. Stačí předat cílovou stránku a Facebook si sám načte potřebné metainformace (titulek, text, obrázek). Je tak dobré mít svůj web dobře upravený pro čtení facebook robotem. Jak na to jsem psal již dříve v článku Má vaše stránka meta informace v pořádku?

Adresa má následující formát:

http://www.facebook.com/sharer.php?u={articleUrl}

ArticleUrl by mělo být opět encodováno.

Google+ URL pro sdílení

I Google+ poskytuje jednoduchou adresu pro sdílení článku. Moc se tím nechlubí a raději by, abyste si na web nacpali jeho tlačítko, dokumentaci však poskytuje.

Zápis URL je obdobný Facebooku, tedy:

https://plus.google.com/share?url={articleUrl}

LinkedIn URL pro sdílení

Detailní popis konstrukce URL je popsán v dokumentaci. Tvar je takový:

http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource} 

Parametry musí být URL encodované a nejsou všechny povinné (měl by stačit odkaz na článek, zbytek si dovede linkedin donačíst sám z metadat).

Co tím získám?

  • Významně nižsí objem dat přenášených při načtení stránky (ocení hlavně mobilní uživatelé).
  • Velmi rychlé načítání tlačítek.
  • Nižší potřebný výkon pro zobrazení stránky (prohlížeč nebude 10s chroupat, než tlačítka vykreslí).
  • Získáte plnou kontrolu nad svým webem (sámi si určíte, jak bude sdílecí prvek vypadat).
  • Znemožníte sledování vašich čtenářů sociálními sítěmi.
  • Budete mít jednotný vzhled a funkce tlačítek.
  • Tlačítka vám nebude blokovat AdBlock (plugin pro skrytí reklamy na webu)

Zároveň ale přijdete o vždy aktuální obrázek tlačítka a taky o bublinu s počtem kliknutí. Počet kliknutí ale může naopak odvádět od úmyslu sdílet článek. Někdo nechce sdílet první, jiný nechce být pětistý v řadě.

Ozkoušejte si

Pokud si chcete zkusit, jak to funguje, klikněte prosím na některé ze sociálních tlačítek pod tímto článkem. Otestujete, že opravdu fungují a pokud sdílení potvrdíte, zároveň tak budete šířit osvětu a tipy svým přátelům. Děkuji vám :-) 

Protože nejsem znalcem sociálních sítí a jejich funkcí, dost možná jsem přehlédl nebo zapomněl něco podstatného. Pak napište prosím svou připomínku nebo tip do komentářů.