Tlačítka pro sdílení na sociálních sítích
Různé možnosti, jak mít na webu tlačítka pro sdílení na sociálních sítích.
Prosté vložení
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>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í |
|---|---|---|
| 7 | 0,7 s | |
| 7 | 0,5 s | |
| Google Plus | 7 | 0,3 s |
| Celkem | 21 | 1,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 |
|---|---|
http://www.facebook.com/sharer.php?u=http://example.com
| |
http://twitter.com/share?text=Text&url=http://example.com
| |
| Google Plus | https://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í
Související články
Náhled odkazu při sdílení na sociálních sítích
Jak upravit stránku, aby se hezky zobrazovala při sdílení na Facebooku a Twitteru.
Počet sdílení na Facebooku a Twitteru
Jak pomocí API získat ve JSONu počet sdílení stránky na Facebooku a Twitteru.
Jak na Facebook Instant Articles
Instant Articles je technologie pro rychlé zobrazování obsahu na Facebooku. Jak začít?
Nepotvrzení přečtení zprávy na Facebooku
Jak zabránit, aby se příchozí zpráva na Facebooku označila jako přečtená.