lunes, 1 de julio de 2013

Como publicar y borrar un estado con la Api de Facebook en javascript facil y rapido


Después de haber creado nuestra APP vamos a comenzar a codificar en javascript y hacer nuestros primeros ejemplos con esta API.

Como Publicar un Estado en Facebook?
facebook nos otorga una gran documentación para empaparnos del API y como utilizarla para trabajar del lado del cliente ,pero antes de trabajar debemos de instalar el API SDK JavaScript.

1) Instalar API
es muy sencilla su instalacion dentro de su pagina web busque la etiqueta de aperturabody despues de esta etiqueta pegue lo siguiente

script src='http://connect.facebook.net/en_US/all.js'/
div id='fb-root'/
script
//![CDATA[

FB.init({
appId : APP_ID,
status : true,
cookie : true,
xfbml : true
});

//
/script


el parámetro appId es la variable que recibe el ID de nuestra aplicación.


2) Otorgar los permisos atravésdel Login
una parte muy importante para tener acceso a ciertos datos del usuario y como interacturar con dichos datos debemos de otorgar o hacerle saber al usuario que necesita nuestra aplicación tener acceso, para esto facebook nos proporciona una lista de permisos y para que sirven cada uno enPermisos, el permiso que vamos a utilizar por ahora sera el depublish_stream tener acceso para publicar en el muro del usuario yread_stream tener acceso a todo lo que se ha publicado en el muro.

Como crear un login o como logearse con la API?
El SDK JSFB.login lo que hace es abrir una ventana modal esta venta solo se debe de abrir a través de un evento click hecho por el usuario de lo contrario si lo llamamos de otra forma hará que los navegadores bloqueen la ventana

function login(){

FB.login(function(response) {
if (response.status == 'connected') {

publicar();
}
else {
alert('Debes de Iniciar sesión,si no podras tener acceso');
}

},{'scope': 'publish_stream,read_stream'});
}


aqui creamos una función javascript para llamar al login como podrán ver es una función muy sencilla donde FB.login nos proporciona una variable de retorno donde podemos comprar si el usuario se logeo o no la cual esresponsey ademas podemos anteponer por medio del parámetroscope los permisos que necesitamos hecho esto al hacer login(sesion) el usuario se le mostrara una venta con los permisos.

el usuario deberá de aceptar los permisos que se le muestra una vez hecho esto podemos tener acceso y seguir.

3) Publicar en el Muro
para publicar estados solo necesitamos hacerle saber ala API dos parámetros "/me/feed" y "post" donde post sera una publicación y "me/feed" en mi espacio o en mi muro ,post tiene hereda varios parámetros hoy solo vamos a trabajar con dosmessage : me permite añadir un texto o un mensaje ,icon:me permite cambiar el icono del estado.

function publicar(){
FB.api('/me/feed', 'post', {
message: jQuery('#area_estado').val(),
icon:'http://lh3.googleusercontent.com/-t2qtkggIfx4/UcMIo3P8Y3I/AAAAAAAABBA/H_dDZyn3d-I/s75-no/75_ima.jpg',

}, function(response) {
if (!response || response.error) {

Consola('Error al publicar');

} else {

Consola('Estado Acualizado');
id_publicacion=response.id;

}
});
}


aquí creamos otra function javascript donde añadimos los valoresmessage tiene el valor extraído de un textarea con jQuery que seria nuestro texto el mensaje, yicon: recibe la URL o ruta de una imagen. de esta forma podemos realizar una publicación sencilla.

4) Borrar la Publicación
facebook también nos proporciona una forma de como borrar las publicaciones igual de sencilla solo debemos de obtener el ID de la publicación que se va a borrar y por medio de "delete" procedemos a borrarla.

function borrar_estado(ID)
{
FB.api(ID, 'delete', function(response) {
if (!response || response.error) {

Consola('ERROR AL BORRAR ESTADO');

} else {

Consola('ESTADO BORRADO');

}
});

}


igual como los anteriores hemos creado una función javascript la cual esta recibe una variable ID que seria el ID de la publicación yFB.api recibirá este ID y procederá a la eliminación de la publicación.


este es uno de varios tutoriales que veremos sobre el manejo de la API de facebook les dejo el código fuente de una plantilla en blogger donde se encuentra todos los códigos explicados

DESCARGAR


,

1 comentario: