Fatal编程技术网
  • javascript/
  • Javascript Facebook如何检查用户是否喜欢该页面并显示内容？

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

javascript jquery ruby-on-rails ruby-on-rails-3 facebook

Javascript Facebook如何检查用户是否喜欢该页面并显示内容？,javascript,jquery,ruby-on-rails,ruby-on-rails-3,facebook,Javascript,Jquery,Ruby On Rails,Ruby On Rails 3,Facebook,我正在尝试创建一个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"> &l

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


身体{
宽度：520px；
边距：0；填充：0；边框：0；
字体系列：verdana；
背景：url（repeat.png）repeat；
边缘底部：10px；
}
p、 h1{宽度：450px；左边距：50px；颜色：#FFF；}
p{font size:11px；}
并且，如果用户喜欢该页面：

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


身体{
宽度：520px；
边距：0；填充：0；边框：0；
字体系列：verdana；
背景：url（repeat.png）repeat；
边缘底部：10px；
}
p、 h1{宽度：450px；左边距：50px；颜色：#FFF；}
p{font size:11px；}
你喜欢这个页面吗
这里有一篇文章描述了您的问题


粉丝们会看到这些内容。
非粉丝将看到此内容。
您需要编写一些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
}
2012年11月21日更新 @所有人：我已经更新了示例，使其更好地工作，并考虑了Chris Jacob和FB最佳实践的意见，看看工作示例

您好，正如我承诺的，这里是我仅使用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
      }
    });

});
页面正文的内容：

<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>
最后是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（如果你已经有了用户ID，并且你确定你的用户已经登录了facebook，你可以绕过登录内容，用你的用户ID替换
response.session.uid
（例如从你的rails应用程序）

之后，它在
page\u fan
表上进行FQL查询，意思是如果用户是该页面的粉丝，它将返回用户id，否则将返回空数组，然后根据结果显示div或其他

这里还有一个工作演示：

它以可口可乐网页为例，试着去喜欢/不喜欢，然后再运行一次

最后是一些相关文档：

如果你有任何问题，不要犹豫

干杯

更新2

正如某人所说，jQuery是javascript版本工作所必需的，但是您可以轻松地删除它（它只用于document.ready和show/hide）

对于document.ready，您可以将代码包装在一个函数中，并使用
body onload=“your_function”
或类似于此处的更复杂的方法：以便我们替换document ready

对于显示和隐藏内容，您可以使用类似以下内容：
document.getElementById（“container_like”）.style.display=“none”或“block”
，有关更可靠的跨浏览器技术，请参见此处：

但是jQuery是如此简单：）

更新

与我在下面发表的评论相对，这里有一些ruby代码，用于解码facebook在获取“签名请求”以在facebook内显示时将其发布到画布URL的“签名请求”

在动作控制器中：

decoded_request = Canvas.parse_signed_request(params[:signed_request])
然后检查解码请求并显示一页或另一页。。（这个不太确定，我对ruby不太满意）

下面是相关的Canvas类（来自）：

类画布

class需要对JavaScript代码进行一些更改，以根据用户喜欢或不喜欢Facebook授权的页面来处理呈现

变化相当简单：-

会话必须由authResponse替换，uid由userID替换

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

有关如何将查询保存到FB服务器的信息，请参阅响应和会话对象部分

使用FB.getLoginStatus时FB.login及其修复程序出现问题。


这是上面发布的代码和对我有用的更改


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

});



下面是一个工作示例，它是以下内容的一个分支：

我使用了FB.api方法（JavaScript SDK），而不是不推荐使用的FB.Data.query。
或者，您可以使用图形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
        }
    });
});​



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



啊，那么你需要在创建网站时通过iFrame或Fan Gate来完成。你可以在这里读到它，只需看看网站。我不是ROR专家，虽然你可以在ROR API for facebook中找到类似的东西，好像他们为PHP提供它，他们肯定也为ROR提供。你看到“PHP”标签了吗？那个家伙想要ruby或javascript的东西。@mani，我收到了很多像我这样的病人的-1，这让我在回答之前更仔细地阅读问题和标记。。。抱歉，如果你感到很难过，尽管这与OP的问题有点离题，但我很高兴这里的信息对我的情况很有帮助。@mani我很高兴你发布了这个解决方案！虽然它可能没有回答rails初学者的确切问题，但它是解决我的问题的完美解决方案，我是通过谷歌SERP登陆这里的。是的，我知道th FB JS SDK-但在尝试之前，我不知道如何使用它2个其他问题：它真的是敏感信息吗？因为一种方法是，如果用户喜欢该页面，就用js显示一个div，如果用户不喜欢该页面，就显示另一个div（两个div在开始时都隐藏在页面中），这样有人就可以用firebug或其他东西将它们隐藏起来，并查看您的内容。另一种方法是通过ajax获取两个div的内容，这更“安全”。还有，你用什么JS库呢？我是一个jquery列表，所以我可以用jquery吗

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



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