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

Question

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

Rai*_*ner 53 javascript jquery facebook ruby-on-rails ruby-on-rails-3

我正在尝试创建一个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>

Run Code Online (Sandbox Code Playgroud)

并且,如果用户喜欢该页面:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

dwa*_*rfy 80

更新21/11/2012 @ALL:我已经更新了这个例子,以便更好地运用Chris Jacob和FB Best的帐户评论,看看这里的工作示例

嗨所以这里承诺的是我的答案只使用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>

Run Code Online (Sandbox Code Playgroud)

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
}

Run Code Online (Sandbox Code Playgroud)

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

});

Run Code Online (Sandbox Code Playgroud)

那么它做什么呢？

首先它登录到FB(如果你已经有了用户ID,并且你确定你的用户已经登录了facebook,你可以绕过登录的东西并替换response.session.uid为YOUR_USER_ID(例如你的rails应用程序)

之后,它在page_fan表上进行FQL查询,其含义是,如果用户是页面的粉丝,则返回用户ID,否则返回空数组,之后根据结果显示div或者另一个.

此外还有一个工作演示:http://jsfiddle.net/dwarfy/X4bn6/

它使用可口可乐页面作为一个例子,尝试去和喜欢/不同于可口可乐页面再次运行它...

最后一些相关的文档:

FQL page_fan表

FBJS FB.Data.query

如果您有任何疑问,请不要犹豫.

干杯

更新2

正如有人所说,jQuery是javascript版本需要工作但你可以轻松删除它(它只用于document.ready和show/hide).

对于document.ready,你可以将你的代码包装在一个函数中并使用body onload="your_function"或者像这里更复杂的东西:Javascript - 如何检测文档是否已加载(IE 7/Firefox 3)以便我们替换文档就绪.

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

但是jQuery很容易:)

UPDATE

相对于我在这里发布的评论,这里是一些ruby代码,用于解码facebook POST到你的CANVAS URL的"signed_request",当它取出它在facebook内显示时.

在你的动作控制器中:

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

Run Code Online (Sandbox Code Playgroud)

然后它是检查解码的请求并显示一页或另一页的问题..(不确定这一个,我不喜欢红宝石)

decoded_request['page']['liked']

Run Code Online (Sandbox Code Playgroud)

这里是相关的Canvas类(来自fbgraph ruby库):

 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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ina*_*bas 19

你需要编写一些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
}

Run Code Online (Sandbox Code Playgroud)

尽管OP的问题稍微偏离了主题,但我很高兴信息在这里,因为它对我的情况很有帮助. (10认同)

Answer 3

小智 5

这是一个工作示例,它是这个答案的一个分支:

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

Run Code Online (Sandbox Code Playgroud)

我使用了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
        }
    });
});?

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，6 月前
查看次数：	103772 次
最近记录：	13 年，1 月前