web-dev-qa-db-fra.com

Facebook comment vérifier si l'utilisateur a aimé la page et afficher le contenu?

J'essaie de créer une application Facebook iFrame. L'application doit d'abord afficher une image et si l'utilisateur aime la page, il aura accès à certains contenus.

J'utilise RoR, donc je ne peux pas utiliser le SDK PhP de Facebook.

Voici mon HTML iFrame lorsque l'utilisateur n'a pas aimé la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="container">
<img src="welcome.png" alt="Frontimg">
</div>

Et si l'utilisateur a aimé la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="container">
<img src="member.png" alt="Frontimg">
<p>You liked this page</p>
javascriptjqueryruby-on-railsruby-on-rails-3facebook
53
Rails beginner

UPDATE 21/11/2012 @ALL: J'ai mis à jour l'exemple afin qu'il fonctionne mieux et prend en compte les remarques de Chris Jacob et de FB Best practices, regardez l'exemple de travail ici

Bonjour, comme promis, voici ma réponse en utilisant uniquement du javascript:

Le contenu du CORPS de la page:

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

<div id="container_notlike">
YOU DONT LIKE
</div>

<div id="container_like">
YOU LIKE
</div>

Le CSS:

body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}

#container_notlike, #container_like {
    display:none
}

Et enfin le javascript:

$(document).ready(function(){

    FB.login(function(response) {
      if (response.session) {

          var user_id = response.session.uid;
          var page_id = "40796308305"; //coca cola
          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) {
                  $("#container_like").show();

                  //here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.

              } else {
                  $("#container_notlike").show();
                  //and here you could get the content for a non liker in ajax...
              }
          });


      } else {
        // user is not logged in
      }
    });

});

Alors qu'est-ce que ça fait?

Tout d'abord, il se connecte au FB (si vous avez déjà l'ID utilisateur et que vous êtes sûr que votre utilisateur est déjà connecté à Facebook, vous pouvez ignorer les informations de connexion et remplacer response.session.uid Par YOUR_USER_ID (depuis votre Rails app par exemple)

Après cela, il effectue une requête FQL sur la table page_fan, Ce qui signifie que si l'utilisateur est fan de la page, il renvoie l'identifiant de l'utilisateur et sinon, il retourne un tableau vide. les résultats montrent une div ou l'autre.

Il y a aussi une démo de travail ici: http://jsfiddle.net/dwarfy/X4bn6/

Il utilise la page coca-cola comme exemple, essayez-le et aimez/ne ressemblez pas à la page coca cola et exécutez-le à nouveau ...

Enfin, quelques documents connexes:

table FQL page_fan

FBJS FB.Data.query

N'hésitez pas si vous avez des questions ..

À votre santé

UPDATE 2

Comme le dit quelqu'un, jQuery est requis pour que la version javascript fonctionne, MAIS vous pouvez la supprimer facilement (elle n'est utilisée que pour le document.ready et afficher/masquer).

Pour le document.ready, vous pouvez envelopper votre code dans une fonction et utiliser body onload="your_function" Ou quelque chose de plus compliqué comme ici: Javascript - Comment détecter si le document est chargé (IE 7/Firefox 3) afin que nous remplacions le document prêt.

Et pour le show and hide, vous pouvez utiliser quelque chose comme: document.getElementById("container_like").style.display = "none" or "block" et pour des techniques de navigation croisées plus fiables, voir ici: http://www.webmasterworld.com/forum91/441.htm

Mais jQuery est si facile :)

[~ # ~] met à jour [~ # ~]

Relativement au commentaire que j'ai posté ci-dessous, voici quelques-uns Ruby code pour décoder la "commande signée" que facebook POST à votre URL CANVAS quand il le récupère pour l'affichage) à l'intérieur de facebook.

Dans votre contrôleur d’action:

decoded_request = Canvas.parse_signed_request(params[:signed_request])

Et puis c’est une question de vérifier la demande décodée et d’afficher une page ou une autre .. (Pas sûr de celle-ci, je ne suis pas à l’aise avec Ruby)

decoded_request['page']['liked']

Et voici la classe de toile associée (de fbgraph Ruby bibliothèque =)):

 class Canvas

    class << self
      def parse_signed_request(secret_id,request)
        encoded_sig, payload = request.split('.', 2)
        sig = ""
        urldecode64(encoded_sig).each_byte { |b|
          sig << "%02x" % b
        }
        data = JSON.parse(urldecode64(payload))
          if data['algorithm'].to_s.upcase != 'HMAC-SHA256'
          raise "Bad signature algorithm: %s" % data['algorithm']
        end
        expected_sig = OpenSSL::HMAC.hexdigest('sha256', secret_id, payload)
        if expected_sig != sig
          raise "Bad signature"
        end
        data
      end

      private

      def urldecode64(str)
        encoded_str = str.gsub('-','+').gsub('_','/')
        encoded_str += '=' while !(encoded_str.size % 4).zero?
        Base64.decode64(encoded_str)
      end
    end  

 end
