Sprawdzenie czy użytkownik polubił fanpage

Coraz częstszą praktyką stosowaną w Internecie, jest zabezpieczanie wglądu do jakiejś treści przed użytkownikami, którzy nie polubili naszej strony na Facebooku. Choć sam nie popieram stosowania tej metody, bo służy jedynie nabijaniu fanów na FB, to ją pokażę. Prezentowana przeze mnie metoda wykorzystuje bibliotekę SDK w JavaScript od Facebooka.

Pierwszą czynnością jaką musimy zrobić, jest utworzenie aplikacji. W tym celu udajemy się na Facebook Developers. Tam dodajemy aplikację. Następnie wchodzimy w tryb edycji i otwieramy zakładkę Website with Facebook Login, po czym wpisujemy adres strony, na której będzie wykonywany skrypt i zapisujemy App ID.

Kolejnym krokiem jest edycja naszej strony. Do sekcji head dodajemy bibliotekę jQuery (jeżeli nie było jej już wcześniej).

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Zaraz po body inicjujemy skrypt od FB i uzupełniamy ID aplikacji:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'TUTAJ WPISZ APP ID',
    status : true, 
    cookie : true, 
    xfbml  : true  
  });
</script>

Teraz musimy dodać 3 elementy do treści strony, które będą zawierały treść przed polubieniem, po polubieniu i informację o potrzebie logowania.

<div id="FB_container_notlike">Aby zobaczyć tą treść, musisz polubić nasz Fanpage.</div>
<div id="FB_container_like">Ukryta treść dostępna po polubieniu.</div>
<div id="FB_login_info">Nie jesteś zalogowany na FB. Kliknij <a href="#">tutaj</a>, aby to zrobić.</div>

Dla tych elementów należy ustawić w CSS odpowiednią wartość dotyczącą wyświetlania:

#FB_container_notlike, #FB_container_like, #FB_login_info {
	display: none;
}

Okej, czas na część właściwą, czyli skrypt, który będzie weryfikował polubienie oraz zalogowanie użytkownika na FB, a właściwie zgodę na integrację z naszą aplikacją. Cofamy się do sekcji head i dodajemy:

<script type="text/javascript">
//Ukrycie informacji o logowaniu
var hideLogin = function(){
   $("#FB_login_info").hide();
}
 
//Pokazanie informacji o logowaniu    
var showLogin = function(){
   $("#FB_login_info").show();
}
 
//Logowanie
var doLogin = function(){
    FB.login(function(response) {
      if (response.session) {
           hideLogin();
           checkLike(response.session.uid)
      }
    });
}
 
//Sprawdzenie polubienia
var checkLike = function(user_id){
    var page_id = "388464827867665"; //ID Fanpage'a (domyślnie 'Klocek Blog')
    var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
    var the_query = FB.Data.query(fql_query);
 
          the_query.wait(function(rows) {
              if (rows.length == 1 && rows[0].uid == user_id) {
                  $("#FB_container_like").show(); //Treść po polubieniu             
              } else {
                  $("#FB_container_notlike").show(); //Treść przed polubieniem
              }
          });        
}
 
//Wykonanie funkcji    
$(document).ready(function(){
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        hideLogin();
        checkLike(response.authResponse.userID)
      } else {
        showLogin();
      }
     });
    $("#FB_login_info a").click(doLogin);
});
</script>

Teraz wystarczy zmienić numer ID fanpage w zmiennej page_id (funkcja checkLike). Znaleźć go możemy w panelu administracyjnym FB lub pod poniższym adresem:

http://graph.facebook.com/NAZWA_FANPAGE

Powiązane Wpisy

NetworX...

Oxwall

Oxwall...

Top Facebook Shared...

Komentarze

  1. LFSMods dnia 8 października 2013 o 23:44 napisał(a):

    Jest trochę roboty z wklejaniem ale działa 😉

    • rask dnia 21 marca 2014 o 13:27 napisał(a):

      U mnie nie działa :/ w facebook developers nie znalazłem opcji Website with Facebook Login, dodałem więc w ustawienia -> dodaj platformę -> strona internetowa.
      Niby wszystko ok ale muszę się zalogować ponownie przy użyciu tej aplikacji żeby sprawdzić czy ktoś lubi fanpage. Tak to miało działać czy u was działa bez zalogowania przez tą aplikację?

  2. Jacek dnia 12 sierpnia 2014 o 09:50 napisał(a):

    Niestety nie działa, wykrywa gdy użytkownik nie jest zalogowany, jednak gdy się zaloguje to nic się nie dzieję, nie wyświetla żadnej treści . Pomożesz ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *