O webu
Facebook Like, Google Plus a Twitter tlačítka

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ě?

Síť Počet HTTP požadavků Přibližná doba načtení
Facebook 7 0,7 s
Twitter 7 0,5 s
Google Plus 7 0,3 s
Celkem211,5 s

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í.

SíťOdkaz
Facebookhttp://www.facebook.com/sharer.php?u=http://example.com
Twitterhttp://twitter.com/share?text=Text&url=http://example.com
Google Plushttps://plus.google.com/share?url=http://example.com

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í