Jednoho krásného dne jsem se rozhodl, že, ač nevyznavač sociálních sítí, přidám do svého redakčního systému odkazy pro sdílení na sociálních sítích. V plánu jsem měl přidat Facebook, Twitter a Google+. „To přece nemůže být vůbec složité“, říkal jsem si, „prostě tam napráskám pár elementů, nějakej JavaScript a možná něco málo nastavení okolo.“ Ó já bláhový. Jak strašně jsem se mýlil.
Jedna není jako druhá
I prošel jsem si tedy pár webů, kde byla tato funkce více či méně implementována, podíval jsem se na generátory tlačítek přímo na stránkách jednotlivých sítí a pustil se do práce. Jelikož mám u článků nízkou patičku, líbila se mi „štíhlá“ varianta s počítadly s tím, že bych je nasázel vedle sebe do pravé strany patičky. Vygeneroval jsem si tedy kódy pro Facebook a Twitter, umístil je na stránky a nahlédl, jak vypadají vedle sebe. No.. Na první pokus to nevypadalo přesně tak, jak sem si představoval. Každé sdíledlo mělo jiný rozměr elementu do kterého se napasovalo a jiné vertikální zarovnání. Ale budiž. S tím, že do mého layoutu nebudou pasovat hned out-of-the-box jsem tak nějak počítal, takže po pár minutách zápasení s CSS už mě tlačítka poslouchala.
Nula nebo nic, vždyť je to fuk
Kouknul jsem tedy, co tlačítka vlastně dělají a co za blábol ke sdílení jsou schopna z obsahu webu vygenerovat. Na to, že jsem ještě neprovedl žádnou konfiguraci <meta> tagů pro facebook, mě vygenerovaný obsah mě víceméně uspokojil, takže jsem pokračoval v krasojízdě. Vytvořil jsem nový článek a koukl na generování obsahu znova. A tady to utrpení teprve začalo. Milé facebookovské sdílítko místo toho, aby zobrazilo bublinu s nulou „lajků“, nezobrazilo políčko s číslem pro jistotu vůbec. Místo něj prostě nechá mezeru. OK, možná mám něco spatně nastavené. Tak sjedem instrukce pro vytváření tlačítka ještě jednou a.. Pane Bože! Oni to tak mají záměrně! Twittřítko tam má nulu ve všech variantách, GooglePlusítko tam má nulu ve všech variantách, jen Facebookové sdílítko, aby to bylo hezky konzistentní, má nulu jen ve velké variantě box_count, ale v mnou vybrané button_count prostě ne.
Yo Dawg, We herd you like generators
Tak jsem tady začal zběsile googlit a sjíždět StackOverflow a podobná fóra, protože tohle přece už někdo musel řešit. No a taky že jo. Řešila to spousta lidí, ale efektivně to nevyřešil prakticky nikdo. Dokonce i na oficiálním fóru Facebook developerů je žádost o nápravu. Někteří se to snažili obcházet tím, že místo skryjí, dokud nebudou mít alespoň jeden „like“, někteří se snažili namalovat si bublinu vlastní a pár jedinců čarovalo s jQuery. Jeden z jQuery pokusů se mi zdál docela životaschopný, protože v zásadě šlo jen o to, že několika elementům se sebrala třída hidden_elem, což, jak název napovídá, je činilo neviditelnými. Tak jsem si tedy otevřel kód lajkovacího tlačítka.. a spadla mi brada. WTF? 217 řádků jakéhosi obskurního HTML-CSS-JS hybrida, co nemá na starosti nic jiného než zobrazení čísla a vygenerování odkazu. A ještě navíc je i ten iframe, ve kterém celé tlačítko bydlí, generován jiným JavaScriptem. Takže tedy jestli to dobře chápu.. Já na své stránce odkážu na JavaScript na Facebooku, ten mi vygeneruje iframe s dalším JavaScriptem, který mi pak vygeneruje tlačítko, díky kterému mohu generovat odkazy pro sociální síť? A to si ještě k tomu musím sám ručně nastavovat jakou stránku s jakým popisem a obrázkem chci sdílet? A to to ještě k tomu ani pořádně nefunguje, protože to nezobrazí tu zatracenou nulu? No tak to já se můžu taky na nějaké opravování cizích chyb pěkně vykašlat.
Google+ a HTML5 a půl
Tak jsem se za tichého nadávání na Facebookem zaměstnané lepiče kódu vrhnul na Google+. Tam mi byl nabídnut krásný elegantní kód na tři řádky HTML a JavaScriptu
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'cs'}
</script>a jeden řádek... eh?
<g:plusone size="medium"></g:plusone>Jeden řádek XML? A jak já mám jako napasovat XML do čistého HTML5? To se na mě validátor bude pěkně ošklivě koukat. No a taky že jo. Ani nabídnutý JavaScript ani XML snippet validací neprošel. Prznit to přes nějaké podlé injektování JavaScriptem se mi nechtělo, a tak jsem strejdu Googla požádal o pomoc podruhé, protože takových HTML puristů, jako jsem já, snad musí být víc. Na rozdíl od předchozího problému, tentokrát se na mě usmálo štěstí. Element <g:plusone> lze nahradit <div>em s patřičnou třídou a díky HTML5 data* atributům si nechá vnutit i parametr s velikostí.
<div class="g-plusone" data-size="medium"></div>OK, tohle prošlo. Tak ještě JavaScript. Milé HTML5 totiž nepovoluje žádný obsah <script> elementu, pokud je nastaven atribut src. Tak co s tím? Kam se ten lang: 'cs' nakonec nacpe? Naštěstí i na tohle existovala odpověď a
<script>window.___gcfg = {lang: 'cs'}</script><script src="https://apis.google.com/js/plusone.js"></script>problém vyřešilo. -1 Googlu za opomenutí zmínky o čemkoliv takovém na stránce s generátorem. Ještě štěstí, že Googlí plusjednítko nepřímo napomáhá pageranku a je po tomhle počátečním martyriu prakticky bez konfigurace. Jinak bych se už vážně naštval.
Staré dobré časy
Jedinému Twitteru nemám co vytknout. Jeho sdílítko je tvořeno jedním <a> tagem a jedním JavaScriptem a od první chvíle funguje tak, jak bych si představoval. V téhle fázi, po několika hodinách naprosto zbytečného drbání s cizími nedodělky, mám všechny tři vysněná sdílecí tlačítka. No jo, ale ta díra místo nuly u Facebooku vypadá divně. A když má ještě navíc každá síť jiný styl bubliny s číslem, vypadá to ještě hůř. Tak víte co? Já vám na to kašlu! Já se teda podřídím a to místo navíc pro tyhle sociální nesmysly obětuju. Stejně mi to ale přijde jako nehorázná drzost. Přoč tam musím mít tolik cizího kódu? Copak to nejde postaru, kdy twitteru stačilo
https://twitter.com/share?url=<url>&text=<text>a Facebook měl starej sharer
http://www.facebook.com/sharer/sharer.php?u=<url>kde jde navíc šel zvolit obrázek k postu. Mám sto chutí to tak udělat i teď. Ale jak znám Facebook, tak „deprecated“ u nich znamená „My vám to vypnem, když se nám to bude zrovna hodit a nikomu o tom neřekneme.“
No tak teda jo
Takže zpět ke kreslicímu prknu. Výšku patičky o pár desitek pixelů zvětším a místo toho abych já určil, jak budou prvky propojení sociálních sítí vypadat, ony to určí mně. To je aspoň pořádná cyberšikana. Sdílítka ale udělám generovaná po načtení stránky, protože nacpat si cizí JavaScripty do hlavičky a pak několik vteřin čekat, až se milostivě natáhnou, to se mi opravdu nechce. Ostatní blogísko-sociální sítě a bookmarkovací odkazy možná udělám někdy příště. A možná taky ne. Ale proč ne? To přece nemůže být vůbec složité. Prostě tam napráskám pár elementů..