Mostrando entradas con la etiqueta API Facebook. Mostrar todas las entradas
Mostrando entradas con la etiqueta API Facebook. Mostrar todas las entradas

viernes, 26 de julio de 2013

Publica contenido y añadir comentario en cualquier grupo del usuario con la API de Facebook en javascript

7/26/2013

haces unos minutos vimos como mostrarinformación del usuario y listar los grupos donde es miembroahora veremos como publicar un contenido en cualquier grupo que el usuario es miembro para ello necesito los permisospublish_stream, read_stream, user_groups los cuales ya sabemos para que sirven.

  • Como publicar contenido en un grupo
para publicar cualquier contenido necesito saber primero el ID del grupo y utilizar los métodos/feed ypost luego necesitare los parámetros o recipientes donde voy a colocar el contenido que necesito publicarmessage,picture,icon,link,name,description estos parámetros lo hemos utilizado en comopublicar contenido de un web en el muro de un usuario



function publicar_grupo(ID) { FB.api("/"+ID+"/feed", 'post', { message: 'Geniaaal..!!ya puedo publicar con la API DE FACEBOOK ooohh SIIᕙ(`▽´)ᕗ,!', picture :'https://lh5.googleusercontent.com/-lEKhKIIiobo/UeqlGLHT0xI/AAAAAAAABP8/5FMS0IY3Ghk/s128-no/ima_128.png', icon:'http://lh5.googleusercontent.com/-YpHyKKZjhr0/UeqlPyqAImI/AAAAAAAABQY/a65TrOZrLQI/s16-no/ima_16.png', link : 'http://www.javaface-elblogdelprogramador.com/', name : 'JavaFace-elblogdelprogramador: aprende usar la api de facebook', description : 'Aprende como usar la API de facebook y sincroniza tu web con facebook!!' }, function(response) { if (!response || response.error) { console.log('Error al publicar en grupo'); } else { comentar(response.id); console.log('Publicado en grupo: ' + response.id); } }); }


utilizando el método/feed ypost podre publicar un contenido en el grupo pero también puedo añadir un comentario a la publicación, les dejo el código fuente completo.


DESCARGAR




Mostrar información del usuario y listar los grupos que esta agregado con la API de facebook en javascript

7/26/2013

Hace poco vimos comoobtener cierta información del usuario nombre y su foto y listar sus amigosahora de la misma manera vamos a listar todos los grupos que el usuario es miembro para esto necesito otro permiso:

user_groups: acceso a los grupos del usuario

conuser_groups tengo acceso a todos los grupos que el usuario es miembro puedo obtener toda la información de ellos en este caso solo vamos haber como obtener el icono,y el nombre de los grupos.

  • ObtenerinformaciónBásicade los grupos
para obtener dicha información necesito el método/me/groups y usar los campos de retorno:

icon: me retorna el icono con el que se identifica el grupo
name: el nombre del grupo

por ahora eso son los campos que vamos a utilizar.


function listarGrupos() { FB.api('/me/groups',{fields:'id,name,icon'}, function(response) { if(response.data) { for(i=0;iresponse.data.length;i++) { jQuery('#lista_grupos').append('div class="grupos"'+ 'img src="'+response.data[i].icon+'"/'+ 'h3'+response.data[i].name+'/h3'+ '/div'); } } else { console.log('Error al obtener Grupos'); } }); }

el parámetro fields me recibe los campos que necesito obtener y/me/groups me retorna por medio delresponse un array de datos que es recorrido por un ciclo for de esta forma yo obtengo los datos que necesito y dinamicamte creo los elementos o la lista de los grupos. les dejo el codigo fuente completo


DESCARGAR







Mostrar información del usuario y listar amigos con la APi de Facebook en javascript

7/26/2013

Anteriormente ya hemos visto como compartir o publicar en el muro del usuario,ahora veremos como mostrar determinados datos como por ejemplo el nombre y foto del usuario y de los amigos,para ello necesito otro tipo de permisos:

