How To Get An App ID and Secret Key From Facebook for iOS and android

Firstly you need to register your app on the facebook developer. https://developers.facebook.com/ . Make sure you have facebook account before proceed. Go to Apps tab and select Create a New App.

facebook developer

facebook developer

Enter your display name and select category. Leave it blank for namespace. Then click Create App.

facebook developer

facebook developer

Enter the captcha text then submit.

facebook developer

facebook developer

You will see your facebook app details here.

facebook developer

facebook developer

Go to setting page to setup your ios and android.

facebook developer

facebook developer

Click Add Platform and select ios platform.

facebook developer

facebook developer

Enter your bundle ID and enable Single Sign On. Your bundle ID will be com.revivalx.cordova.facebook . And click Save Changes.

facebook developer

facebook developer

Add platform for android.

facebook developer

facebook developer

Android setting require a hash key. To get this hash key, you need to run this command to generate it. Run this command in your terminal.

keytool -exportcert -alias Cordova Connect Plugin -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

terminal

terminal

You will get your hash key XXXXXXXXXXXXXXXXXXXXXXXXXXX . Enter your package name and hash key. Then don’t forget to enable Single Sign On. Click Save Changes to save.

facebook developer

facebook developer

 

Paynow feedback

Whether you sell a product or service on social media such as Facebook and Instagram?

If yes, I would like to get your feedback for our mobile app idea. This mobile app cooked up specifically for online sellers like you to help increase sales and make you more efficient commercial operations.

You may find out more about the app ni via the link below:

http://www.esaezzat.com/recommends/go.php?c=paynow

If you give the feedback for this app, we will also give incentives worth over RM500. I give this offer to future LIMITED, so click the link below to watch the video on my app and so give feedback:

http://www.esaezzat.com/recommends/go.php?c=paynow

Thank you.

paynow app

paynow app

My Next Big Thing Project, PayNow

For those who are curious, I’m currently developing a mobile app that caters to e-commerce sector. The app is called as PayNow.

What is PayNow? If you are an online seller and selling your products on social media such as Facebook and Instagram, this app can be an excellent selling tool for you. PayNow lets you create and upload your products quickly and easily. Sharing your products with your customers via social media can be done in just a tap.

paynow

paynow

Below are some of the features of this app:

  • Quick and easy product creation
  • Instant sharing to Facebook Profile & Page, Twitter and Instagram
  • Unique product link, copy and paste the link to anywhere you want
  • Automated payment processing and order management
  • And much much more…

You can download the app from the links below. Please don’t forget to leave a review too!

Enjoy!!

Integration Cordova Facebook Connect Plugin for android

In this tutorial, we will learn how to integrate your app with Cordova Facebook Connect Plugin. This tutorial only cover for iOS and android platform.

Before you proceed this tutorial, make sure you already have pre installed with

in your machine.

