Facebook如何检查用户是否喜欢页面并显示内容? [英] Facebook how to check if user has liked page and show content?
问题描述
我正在尝试创建 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"><头><link rel="stylesheet" type="text/css" href="style.css"/><style type="text/css">身体 {宽度:520px；保证金:0;填充:0;边界:0;字体系列:verdana；背景:url(repeat.png)重复；底边距:10px；}p, h1 {width:450px;左边距:50px；颜色:#FFF;}p {字体大小:11px;}</风格><meta http-equiv="Content-Type" content="text/html;字符集=iso-8859-1"/><身体><div id="容器"><img src="welcome.png" alt="Frontimg">并且，如果用户喜欢该页面:
<!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"><头><link rel="stylesheet" type="text/css" href="style.css"/><style type="text/css">身体 {宽度:520px；保证金:0;填充:0;边界:0;字体系列:verdana；背景:url(repeat.png)重复；底边距:10px；}p, h1 {width:450px;左边距:50px；颜色:#FFF;}p {字体大小:11px;}</风格><meta http-equiv="Content-Type" content="text/html;字符集=iso-8859-1"/><身体><div id="容器"><img src="member.png" alt="Frontimg"><p>您喜欢这个页面</p>UPDATE 21/11/2012@ALL :我已经更新了示例，以便它更好地工作，并考虑了 Chris Jacob 和 FB Best Practices 的评论，看看工作示例 这里
<小时>正如所承诺的，这是我仅使用 javascript 的回答:
页面BODY的内容:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js"></script><脚本>FB.init({appId : '您的应用程序 ID',状态:真实，饼干:是的，xfbml : 真});<div id="container_notlike">你不喜欢<div id="container_like">你喜欢
CSS:
body {宽度:520px；保证金:0;填充:0;边界:0;字体系列:verdana；背景:url(repeat.png)重复；底边距:10px；}p, h1 {width:450px;左边距:50px；颜色:#FFF;}p {字体大小:11px;}#container_notlike, #container_like {显示:无}最后是 javascript :
$(document).ready(function(){FB.登录(功能(响应){如果(响应.会话){var user_id = response.session.uid;var page_id = "40796308305";//可口可乐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(函数(行){if (rows.length == 1 &&rows[0].uid == user_id) {$("#container_like").show();//在这里你也可以做一些ajax并获取liker"的内容，而不是简单地在页面中显示一个隐藏的div.} 别的 {$("#container_notlike").show();//在这里你可以在ajax中获取非喜欢者的内容...}});} 别的 {//用户未登录}});});那它有什么作用?
首先它登录到 FB(如果您已经拥有用户 ID，并且您确定您的用户已经登录到 Facebook，您可以绕过登录内容并将 response.session.uid 替换为YOUR_USER_ID(例如来自您的 rails 应用)
之后对page_fan表进行FQL查询，意思是如果用户是页面的粉丝，则返回用户id，否则返回空数组，之后，根据结果显示一个 div 或另一个.
这里还有一个工作演示:http://jsfiddle.net/dwarfy/X4bn6/
以可口可乐页面为例，尝试去喜欢/不喜欢可口可乐页面 并再次运行...
最后是一些相关的文档:
如果您有任何问题，请不要犹豫..
干杯
更新 2
正如某人所说，javascript 版本需要 jQuery 才能工作，但您可以轻松删除它(它仅用于 document.ready 和显示/隐藏).
对于 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 太简单了 :)
更新
相对于我在下面发布的评论，这里有一些 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 库):
类 Canvas类<<自己def parse_signed_request(secret_id,request)encoding_sig, payload = request.split('.', 2)签名 = ""urldecode64(encoded_sig).each_byte { |b|信号<<%02x"% b}数据 = JSON.parse(urldecode64(payload))if data['algorithm'].to_s.upcase != 'HMAC-SHA256'引发错误的签名算法:%s"% data['algorithm']结尾expected_sig = OpenSSL::HMAC.hexdigest('sha256', secret_id, payload)如果expected_sig != sig提出坏签名"结尾数据结尾私人的def urldecode64(str)encoding_str = str.gsub('-','+').gsub('_','/')encoding_str += '=' 而 !(encoded_str.size % 4).zero?Base64.decode64(encoded_str)结尾结尾结尾I am trying to create a Facebook iFrame app. The app should first show an image and if the user likes the page, he will get access to some content.
I use RoR, therefore I can't use the Facebook PhP SDK.
Here is my iFrame HTML when the user has not liked the 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>
And, if the user has liked the 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>
UPDATE 21/11/2012 @ALL : I have updated the example so that it works better and takes into accounts remarks from Chris Jacob and FB Best practices, have a look of working example here
Hi So as promised here is my answer using only javascript :
The content of the BODY of the 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>
The 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
}
And finally the 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
}
});
});
So what what does it do ?
First it logins to FB (if you already have the USER ID, and you are sure your user is already logged in facebook, you can bypass the login stuff and replace response.session.uid with YOUR_USER_ID (from your rails app for example)
After that it makes a FQL query on the page_fan table, and the meaning is that if the user is a fan of the page, it returns the user id and otherwise it returns an empty array, after that and depending on the results its show a div or the other.
Also there is a working demo here : http://jsfiddle.net/dwarfy/X4bn6/
It's using the coca-cola page as an example, try it go and like/unlike the coca cola page and run it again ...
Finally some related docs :
Don't hesitate if you have any question ..
Cheers
UPDATE 2
As stated by somebody, jQuery is required for the javascript version to work BUT you could easily remove it (it's only used for the document.ready and show/hide).
For the document.ready, you could wrap your code in a function and use body onload="your_function" or something more complicated like here : Javascript - How to detect if document has loaded (IE 7/Firefox 3) so that we replace document ready.
And for the show and hide stuff you could use something like : document.getElementById("container_like").style.display = "none" or "block" and for more reliable cross browser techniques see here : http://www.webmasterworld.com/forum91/441.htm
But jQuery is so easy :)
UPDATE
Relatively to the comment I posted here below here is some ruby code to decode the "signed_request" that facebook POST to your CANVAS URL when it fetches it for display inside facebook.
In your action controller :
decoded_request = Canvas.parse_signed_request(params[:signed_request])
And then its a matter of checking the decoded request and display one page or another .. (Not sure about this one, I'm not comfortable with ruby)
decoded_request['page']['liked']
And here is the related Canvas Class (from 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
这篇关于Facebook如何检查用户是否喜欢页面并显示内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