read_friendlists:acceder a la lista de amigos
friends_groups: acceder a la lista de amigos de los grupos

el que nos interesa por el momento esread_friendlists con este permiso obtendremos acceso para listar todos los amigos que el usuario posee.

  • Mostrarinformacióndel Usuario
para poder obtener el nombre y la foto del usuario no necesitamos ningún permiso lo hacemos directamente una vez logeado el usuario,luego se llama al método/me este método me retornara por medio delresponse elname(nombre) y el ID del usuario,luego para obtener la foto necesito usar la API Grafi de facebook por medio de una URLhttp://graph.facebook.com/ añadiendo el ID del usuario seguido de/picture.


function muestraInfo(){ FB.login(function(response) { if (response.status=="connected") { FB.api('/me', function(response) { reaUser(response.name,'http://graph.facebook.com/'+response.id+'/picture'); creaAmigos(); }); } else { console.log('NO CONECTADO'); } },{'scope': 'read_friendlists,friends_groups'}); }


dentro de la functionmuestraInfo() tengo la funcion login que permite al usuario logearse y aceptar los permisos si estos son aceptados pasara a activar el método/me donde obtendré por medio delresponse.name(nombre completo del usuario) yresponse.id el ID del usuario que pasara a la URL del API Grafi para obtener la imagen del usuario estos valores son recibidos por una funcion que crea dinamicamente el elementocreaUser(response.name,'http://graph.facebook.com/'+response.id+'/picture');.


  • Listar Amigos del Usuario
ya que el usuario aceptado los permisosread_friendlists , podemos utilizar el método/me/friends este método nos retornara por medio delresponse un array de datos que debemos de recorrerlo con un ciclo for para extraer el ID de cada amigo que posea el usuario para luego hacer lo mismo que los datos del usuario crear los elementos dinamicamente.


function creaAmigos() { FB.api('/me/friends', function(response) { if(response.data) { for(var i=0;iresponse.data.length;i++) { jQuery('#lista_amigos').append('div class="amigos"'+ 'img src="https://graph.facebook.com/'+response.data[i].id+'/picture"/'+ 'h3'+response.data[i].name+'/h3'+ '/div'); } } else { console.log('Error al obtener amigos'); } }); }


con dos simples funciones hemos obtenido informacion basica del usuario, les dejo el codigo fuente completo con todas las funciones y css del ejemplo


DESCARGAR









jueves, 25 de julio de 2013

Compartir(Share Dialog ) contenido de una web por el usuario y añadir un comentario y un like a cada uno con la API de Facebook js

7/25/2013

ya hemos visto comopublicar contenido de una web y añadir un comentario y un like o gusto a cada uno,pero también exista otra forma de compartir contenido esto ya lo hace el usuario si le ha gustado un determinado articulo y desea compartirlo en su muro esto se lo hace con unShare Dialog que es solo una ventana modal con un contenido y un área de texto donde el usuario podrá colocar el mensaje que el desee.

Pero como llamo o utilizo el Share Dialog?
asta ahora hemos usado el API de Facebook en si FB.api pero también podemos hacer uso de la UI del SDK de Facebook la UI nos sirve para llamar métodos genéricos o cuadros de diálogos los cuales facebook nos proporciona los siguientes:

  • Feed Dialog: permite al usuario compartir o crear una noticia en su muro.
  • OAuth Dialog:permite al usuario autorizar una aplicación como parte de un flujo de autenticación.
  • Add Page Tab Dialog : permite al usuario añadir una aplicación a una página de Facebook que se administra.
  • Friends Dialog:permite a un usuario enviar una solicitud de amistad a otro usuario.
  • Pay Dialog:permite a un usuario realizar una compra a través de Facebook Credits.
  • Requests Dialog:permite a un usuario enviar una solicitud para uno o más de sus amigos.
  • Send Dialog:permite al usuario enviar un mensaje de Facebook a uno o varios de sus amigos.