To use this plugin you will need to make sure you’ve registered your Facebook app with Facebook and have an APP_ID (https://developers.facebook.com/apps). 

If you plan on rolling this out on iOS, please note that you will need to ensure that you have properly set up your Native iOS App settings on the Facebook App Dashboard. Please see the Getting Started with the Facebook SDK: Create a Facebook App section, for more details on this.

If you plan on rolling this out on Android, please note that you will need to generate a hash of your Android key(s) and submit those to the Developers page on Facebook to get it working.

facebook developer

facebook developer

Firstly you need to register your app on the facebook developer. https://developers.facebook.com/ . Make sure you have facebook account before proceed. Go to Apps tab and select Create a New App.

facebook developer

facebook developer

Enter your display name and select category. Leave it blank for namespace. Then click Create App.

facebook create a new app

facebook create a new app

Enter the captcha text then submit.

facebook captcha

facebook captcha

You will see your facebook app details here. Your App ID will be use for Cordova Facebook Connect Plugin.

facebook developer dashboard

facebook developer dashboard

Go to setting page to setup your ios and android for cordova facebook connect plugin.

facebook developer basic setting

facebook developer basic setting

Click Add Platform and select ios platform.

facebook app select platform

facebook app select platform ios

Enter your bundle ID and enable Single Sign On. Your bundle ID will be com.revivalx.cordova.facebook . And click Save Changes.

facebook ios setting

facebook ios setting

Add platform for android.

facebook app select platform android

facebook app select platform android

Android setting require a hash key. To get this hash key, you need to run this command to generate it. Run this command in your terminal.

keytool -exportcert -alias Cordova Connect Plugin -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
hash key for android

hash key for android

You will get your hash key, RZDg+xMYTX/NZm2BxXIUnATSAf0= . Enter your package name and hash key. Then don’t forget to enable Single Sign On. Click Save Changes to save.

facebook app android basic setting

facebook app android basic setting

You need to create a cordova project using terminal (mac)/ cmd (windows). You need to install node.js to run cordova command. Please refer to this site how to install cordova using NPM. https://www.npmjs.org/package/cordova .

After that, type this command into your terminal.

cordova create com.revivalx.cordova.facebook

Then add platform for iOS and android

cordova platform add android
cordova platform add ios
create project com.revivalx.cordova.facebook

create project com.revivalx.cordova.facebook

Install this cordova facebook connect plugin into your cordova project  using this command.

cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID="589003057863589" --variable APP_NAME=“Cordova Connect Plugin”
cordova facebook connect plugin

cordova facebook connect plugin

Open up your eclipse and create a new project. Click File > New > Other.

eclipse new project

eclipse new project

Choose Project under General category and click Next.

eclipse new project

eclipse new project

Enter your project name. We name it for this tutorial, com.revivalx.cordova.facebook . 

Screen Shot 2014-05-17 at 4.43.24 AM

Then choose your location for your project. Click Finish. Your project hierarchy will be like this.

com.revivalx.cordova.facebook

com.revivalx.cordova.facebook

Open up your config.xml and change with this one.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.facebook" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaFacebook</name>
    <description>
        This source code provides example for facebook login.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

example hackbook

example hackbook

Then go to www folder inside plugins folder in your parent folder. com.revivalx.cordova.facebook plugins > com.phonegap.plugins.facebookconnect www . Copy two these files inside your www folder. com.revivalx.cordova.facebook > www.

com.phonegap.plugins.facebookconnect

com.phonegap.plugins.facebookconnect

Open your index.html file in parent folder and replace this code with this one. Copy app id that already generated from facebook developer app website.

// Initialize the Facebook SDK
document.addEventListener('deviceready', function() {
FB.init({
appId: '589003057863589',
nativeInterface: CDV.FB,
useCachedDialogs: false
});
FB.getLoginStatus(handleStatusChange);
authUser();
updateAuthElements();
});

If you want to create an android app, make sure you copy all these files into src folder in your cordova project. These are your ‘Facebook SDK’. You don’t need to download Facebook Android SDK bundle on the Facebook Developer. Download all these files first. https://github.com/phonegap-build/FacebookConnect/tree/master/src/android/facebook .

  • AsyncFacebookRunner.java
  • DialogError.java
  • Facebook.java
  • FacebookError.java
  • FbDialog.java
  • Util.java

Create a hierarchical folder (com.facebook.android) inside src folder. com.revivalx.cordova.facebookplatforms > android > src .

com.facebook.android folder

com.facebook.android folder

Copy all these files into your src folder. com.revivalx.cordova.facebookplatforms > android > src > com > facebook > android

com.facebook.android

com.facebook.android

Replace ConnectPlugin.java file with this one, https://github.com/phonegap-build/FacebookConnect/blob/master/src/android/ConnectPlugin.java .

Cordova Facebook Connect Plugin

Cordova Facebook Connect Plugin

Go to res folder and copy it into android folder.

Build your project for ios and android using terminal.

cordova build ios

cordova build android

Import another project for android and cordova library.

import android project

import android project

Select Existing Android Code Into Workspace under Android category.

import android

import android

 Select All except FacebookLib project. Click Finish.

import android project

import android project

Right click project. Select Run As > Android Application.

Run As Android Application

Run As Android Application

Choose a running Android device and click OK.

android device chooser

android device chooser

Download sample app: https://github.com/datomnurdin/com.revivalx.cordova.facebook

Then your app will running in your device. Next tutorial I will show for iOS part. Don’t hesitate to contact me if you got any questions or problems about this problem.