80
dwarfy

Vous devez écrire un peu de code PHP. Lorsque l'utilisateur clique sur l'onglet pour la première fois, vous pouvez vérifier s'il est comme la page ou non. Voici l'exemple de code

include_once("facebook.php");

    // Create our Application instance.
    $facebook = new Facebook(array(
      'appId'  => FACEBOOK_APP_ID,
      'secret' => FACEBOOK_SECRET,
      'cookie' => true,
    ));

$signed_request = $facebook->getSignedRequest();

// Return you the Page like status
$like_status = $signed_request["page"]["liked"];

if($like_status)
{
    echo 'User Liked the page';
    // Place some content you wanna show to user

}else{
    echo 'User do not liked the page';
    // Place some content that encourage user to like the page
}
19
Inam Abbas

Voici un exemple de travail, qui est une fourchette de cette réponse :

$(document).ready(function(){
    FB.login(function(response) {
        if (response.status == 'connected') {
            var user_id = response.authResponse.userID;
            var page_id = "40796308305"; // coca cola page https://www.facebook.com/cocacola
            var fql_query = "SELECT uid FROM page_fan WHERE page_id="+page_id+" and uid="+user_id;

            FB.api({
                method: 'fql.query',
                query: fql_query
            },
            function(response){
                if (response[0]) {
                    $("#container_like").show();
                } else {
                    $("#container_notlike").show();
                }
            }
            );    
        } else {
        // user is not logged in
        }
    });
});

J'ai utilisé la méthode FB.api (JavaScript SDK) au lieu de FB.Data.query, qui est obsolète. Ou vous pouvez utiliser l'API Graph comme avec cet exemple:

$(document).ready(function() {
    FB.login(function(response) {
        if (response.status == 'connected') {
            var user_id = response.authResponse.userID;
            var page_id = "40796308305"; // coca cola page https://www.facebook.com/cocacola
            var fql_query = "SELECT uid FROM page_fan WHERE page_id=" + page_id + " and uid=" + user_id;

            FB.api('/me/likes/'+page_id, function(response) {
                if (response.data[0]) {
                    $("#container_like").show();
                } else {
                    $("#container_notlike").show();
                }
            });
        } else {
            // user is not logged in
        }
    });
});​
5
Alexey Khrenov

Certaines modifications du code JavaScript sont nécessaires pour gérer le rendu si l'utilisateur aime ou non la page demandée par Facebook lors du passage à l'autorisation Auth2.0.

Le changement est assez simple: -

les sessions doivent être remplacées par authResponse et uid par userID

De plus, étant donné l'exigence du code et certains problèmes rencontrés par les personnes (dont moi-même) en général avec FB.login, l'utilisation de FB.getLoginStatus est une meilleure alternative. Il enregistre la requête au FB au cas où l'utilisateur est connecté et a authentifié votre application.

Reportez-vous à la section Objet Réponse et Sessions pour plus d'informations sur la sauvegarde de la requête sur le serveur FB. http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

Problèmes avec FB.login et ses correctifs à l'aide de FB.getLoginStatus. http://forum.developers.facebook.net/viewtopic.php?id=70634

Voici le code affiché ci-dessus avec les modifications qui ont fonctionné pour moi.

$(document).ready(function(){
    FB.getLoginStatus(function(response) {
        if (response.status == 'connected') {
            var user_id = response.authResponse.userID;
            var page_id = "40796308305"; //coca cola
            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) {
                    $("#container_like").show();

                    //here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.

                } else {
                    $("#container_notlike").show();
                    //and here you could get the content for a non liker in ajax...
                }
            });
        } else {
            // user is not logged in
        }
    });

});
2
karora

Avec Javascript SDK, vous pouvez modifier le code comme ci-dessous, il convient de l'ajouter après l'appel de FB.init.

     // Additional initialization code such as adding Event Listeners goes here
FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        // the user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token 
        // and signed request each expire
        var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
        alert('we are fine');
      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook, 
        // but has not authenticated your app
        alert('please like us');
         $("#container_notlike").show();
      } else {
        // the user isn't logged in to Facebook.
        alert('please login');
      }
     });

FB.Event.subscribe('Edge.create',
function(response) {
    alert('You liked the URL: ' + response);
      $("#container_like").show();
}
1
Sofia Khwaja

Il y a un article ici qui décrit votre problème

http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/

    <fb:visible-to-connection>
       Fans will see this content.
       <fb:else>
           Non-fans will see this content.
       </fb:else>
    </fb:visible-to-connection>
0
Modatheus