我正在尝试创建一个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>
如此答应的是我只使用javascript的答案:
页面正文的内容:
<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(如果您已经有USERID,并且确定您的用户已经登录了Facebook,则可以绕过登录内容,并response.session.uid用YOUR_USER_ID替换(例如从rails应用程序中)
response.session.uid
之后,它在page_fan表上进行FQL查询,其含义是,如果用户是页面的支持者,则返回用户ID,否则返回一个空数组,此后根据结果将其显示为div或其他。
page_fan
更新2
如某人所述,要使javascript版本正常工作,就需要jQuery,但您可以轻松删除它(它仅用于document.ready和show / hide)。
但是jQuery很简单
更新
相对于我在下面发布的评论,是一些红宝石代码,用于解码Facebook提取到其在Facebook内显示时发布到您的CANVAS URL的“ signed_request”。
在动作控制器中:
decoded_request = Canvas.parse_signed_request(params[:signed_request])
然后检查已解码的请求并显示一页或另一页..(不确定这一点,我对ruby不满意)
decoded_request['page']['liked'] 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