javascript - validacion - Facebook cómo comprobar si el usuario le ha gustado la página y mostrar el contenido?
validar formulario javascript html5 (6)
Estoy tratando de crear una aplicación iFrame de Facebook. La aplicación primero debe mostrar una imagen y si al usuario le gusta la página, obtendrá acceso a cierto contenido.
Uso RoR, por lo tanto, no puedo usar el SDK de Facebook PhP.
Aquí está mi HTML iFrame cuando el usuario no le ha gustado la página:
<!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>
Y, si al usuario le ha gustado la página:
<!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>
Aquí hay un ejemplo de trabajo, que es una bifurcación de esta respuesta :
$(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
}
});
});
Usé el método FB.api (JavaScript SDK), en lugar de FB.Data.query, que está en desuso. O puede usar Graph API como en este ejemplo:
$(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
}
});
});
Con Javascript SDK, puede cambiar el código de la siguiente manera, esto debe agregarse después de la llamada de 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();
}
Hay un artículo aquí que describe su problema
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>
Necesita escribir un pequeño código PHP. Cuando el usuario hace clic primero en la pestaña puede verificar si le gusta la página o no. A continuación se muestra el código de muestra
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
}
Se requieren algunos cambios en el código de JavaScript para manejar el renderizado según el gusto del usuario o si no le gusta la página ordenada por Facebook para pasar a la autorización Auth2.0.
El cambio es bastante simple:
sesiones debe ser reemplazado por authResponse y uid por ID de usuario
Además, dado el requisito del código y algunos problemas que enfrentan las personas (incluido yo) en general con FB.login, el uso de FB.getLoginStatus es una mejor alternativa. Guarda la consulta a FB en caso de que el usuario haya iniciado sesión y haya autenticado su aplicación.
Consulte la sección Objeto de respuestas y sesiones para obtener información sobre cómo esto podría guardar la consulta en el servidor FB. http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Problemas con FB.login y sus soluciones utilizando FB.getLoginStatus. http://forum.developers.facebook.net/viewtopic.php?id=70634
Aquí está el código publicado arriba con cambios que funcionó para mí.
$(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
}
});
});
ACTUALIZACIÓN 21/11/2012 @ALL: He actualizado el ejemplo para que funcione mejor y toma en cuenta las observaciones de Chris Jacob y FB Best practices, eche un vistazo al ejemplo de trabajo here
Hola, como prometí aquí está mi respuesta usando solo javascript:
El contenido del CUERPO de la página:
<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>
El 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
}
Y finalmente el 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
}
});
});
Entonces, ¿qué hace?
Primero inicia sesión en FB (si ya tiene la ID de usuario, y está seguro de que su usuario ya inició sesión en Facebook, puede omitir el inicio de sesión y reemplazar response.session.uid con YOUR_USER_ID (de su aplicación de rieles, por ejemplo)
Después de eso realiza una consulta FQL en la tabla page_fan , y el significado es que si el usuario es un fan de la página, devuelve el id de usuario y de lo contrario devuelve una matriz vacía, después de eso y dependiendo de los resultados, muestra un div o el otro.
También hay una demostración en funcionamiento aquí: http://jsfiddle.net/dwarfy/X4bn6/
Está usando la página de coca-cola como ejemplo, pruébala y haz clic en Me gusta / a diferencia de la página de coca cola y ejecútala de nuevo ...
Finalmente algunos documentos relacionados:
No lo dude si tiene alguna pregunta ..
Aclamaciones
ACTUALIZACIÓN 2
Como lo afirmó alguien, se requiere jQuery para que la versión de JavaScript funcione, PERO se puede eliminar fácilmente (solo se usa para el documento. Listo y mostrar / ocultar).
Para el documento. body onload="your_function" , podría envolver su código en una función y usar body onload="your_function" o algo más complicado como aquí: Javascript - Cómo detectar si el documento se ha cargado (IE 7 / Firefox 3) para que reemplacemos el documento Listo.
Y para el espectáculo y ocultar cosas, podría usar algo como: document.getElementById("container_like").style.display = "none" or "block" y para obtener más cross browser de técnicas confiables, consulte aquí: http://www.webmasterworld.com/forum91/441.htm
Pero jQuery es muy fácil :)
ACTUALIZAR
Relativamente al comentario que publiqué aquí a continuación, hay un código ruby para decodificar el "signed_request" que facebook POST tiene para su URL de CANVAS cuando lo busca para mostrarlo dentro de Facebook.
En tu controlador de acción:
decoded_request = Canvas.parse_signed_request(params[:signed_request])
Y luego es cuestión de verificar la solicitud decodificada y mostrar una página u otra ... (No estoy seguro de esto, no me siento cómodo con el rubí)
decoded_request[''page''][''liked'']
Y aquí está la clase Canvas relacionada (de la biblioteca 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