Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Porady Odkrywanie ukrytej treści po kliknięciu "Lubię to!"

Warsztat / Porady

Odkrywanie ukrytej treści po kliknięciu "Lubię to!"

Bartosz Romanowski 1 kwietnia 2012 komentarze ()

Praktycznie wszystkim administratorom stron internetowych zależy na tym, aby jak najwięcej osób klikało we wszechobecne przyciski "Lubię to!" oraz dołączało do grona fanów strony. Jednym ze sposobów na zmuszenie użytkowników do "polubienia" jakiejś strony jest prezentacja interesujących treści dopiero po kliknięciu przycisku "Lubię to!".

Zastosowanie takiego zabiegu dla szczególnie interesujących czy poszukiwanych treści może mieć niebagatelny wpływ na oglądalność naszego serwisu. Trzeba jednak pamiętać aby nie przesadzić - łatwo w ten sposób zniechęcić użytkowników do odwiedzania naszej strony.

Aby wprowadzić taki mechanizm do naszego serwisu będziemy musieli zarejestrować aplikację w serwisie Facebook - jest to szybka, prosta i oczywiście bezpłatna operacja, którą dokładniej opisaliśmy w tym artykule. Po zarejestrowaniu aplikacji otrzymamy jej unikalny identyfikator, którego będziemy potrzebować w naszym skrypcie.

Facebook umożliwia przechwytywanie niektórych zdarzeń za pomocą metody Event.subscribe. Możemy w ten sposób wykonać dowolne operacje po (między innymi) kliknięciu w przycisk "Lubię to!" (zdarzenie edge.create), co wykorzystamy w naszym przykładzie. Warto dodać, że wywołanie tej metody musi być poprzedzone inicjalizacją JavaScript SDK (FB.init).

Najprostsza wersja skryptu pokazującego jakąś treść po kliknięciu przycisku "Lubię to!" może mieć następującą postać:

Kod: Zaznacz cały
<html>
<head>
    <title>Polub aby odkryć</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '16999999999999', // ID aplikacji
            channelUrl : 'http://nasza-domena.pl/channel.html',
                status     : true,
                cookie     : true,
                xfbml      : true
            });

            FB.Event.subscribe('edge.create',
                // funkcja wywoływana po kliknięciu przycisku "Lubię to!"
                function(response) {
                // w zmiennej 'response' znajduje się polubiony URL
                    document.getElementById('secured-content').style.display = 'block';
                }
            );  
    };

    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/pl_PL/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
</script>

<fb:like href="http://webhelp.pl" send="false" show_faces="false"></fb:like>
<div id="secured-content" style="display: none;">To jest ukryta treść.</div>

</body>
</html>

W elemencie o identyfikatorze secured-content umieszczamy ukrytą treść, która pojawi się na stronie po kliknięciu przycisku "Lubię to!". Może to być dowolny kod HTML, JavaScript czy osadzone obiekty zewnętrzne. W elemencie <fb:like> definiujemy adres URL, który ma zostać "polubiony" - może to być dowolna strona internetowa, jak również adres strony w serwisie Facebook.

Warto zwrócić uwagę na parametr channelUrl, w którym przekazujemy adres pliku channel.html. Plik ten powinien zawierać tylko jedną linię - ładowanie SDK Facebooka. Jego zawartość może wyglądać na przykład tak:

Kod: Zaznacz cały
<script src="http://connect.facebook.net/pl_PL/all.js"></script>

Oczywiście takie rozwiązanie, mimo że działające, ma jedną podstawową wadę - nasza ukryta treść jest wprawdzie niewidoczna na stronie, ale można ją zobaczyć przeglądając źródło.

Istnieje wiele sposobów na lepsze zabezpieczenie ukrytej treści, ale chyba żaden nie będzie w stu procentach skuteczny. Spróbujmy więc zacząć od prostego zaciemnienia tekstu, które na pewno zadziała na mniej zorientowanych użytkowników. Skorzystamy z funkcji str_rot13 i jej odpowiednika napisanego w JavaScripcie. Zmodyfikowany kod JS może wyglądać następująco:

Kod: Zaznacz cały
FB.Event.subscribe('edge.create',
    function(response) {
        document.getElementById('secured-content').style.display = 'block';
        document.getElementById('secured-content').innerHTML = str_rot13(document.getElementById('secured-content').innerHTML);
    }
);  

function str_rot13 (str) {
    return (str + '').replace(/[a-z]/gi, function (s) {
        return String.fromCharCode(s.charCodeAt(0) + (s.toLowerCase() < 'n' ? 13 : -13));
    });
}

Nasz ukrywany kod przed wyświetleniem musimy potraktować wspomnianą funkcją str_rot13:

Kod: Zaznacz cały
<fb:like href="http://google.com" send="false" layout="button_count" show_faces="false"></fb:like>
<div id="secured-content" style="display: none;"><?php echo str_rot13('To jest zabezpieczona treść.'); ?></div>

Jak wcześniej wspomniałem, "zabezpieczenie" będzie skuteczne tylko w starciu z laikami - średnio obeznany w temacie programista zorientuje się w czym rzecz w przeciągu kilku minut.

Moim celem było jedynie przedstawienie mechanizmu, dzięki któremu możemy wykonywać różne akcje po kliknięciu przez użytkownika przycisku "Lubię to!". Nasz przykładowy kod można rozbudować o obsługę ciasteczek (przydatne gdy ktoś, kto już polubił stronę, wchodzi na nią ponownie - przycisk "Lubię to!" jest nieaktywny, a treść ukryta) czy skuteczniejszą metodę ukrywania treści (na przykład pobieranie jej za pomocą AJAXa z serwera).

Użytkownicy WordPressa mogą skorzystać z wtyczki Like Gate, która oferuje analogiczną do przedstawionej w niniejszym tekście funkcjonalność.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook