Tlačítka pro sdílení na sociálních sítích

Prosté vložení

Facebook

Na příslušné stránce se získá kód pro vložení Facebook JavaScript SDK.

A následně pro kód daného tlačítka.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/cs_CZ/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Twitter

Na stránce tlačítek dostaneme tento kód:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Google Plus

U Google +1 tlačítka je situace obdobná:

<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Je to celkem jednoduché, ale jak je to s rychlostí a počtem požadavků na externí JavaScripty, obrázky a podobně?

To nejsou zrovna čísla, se kterými by se vyhrávala soutěž o nejrychlejší web.

Použít odkazy

… a případně je nějak hezky nastylovat:

• pohrát si s CSS,
• použít nějakou z milionu dostupných obrázkových sad,
• použít font-ikony, například Font Awesome

Adresy pro sdílení jsou následující.

Stránka pro sdílení se může klidně zobrazovat v nějakém vyskakovacím okně (použití lightboxu a zobrazení v <iframe> je bohužel zakázáno).

Načtení po vyžádání

Protože takové odkazy nejsou úplně plnohodnotné, zajímavý kompromis může být zobrazovat místo skutečných tlačítek jen jejich obrázkové makety. Tedy dát výše zmíněným odkazů pomocí obrázků styl originálních tlačítek, ta se načtou až při nějaké události (například onmouseover elementu s tlačítky). A nejspíš bude vhodné je do daného prostoru absolutně naposicovat / nastavit šířku a overflow: hidden, aby se zamezilo poskakování.

Je otázka, zda si s něčím takovým vyhrát, když lze očekávat, že v rámci ochrany před sledováním (skript pro tlačítko může monitorovat všechny návštěvníky, co na web přijdou) budou tato tlačítka prohlížeči blokována. A funkce těchto tlačítek budou možná přímo v prohlížečích.

Související

• Lazy Load Social Media Buttons
• TIP#202: Jaké sdílecí prvky umístit na web? Proč musí být web sociální?