Sdílecí tlačítka snadno a rychle

    • Článek je zastaralý, popsaná API už nefungují!

    Implementace sdílecích tlačítek od Facebooku, Twitteru a Googlu je opravdu snadná. Zkopírujete kód ze stránek poskytovatelů a vložíte ho na Váš web. Budou Vám však uživatelé vděčni?

    Sdílecí tlačítka

    Přibližná doba načtení zmíněných tří tlačítek podle jecas.cz je 1,5 sekundy. Pokud však máte na webu více článků a u každého máte sdílecí tlačítko, může se načítání webu protáhnout. Tento problém se projeví markantněji na mobilní zařízeních, kde může být načítání ještě pomalejší. Pokud návštěvníci načítání webu úplně nevzdají, budou minimálně naštvaní. Vzhledem k faktu, že počet mobilních zařízení neustále roste, vyplatí se načítání urychlit.

    Druhým problémem je, že jsou uživatelé, kteří nechtějí svá uživatelská data dávat Googlu ani Facebooku, protože jim prostě nevěří. Nezáleží na tom, jestli je jejich počínání paranoidní nebo ne. Podstatné je, že pokud na našem webu uvidí tlačítka zmíněných služeb, už se nemusí vrátit – nemusí to vždy být problém, ale mohou odejít i dobří čtenáři.

    Řešení je mnoho.

    1. Sdílecí tlačítka nemusíte používat. Můžete tím však přijít o nějaké čtenáře, kteří se na Váš článek dostanou ze sociálních sítí.
    2. Můžete použít pouhý odkaz. Čtenáři však neuvidí, jak moc je článek sdílený a nebudou mít tendenci ho sdílet taky. Jak moc to ovlivňuje sdílení je téma na samotný článek, v němž by bylo určitě mnoho argumentů pro i proti.
    3. Můžete použít tzv. lazy load, o kterém se píše ve zmíněném článku na jecas.cz
    4. Nebo můžete použít odkaz a k němu si počet sdílení načít pomocí PHP. Výhoda je v tom, že uživatel vidí počet sdílení, ale přitom se k němu nestahují tuny Javascriptu, ale pouze jedno číslo. Vše se odehraje na našem serveru. Ušetříme tak mobilní datový balíček uživatele i jeho strach před sledováním špiony z Facebooku a Googlu 🙂

    My se budeme zabývat poslední zmíněnou možností.

    Facebook

    Funkce, pro načtení počtu lajků, sdílení a komentářú na Facebooku (součet těchto tří se zobrazuje v bublině u like buttonu):

    <?php
function getFacebooks($url) { 
    $xml = file_get_contents("http://api.facebook.com/restserver.php?method=links.getStats&urls=".urlencode($url));
    $xml = simplexml_load_string($xml);
    $shares = $xml->link_stat->share_count;
    $likes  = $xml->link_stat->like_count;
    $comments = $xml->link_stat->comment_count; 
    return intval($likes) + intval($shares) + intval($comments);
}?>

    Po článek pak přidáte buď odkaz na lajkování:

    <a target="_blank" href="https://www.facebook.com/plugins/like.php?href=<?php echo urlencode("URL ADRESA STRÁNKY"); ?>">To se mi líbí</a>

    nebo na sdílení:

    <a target="_blank" class="share" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode("URL ADRESA STRÁNKY"); ?>">
Sdílet na Facebooku
</a>

    Odkazy si nastylujete tak, jak budou ve vašem webu vypadat dobře a dodáte k nim kolonku s číslem, aby uživatelé viděli, že to sdílí každý a oni by taky měli:

    <?php
echo getFacebooks ("URL ADRESA STRÁNKY");
?>

    Twitter

    Funkce pro načtení počtu tweetů:

    <?php
function getTweetCount($url)
{
    $url = urlencode($url);
    $twitterEndpoint = "http://urls.api.twitter.com/1/urls/count.json?url=%s";
    $fileData = file_get_contents(sprintf($twitterEndpoint, $url));
    $json = json_decode($fileData, true);
    unset($fileData); // free memory
    //print_r($json);
    return $json['count'];
}
?>

    Odkaz na tweetnutí:

    <a target="_blank" href="https://twitter.com/intent/tweet?via=magnesium2&url=<?php echo urlencode("URL ADRESA STRÁNKY"); ?>">Tweet</a>

    A počet tweetů:

    <?php
echo getTweetCount ("URL ADRESA STRÁNKY");
?>

    Google+

    Funkce pro načtení počtu Google +1

    <?php
function get_plusones($source_url) {
		$curl = curl_init();
		curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
		curl_setopt($curl, CURLOPT_POST, true);
		curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
		curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"'.rawurldecode($source_url).'","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
		curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
		$curl_results = curl_exec ($curl);
		curl_close ($curl);
		$json = json_decode($curl_results, true);
		return isset($json[0]['result']['metadata']['globalCounts']['count'])?intval( $json[0]['result']['metadata']['globalCounts']['count'] ):0;
}
?>

    Odkaz na hodnocení Google +1:

    <a target="_blank" href="https://apis.google.com/u/0/se/0/_/+1/fastbutton?annotation=inline&url=<?php echo urlencode("URL ADRESA STRÁNKY"); ?>">Google +1</a>

    nebo na sdílení na Google+

    <a target="_blank" class="share" href="https://plus.google.com/share?url=<?php echo urlencode("URL ADRESA STRÁNKY"); ?>">Sdílet na Google+</a>

    Zobrazení počtu hodnocení:

    <?php
echo get_plusones("URL ADRESA STRÁNKY");
?>

    Jak si odkazy nastylujete je na Vás. Já se snažil, aby vypadaly podobně, jako tlačítka, která poskytují služby samotné. Uživatelé tak snadno poznají, k čemu odkazy jsou. Ale třeba nechcete tlačítky kazit design Vašeho webu, tak si je nastylujete úplně jinak. To je vlastně také výhoda tohoto postupu: Můžete si tlačítka nastylovat dle libosti.

    Scroll to top