Lo primero es crear el APP en Facebook, una vez hecho esto debemos poseer en nuestro servidor una certificado SSL, hay muchas formas de obtenerlo, sin embargo si solo vamos a desarrollar apps, no es necesario hacer el gasto puesto que podemos crear un certificado localmente firmado, para ello hay mucha info en la web.
Una vez tengamos nuestra APP creada en facebook, vamos a tomar nota de su ID, es lo que nos interesa, ahora creamos un esquema típico HTML:
<!DOCTYPE html> <html> <head> <title>Carlitox en la Web</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div id="response"></div> </body> </html>
Luego le agregamos el script de conexión del facebook junto con su "root" luego del body, nos guiamos por la documentación que nos ofrece facebook:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Ahora que tenemos todo listo, de ahora en adelante todo el código adicional debemos colocarlo antes de la carga del script... Vamos a comenzar con lo básico, verificar que el usuario se ha logeado al facebook, para ello el mismo API nos ofrece sus métodos, vamos a modificarlo un poco:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/me', function(response) {
$("#response").html("Bienvenido "+ response.name +", has iniciado sesión en facebook");
});
} else if (response.status === 'not_authorized') {
$("#response").html("Existe una sesión abierta pero no ha aceptado el APP");
FB.login(function(response) {
// Aqui solicitamos los permisos al usuario para utilizar el app con su cuanta
}, {scope: 'publish_stream'});
} else {
$("#response").html("No hay sesión iniciada en facebook");
}
});
Ahora vamos a explicar con detalle esto, lo primero es el "response.status", este puede contener 3 valores que son devueltos por el API, los cuales son connected, not_authorized y unknow, es muy importante reconocer para que sirven cada uno de ellos:
connected: el usuario acepto utilizar el app y esta conectado.
not_authorized: el usuario esta conectado pero no ha aceptado el uso del app.
unknow: el usuario no se ha conectado o hay problemas en la conexión.
Sabiendo esto, mostramos los mensajes según la respuesta que obtengamos del API, si el estado es connected entonces procedemos a obtener el nombre de usuario, para ello utilizamos el método FB.api (hace llamadas al Graph API), con la llamada a "/me", la cual toma como valor el usuario que ha iniciado sesión, esto nos arroja los siguientes valores: JSON Graph API Explorer
Esto lo tratamos como cualquier JSON o Array, ahora bien, si el usuario no ha aceptado el APP entonces llamamos al método FB.login para que en su sesión se le soliciten los permisos que hemos fijado, estos permisos los podemos ver en el siguiente enlace: permisos del facebook.
Ahora que hemos explicado todo, vamos a extendernos un poco, como vemos, en el inicio de sesión solicitamos el permiso para publicar en el muro, para ello utilizamos el método FB.ui, y hacemos la llamada a "post", entonces colocamos esto luego de haber validado la sesión:
FB.ui(
{
method: 'feed',
name: 'Carlitox en la Web',
link: 'http://carlitoxenlaweb.blogspot.com/',
picture: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqFp48RtPZTvUgt0BeVoeglBpPizPYAl0Nno2J3YPzPQ11xKglVf0-QmfTYXNi6wk0OukR3XF2tAZ_USwBJCjMEeDt4P5HmdL69nyzHYKYjwuYfogAzY41o3UUzzlgo3m6bHzsN5GxIGX/s1600/Logo+carlitoxenlaweb.png',
caption: 'Probando el API en JavaScript',
description: 'Esto es una prueba utilizando el API de JavaScript.'
},
function(response) {
if (response && response.post_id) {
// El usuario publico en el muro
} else {
// El usuario cancelo y no publico nada
}
}
);
Como vemos, solo es cuestión de rellenar los campos, luego de la llamada tenemos la función de retorno o callback que nos devuelve el estado del dialogo, si es cancelado y si fue publicado.... Por ejemplo, de esta forma sabremos si el usuario publico en su muro utilizando nuestra APP. Aquí el ejemplo completo
<!DOCTYPE html>
<html>
<head>
<title>Carlitox en la Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // Reemplazar el APP ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
status : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.ui(
{
method: 'feed',
name: 'Carlitox en la Web',
link: 'http://carlitoxenlaweb.blogspot.com/',
picture: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqFp48RtPZTvUgt0BeVoeglBpPizPYAl0Nno2J3YPzPQ11xKglVf0-QmfTYXNi6wk0OukR3XF2tAZ_USwBJCjMEeDt4P5HmdL69nyzHYKYjwuYfogAzY41o3UUzzlgo3m6bHzsN5GxIGX/s1600/Logo+carlitoxenlaweb.png',
caption: 'Probando el API en JavaScript',
description: 'Esto es una prueba utilizando el API de JavaScript.'
},
function(response) {
if (response && response.post_id) {
// El usuario publico en el muro
} else {
// El usuario cancelo y no publico nada
}
}
);
FB.api('/me', function(response) {
$("#response").html("Bienvenido "+ response.name +", has iniciado sesión en facebook");
});
} else if (response.status === 'not_authorized') {
$("#response").html("Existe una sesión abierta pero no ha aceptado el APP");
FB.login(function(response) {
// Aqui solicitamos los permisos al usuario para utilizar el app con su cuanta
}, {scope: 'publish_stream'});
} else {
$("#response").html("No hay sesión iniciada en facebook");
}
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
</script>
<div id="response"></div>
</body>
</html>
Recibe notificaciones por correo
3 Comentarios
Escribir ComentarioMuy buena información...
ResponderExcelente información!!! podrías decirme cómo publicar imágenes en el perfil de Facebook usando la API con JavaScript? te lo agradecería enormemente!
ResponderLa verdad es que el API no ha cambiado mucho desde la publicación, sigue los pasos y al momento de publicar utiliza lo siguiente:
ResponderFB.login(function(){
FB.api('/me/feed', 'post', {
message: 'Subiendo imagen!',
url: 'http://1.bp.blogspot.com/_UlmdnO0DHq8/S-HK6Oa920I/AAAAAAAAAx0/IfbEr8CmdCY/s1600/Logo+carlitoxenlaweb.png'
});
}, {scope: 'publish_actions'});
Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.
Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión