En este ejemplo vamos a explicar como instalar y configurar el plugin de Facebook en nuestra aplicación para dispositivos móviles creada con PhoneGap y para iOS, la configuración para los otros dispositivos es muy similar y más adelante indicamos donde hacerlo.
Primero debemos instalar PhoneGap en nuestra computadora, aquí están los pasos a seguir, donde se encuentran los pasos para instalarlo en OS X o Windows.
Antes de integrar el plugin en nuestra aplicación móvil debemos tener una aplicación creada en Facebook, debes entrar al area de desarrollo https://developers.facebook.com/ y crear la aplicación correspondiente https://developers.facebook.com/apps/ después de estos pasos necesitas apuntar el APP ID, que lo vas a necesitar en los pasos siguientes.
Después de tener instalado PhoneGap en la terminaly la aplicación en Facebook ejecutamos los siguientes comandos:
# Creamos la aplicación $ cordova create PruebaFacebook com.dotnetcr.pruebaFacebook "PruebaFacebook" # Ingresamos al folder creado $ cd pruebafacebook # Agregamos la plataforma deseada # Pueden ser ios, amazon-fireos, android, blackberry10, browser, firefoxos $ cordova platform add ios $ cordova build # Clonamos el plugin en la computadora $ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git # Instalamos el plugin en la aplicación, # APP_ID es el número de aplicación de Facebook # APP_NAME es el nombre de la aplicación $ cordova -d plugin add phonegap-facebook-plugin --variable APP_ID="12345678912345" --variable APP_NAME="NombreAppEnFacebook"
En este punto la aplicación está lista para funcionar, todos los parámetros quedaron configurados en el archivo config.xml y en Info de la aplicación.
Aquí puede consultar los manuales de instalación para los distintos dispositivos: Android, iOS, otros.
Una vez que hemos seguidos los pasos de instalación y configuración modificamos index.html para hacer las pruebas e interactuar con Facebook. Entre las etiquetas de <body> agregamos el siguiente código:
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready 2</p>
</div>
<div class="event listening button" onclick="login();">Login with Facebook</div>
<div class="event listening button" onclick="showDialog();">Show Dialog with Facebook</div>
<div class="event listening button" onclick="apiTest();">Test API with Facebook</div>
<div class="event listening button" onclick="getAccessToken();">Get access token with Facebook</div>
<div class="event listening button" onclick="getStatus();">Get login status with Facebook</div>
<div class="event listening button" onclick="logout();">Logout with Facebook</div>
</div>
<div id="fb-root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/facebookConnectPlugin.js"></script>
<script type="text/javascript">
var fbLoginSuccess = function (userData) {
alert("UserInfo 2: " + JSON.stringify(userData));
}
var login = function () {
if (!window.cordova) {
var appId = prompt("Enter FB Application ID", "12345678912345");
facebookConnectPlugin.browserInit(appId);
}
facebookConnectPlugin.login(["email"],
fbLoginSuccess,
function (error) { alert("" + error) }
);
//facebookConnectPlugin.login( ["email"],
// function (response) { alert(JSON.stringify(response)) },
// function (response) { alert(JSON.stringify(response)) });
}
var showDialog = function () {
facebookConnectPlugin.showDialog( { method: "feed", link: 'http://www.dotnetcr.com',
caption: 'DotNetcr.com - Programación en español'},
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var apiTest = function () {
facebookConnectPlugin.api( "me/?fields=id,email,last_name",
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var getAccessToken = function () {
facebookConnectPlugin.getAccessToken(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var getStatus = function () {
facebookConnectPlugin.getLoginStatus(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var logout = function () {
facebookConnectPlugin.logout(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
function correcta(){
alert("conectado");
}
</script>
En este momento ya podemos compilar la aplicación y debe de estar funcional e integrada con nuestra aplicación de Facebook.