de todos estos vamos a utilizar elFeed Dialog este modal nos permite añadir de igual forma contenido con los parámetros correspondientes utilizando elmetodo Feed.

Parámetros que vamos a utilizar:
  • name:el titulo que hace referencia el articulo
  • link: el vinculo o URL del articulo
  • picture: URL de la imagen que corresponde al articulo
  • caption: una pequeña descripción o resumen del articulo.


function compartir() { FB.ui( { method: 'feed', name: 'JavaFace-elblogdelprogramador: aprende usar la api de facebook', link: 'http://www.javaface-elblogdelprogramador.com/', picture: 'https://lh5.googleusercontent.com/-lEKhKIIiobo/UeqlGLHT0xI/AAAAAAAABP8/5FMS0IY3Ghk/s128-no/ima_128.png', caption: 'Aprende como usar la API de facebook y sincroniza tu web con facebook!!' }, function( response ) { if (!response || response.error){ console.log('error al compartir'); } else { creaLike(response.post_id); comentar(response.post_id); alert('Gracias por compartilo tu haces que otros tambien aprendan :)'); } }); }

También podemos hacer uso de los métodos/comments y/likes para añadir comentario y likes solo tenemos que indicar el ID de la publicación con el parámetropost_id , es decir utilizando elresponse.post_id, nos retornara el ID de la publicacion.

les dejo el código completo mas los códigos de comentario y like.


DESCARGAR




Publicar contenido de una web y añadir un comentario y añadir un like o me gusta a cada uno con la API de Facebook JS

7/25/2013

Anteriormente vimos comopublicar contenido de una web y añadir un comentario a esa publicacion, hoy les enseño como añadir un like o un me gusta a cada uno ya sea para la publicación o para el comentario todo de una manera facil y sencilla.

Como lo hacemos?
Facebook nos permite añadir cualquier contenido en el muro del usuario, y manipular ese contenido obviamente con los respectivos permisos ,para añadir unlike o un gusto a una publicación en el muro del usuario existe el metodo/likesel cual solo necesita el permisopublish_stream y ninguno otro mas es tan sencillo que tampoco necesitamos uso de parámetros solo con crear la función y indicarle el ID del comentario del cual se va añadir un like a la API eso es todo.

function creaLike(id){ FB.api('/'+id+'/likes', 'POST',function(response){ if (response && !response.error && response.id) { console.log('Nuevo Gusto id = '+response.id); } }); }

Solo se necesita colocar la funcióncreaLike(response.id) dentro del condicional verdadero, añadiendo el response.id que nos retornara el ID del comentario donde vamos añadir un like o un gusto.

les código completo con los anteriores códigos,


DESCARGAR










sábado, 20 de julio de 2013

Aprende a publicar contenido de una web y añadir un comentario en Facebook con la API de Facebook javascript

7/20/2013

Hoy les enseño como publicar contenido de una web y añadir un comentario a la publicación esto es ideal para los webmaster que necesitan aumentar el trafico en sus sitios con la ayuda de facebook, en la publicación anterior que sugiero leerpublicar y borrar estados para entender el funcionamiento del método post en esa publicación vimos como otorgar los permisos y publicar un simple comentario y como borrarlo.

El métodoPost que nos proporciona la API tiene 28 parámetros que podemos utilizar para las publicaciones ,las cuales ahora solo necesitamos las siguientes:

message: el mensaje o comentario.
picture: la imagen(URL) de la publicación del sitio web.
icon: el icono(URL) que representa la publicación puede ser el logo del APP del webmaster.
link: la URL de la publicación que se hizo en el sitio web.
name: el nombre o titulo de la publicación del sitio web.
description: un resumen del contenido de la publicación.

Otorgando permisos
para este ejemplo solo necesitamos dospermisos los cuales son:

publish_stream: permite publicar contenido en el muro del usuario.
read_stream: permite leer las ultimas publicaciones en el muro del usuario.

