Facebook如何检查用户是否喜欢页面并显示内容？答案

【问题标题】：Facebook how to check if user has liked page and show content?Facebook如何检查用户是否喜欢页面并显示内容？
【发布时间】：2011-09-08 22:34:58
【问题描述】：

我正在尝试创建一个 Facebook iFrame 应用程序。应用程序应首先显示一张图片，如果用户喜欢该页面，他将可以访问一些内容。

我使用 RoR，因此无法使用 Facebook PhP SDK。

当用户不喜欢该页面时，这是我的 iFrame HTML：

<!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>

并且，如果用户喜欢该页面：

<!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>

【问题讨论】：

是的，我知道 FB JS SDK - 但我不知道如何使用它
在我试一试之前还有两个问题：它真的是敏感信息吗？因为一种方法涉及在用户喜欢页面时显示一个带有js的div，如果用户不喜欢页面则显示另一个div（两个div在开始时都隐藏在页面中）所以有人可以用firebug或其他东西取消隐藏它们查看您的内容。另一种方法涉及通过更“安全”的 ajax 获取两个 div 的内容。还有你用什么 JS 库我是 jquery'ist 所以我可以用 jquery 吗？

标签： javascript jquery ruby-on-rails ruby-on-rails-3 facebook

【解决方案1】：

2012 年 11 月 21 日更新 @ALL ：我已经更新了示例，使其更好地工作，并考虑了 Chris Jacob 和 FB 最佳实践的评论，看看工作示例here

嗨所以这里承诺的是我只使用 javascript 的答案：

页面BODY的内容：

<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>

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
}

最后是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
      }
    });

});

那么它有什么作用呢？

首先它登录到 FB（如果您已经有 USER ID，并且您确定您的用户已经登录 facebook，您可以绕过登录内容并将 response.session.uid 替换为 YOUR_USER_ID（例如来自您的 rails 应用程序）

然后它对page_fan表进行FQL查询，意思是如果用户是页面的粉丝，它返回用户id，否则返回一个空数组，之后取决于结果显示一个 div 或其他。

这里还有一个工作演示：http://jsfiddle.net/dwarfy/X4bn6/

它以可口可乐页面为例，尝试一下，喜欢/不喜欢the coca cola page，然后再次运行它......

最后是一些相关的文档：

FQL page_fan table

FBJS FB.Data.query

如果您有任何问题，请不要犹豫..

干杯

更新 2

正如某人所说，javascript 版本需要 jQuery 才能工作，但您可以轻松删除它（它仅用于 document.ready 和显示/隐藏）。

对于 document.ready，您可以将代码包装在一个函数中并使用 body onload="your_function" 或更复杂的东西，例如：Javascript - How to detect if document has loaded (IE 7/Firefox 3)，以便我们替换 document ready。

对于显示和隐藏的东西，你可以使用类似的东西：document.getElementById("container_like").style.display = "none" or "block"，更可靠的跨浏览器技术请看这里：http://www.webmasterworld.com/forum91/441.htm

但是 jQuery 就是这么简单:)

更新

相对于我在下面发布的评论，这里有一些 ruby 代码，用于解码 facebook POST 到您的 CANVAS URL 的“signed_request”，当它获取它以在 facebook 中显示时。

在你的动作控制器中：

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

然后检查解码的请求并显示一页或另一页..（不确定这个，我对 ruby 不满意）

decoded_request['page']['liked']

这里是相关的 Canvas 类（来自fbgraph ruby library）：

 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

【讨论】：

实际上，虽然在 javascript 中如何做到这一点仍然很有趣，因为您在 iframe 应用程序中，您应该考虑解码 facebook 发送到您页面的signed_request 作为 POST 参数获取它以显示在 iframe 中。
查看我的更新...它应该可以解决问题（可能比 javascript 更好的解决方案）
在 JS 端，当我尝试你的演示时，它会弹出请求权限框。有办法解决吗？我正在尝试在网站上执行此操作，以查看他们是否喜欢我们的粉丝页面，并且它不会显示一些不同的内容，但如果有弹出请求许可，那么他们可能会离开该网站。
@kel ：我很抱歉这么说，但是没有办法绕过权限的东西。我的意思是用户必须接受一次。如果您的用户已经通过您的网站登录了 facebook，那么您可以使用他们的 access_token 而不进行 JS 登录，否则不。用户是否已经通过您的网站登录了 Facebook？
@dwarfy 不，不要登录我的网站。 Facebook 点赞框如何知道您是否喜欢某个页面？仅仅是因为它是脸书吗？

【解决方案2】：

您需要编写一些 PHP 代码。当用户第一次单击选项卡时，您可以检查他是否喜欢该页面。下面是示例代码

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
}

【讨论】：

我不是 ROR 专家，尽管您可以在 facebook 的 ROR API 中找到类似的东西，就好像他们为 PHP 提供它一样，他们肯定也是为 ROR 提供的。
您在某处看到“php”标签吗？这家伙想要 ruby 或 javascript 的东西 ..
@mani，我从像我这样的病人那里收到了很多-1，这让我在回答之前更仔细地阅读了问题和标签......如果你觉得很受伤很抱歉
尽管它与 OP 的问题有点偏离主题，但我很高兴这些信息在这里，因为它对我的情况有帮助。
@mani 我很高兴你发布了这个解决方案！虽然它可能没有回答 Rails 初学者的确切问题，但它是解决我从 Google SERP 来到这里的问题的完美解决方案。

【解决方案3】：

这是一个工作示例，它是 this answer 的一个分支：

$(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
        }
    });
});

我使用了 FB.api 方法 (JavaScript SDK)，而不是已弃用的 FB.Data.query。或者你可以像下面这个例子一样使用 Graph API：

$(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
        }
    });
});

【讨论】：

【解决方案4】：

需要对 JavaScript 代码进行一些更改，以根据用户喜欢或不喜欢的页面来处理渲染，Facebook 强制要求将页面迁移到 Auth2.0 授权。

更改相当简单：-

sessions 必须由 authResponse 和 uid 替换为 userID

此外，考虑到代码的要求以及人们（包括我）在使用 FB.login 时通常面临的一些问题，使用 FB.getLoginStatus 是一个更好的选择。它会将查询保存到 FB，以防用户登录并验证您的应用。

有关如何将查询保存到 FB 服务器的信息，请参阅响应和会话对象部分。 http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

FB.login 的问题及其使用 FB.getLoginStatus 的修复。 http://forum.developers.facebook.net/viewtopic.php?id=70634

这是上面发布的代码，其中包含对我有用的更改。

$(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
        }
    });

});

【讨论】：

【解决方案5】：

使用 Javascript SDK，您可以更改代码如下，这应该在 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();
}

【讨论】：

谢谢索菲亚！这应该移到顶部，因为它适用于当前的 FB API。
不适用于回访者，因为 edge.create 仅在创建时触发，如果用户之前喜欢则不会触发。

【解决方案6】：

这里有一篇文章描述了您的问题

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>

【讨论】：

啊，那你在建站的时候需要通过iFrame或者Fan Gate来做。你可以在这里阅读marismith.com/iframes-facebook-app-fan-gate-wildfire，只需往下看网站。