Utilizando la API.
primero necesitamos crear el login y añadir los permisos para cuando el usuario realice sesión , una vez que la sesión sea exitosa y haya aceptado los permisos del APP , automáticamente se hará una publicación en el muro del usuario,

function login(){ FB.login(function(response) { if (response.status == 'connected') { publicar(); console.log('login exito'); } else { alert('Debes de Iniciar sesión,si no podras tener acceso'); } },{'scope': 'publish_stream,read_stream'}); }

Crear la Function Publicar
ya entendido que hace los parámetros que vamos a necesitar para publicar cualquier contenido en el muro del usuario creamos la function publicar llamando al API y añadiendo el metodo POST a el feed del usuario es decir le hago saber ala API que me otorgue acceso para publicar en el muro del usuario/me/feed (muro del usuario) ,post(publicacion).

function publicar(){ FB.api('/me/feed', 'post', { message: 'Geniaaal..!! ya puedo publicar con la API DE FACEBOOK ooohh SIIᕙ(`▽´)ᕗ,!', picture :'https://lh5.googleusercontent.com/-lEKhKIIiobo/UeqlGLHT0xI/AAAAAAAABP8/5FMS0IY3Ghk/s128-no/ima_128.png', icon:'http://lh5.googleusercontent.com/-YpHyKKZjhr0/UeqlPyqAImI/AAAAAAAABQY/a65TrOZrLQI/s16-no/ima_16.png', link : 'http://www.javaface-elblogdelprogramador.com/', name : 'JavaFace-elblogdelprogramador: aprende usar la api de facebook', description : 'Aprende como usar la API de facebook y sincroniza tu web con facebook!!' }, function(response) { if (!response || response.error) { console.log('ERROR AL PUBLICAR'); } else { console.log('publicado con exito'); comentar(response.id); } }); }
como podrá también tenemos una function que nos retorna una respuesta el response con esta variable de retorno sabremos si la publicación fue exitosa o no,también podemos llamar a cualquier parámetro que necesitemos en este caso necesito el ID del comentario o publicación que se acaba hacer con el fin de añadir un comentario.

Como publicar un comentario en lapublicaciónrealizada
para añadir un comentario en el publicación yo necesito saber el ID de esta publicación de esa manera el ID se lo daré al métodocomments es por eso que otorgamos el permiso deread_stream para poder leer las ultimas publicaciones .

 function comentar(ID) { FB.api('/'+ID+'/comments', 'POST', { message:"esta aplicacion esta buenisima ;) " }, function(response) { if (response && !response.error && response.id) { console.log('Nuevo Comentario id = '+response.id); } }); }
aqui tengo una function que recibe un valor que seria el ID de la publicación el métodocomments recibe este ID y por medio del parámetromessage añadiremos cualquier mensaje que necesitemos añadir en la publicación, y eso es todo en la siguiente publicación enseñare a como dar un like o un me gusta a cada comentario o publicación realizada les dejo el codigo fuente de los ejemplos explicados .



DESCARGAR



lunes, 1 de julio de 2013

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

7/01/2013

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


Creación de una aplicación de Facebook (Api de Facebook)

7/01/2013
Desde hoy voy a enseñarles todo lo que se sobre el Api de facebook en javascript y todo lo que podemos hacer con esta API ,facebook da una pagina completa donde podremos empaparnos sobre su API ya sea en PHP o JS o para dispositivos móviles pero primero vamos a crear nuestro APP con el que tendremos acceso a facebook por medio de un usuario

Como Crear una APP de Facebook?
primero tomen una media de seguridad creen otra cuenta de facebook por si algún momento llegaran a incumplir una norma de facebook y este les bloquee la cuenta la cual sera la que crearon y no su cuenta personal. les digo esto por que ami me bloquearon la cuenta de JavaFace-Programadory aun no se si llegare a recuperarla.

1) Registrarse en Developers Facebook

Una vez logeados en su Segunda Cuenta nos dirigimos adevelopers facebook dentro de esta pagina nos aparecerá un botón Register Now



al hacer click en este Boton nos aparecerá un ventana modal donde deberemos aceptar las políticas y términos de facebook paracontinuar


una vez hecho click encontinuar facebook nos pedirá un numero de movil o teléfono celular esto es para que nos envíen un código de confirmación el cual deberemos de escribir para continuar (el código que les llega no lo borren ese código nos servirá para otros tutoriales como integración de facebook en aplicaciones java,que muy pronto enseñare)


el código de confirmación demora un poco en llegar si este no les llegara traten de utilizar otro numero de movil sin ese código no podemos tener acceso ni crear nuestra APP, después de que nos envían el código por un SMS(mensaje de texto) pueden seguir los otros pasos sin ninguna dificultad.

2) Crear la APP
después de habernos registrado ,crearemos el APP nos dirigimos ala opción de Menu APPS

luego nos aparece los botones para editar y crear una app

vamos a seleccionar el botónCrear una nuevaaplicación , luego nos aparece una ventana donde nos pedirá el App Name el nombre de nuestra app yApp Namespace el nombre que tendrá la dirección o la URL de la app esta debe de ser en minúsculas. luegoAdd Categoryes la categoría que pertenece la APP escojan la opción comunicación, pero por que comunicación? la app no sera una aplicación que se visualice dentro de facebook si no que crearemos una conexión de una pagina web a facebook solo seria un intermediario que no hace llegar a facebook.

si todo esta bien deben de tener elApp Name en estado Valid(valido) yApp Namespace en estado Disponible , click en continuar y luego les aparecerá el panel de configuración de su APP

esta parte podremos observar los elApp ID oAPI key , la cual es el ID o numero único de nuestra aplicación con ese ID es el que vamos a trabajar y poder comunicarnos con facebook.

3) Configurar el APPreciénCreada
dentro del panel de configuración realizamos clic en el botónEdit APP , luego veremos la información básica de nuestra app.

en la opción o casilla App Domains: deben de colocar el dominio que tiene su pagina en este caso yo voy a utilizar Blogger para realizar los ejemplos , por que blogger? me resulta mas rápido y fácil integrar que buscar un host gratuito para luego esperar que me activen la cuenta y después comenzar a subir los archivos al host con filezilla (me da pereza) prefiero blogger mucho mas rápido entonces debería de colocarblogspot.com. luego la opciónSandbox Mode debe de estar desactivada ,pero por que en estado desactivado? de esta forma estará invisible la app para terceras personas solo esta visible para el desarrollador.

Integración de tu aplicación con Facebook


URL del sitio en esta casilla deberemos de colocar la ruta o el nombre de nuestra pagina luegoGuarden los cambios y asta ay tenemos la configuración básica de facebook y podemos trabajar.

App Details(detalles de laaplicación)
en las opciones de lado izquierdo seleccionamos la opción App Details aquí editaremos los detalles de la aplicación

ElEslogan ,Descripción,Descripcióndetallada esas tres casillas deberán de ser editadas luego vamos a la casillaURL de la política de privacidad
aquí se deberá de colocar la ruta o URL de las políticas que tengan para su APP esto deberán de colocarlo si no lo hacen facebook en unos días les enviara un mensaje diciendo que debe de configurar su app añadiendo las políticas (pueden dejar en blanco la pagina de las políticas lo que facebook le interesa es la ruta).

Añadir los Logos de laAplicación
mas abajo deinformación de contacto están las opciones para añadir los iconos a la aplicación solo deberán añadir Primay Icon yAdditional Icon los demás ya es a su elección.

con todas estas indicaciones podremos crear una APP estable en facebook lo demás ya seria programar con la API de JavaScript que sera en la otra entrada donde aprenderemos como actualizar nuestros estados y publicar contenido de una web en el muro .














Suscribirse a: Entradas (Atom)