Tutorial Creating Facebook App 2020 with Keyhash

There has been a lot of fuss about creating a facebook app, especially for Android because it requires additional ‘key hashes’. With the updated facebook interface, some may not be familiar with it. Here is a quick step by step picture tutorial to get everything up and running.

 

Add & Create New App ID

First off, we will need to create a facebook app. Login into your facebook account or go straight to ‘developers.facebook.com‘. On the top-right hand corner, select “Create App”. A new page will appear.

Next, select “Apps” followed by “Create a new app”. A pop-out box will appear.

Here are what the fields mean.

Display Name – This will be the name of the app, which other people will see. This is usually filled with the company name, application name, or a brand name.

Namespace – As an option, this is a unique identifier for the app.

Category – There are around 20 choices for you to select the category of the app.

In this tutorial, the “Display Name” used is “Sushi Rice” in the category of “Food & Drinks”. After submitting, you may be required to enter a CAPTHA.

 

 

 

Adding Android Platform to the New App

You will then be brought to the “Dashboard” which shows an overview of the whole facebook app. Take note of the “App ID’, which is a 15 digit long number. This will be used in your Android mobile application later.

Goto the “Settings” page. There, click “Add Platform” and select Android.

A new box will appear for you to fill in. Here is a brief explanation of the fields :

Package Name – This is the unique name of your package. It must be the same as your Android app, which is usually a reverse of your domain name. As an example, this tutorial uses “com.bricatta.sushiRice”.

Class Name – This is used to automatically launch the app via ‘intent’. This will be used together with the Package Name above to launch the unique app.

Key Hashes – This is the crucial part where must be set properly, or it will not work on Android. This is where most issues and problems arise from. This must be properly created and a special section about this is further below.

 

Making the App Public

Once these items has been configured, next is to make your facebook app id public, so the whole world can see it. If it isn’t public (default), only the facebook account which created the facebook app, can see the app id (and also other developers which you have added under ‘Roles’. This is not covered in this quick tutorial).

To make the facebook app id public, you will need to ensure that the “App Details” is filled up with your information. Once done, select “Status & Review” and start the submission.

[stextbox id=”info”]A common problem where users always face when the facebook app is not public, is that this error will appear in ‘adb logcat’. Only own facebook test-account or Roles can see the app id which is NOT public. To test this when the app is NOT public, you will need to create a test-account in facebook and use that account to login into the mobile app. It is much simpler to just make the app public and login using any facebook account.

W/fb4a(:<default>):BlueServiceQueue(19198): com.facebook.http.protocol.ApiExcept
ion: An unknown error occurred[/stextbox]

 

Key Hashes

There are 2 way to obtain the key hashes :

  1. Obtain the key hash from facebook logs
  2. Generating a key hash using using keytool

First, the easiet and fastest way is to obtain the key hash from the logs. First, ensure the official Facebook mobile application is installed on your android device. Start your Android application and call the facebook API using your mobile application. Run ‘adb logcat’ to view all Android logs. Look for the line :

[stextbox id=”info”]Run ‘adb logcat’ and look for this line which contains the key hash from facebook (process fb4a).

01-01 19:27:40.320 25347 26625 W fb4a.BlueServiceQueue: X.3Do: [code] 404 [message]: Key hash JGn9F2vDQ_w6hexLxdefCUpxYIA does not match any stored key hashes. (404) [extra]: null[/stextbox]

 

Here, you will see the ‘key hash’. Just replace any underscore ( “_” ) to slash ( “/” ) and hyphens ( “-” ) to plus sign ( “+” ). In this example, the key hash should be “JGn9F2vDQ/w6hexLxdefCUpxYIA”.

 

Now, we will explain the second method, which is a long complicated way to generate and create a key hash. You will need ‘keytool’ to proceed. In this tutorial, we will be generating a debug key used during developement. Remember to use your official key later. Goto the directory where your key file is stored (the key that you use to sign your Android application) and run :

[stextbox id=”grey”]keytool -exportcert -alias androiddebugkey -keystore yourKey.keystore | openssl sha1 -binary | openssl base64[/stextbox]

or if you are on an Apple Mac :

[stextbox id=”grey”]keytool -exportcert -alias androiddebugkey -keystore ~/.android/yourKey.keystore | openssl sha1 -binary | openssl base64[/stextbox]

It will ask for a password. After keying in your password, it will generate a key hash for you. If there is no prompt for a password, something has gone wrong. Most likely the key file isn’t found.

[stextbox id=”alert”]If no password is asked, an error has occurred. The key hash generated is incorrect.[/stextbox]

 

This quick tutorial will be updated if there are any major changes to Facebook’s app id creation. The End.

 

 

 

Posted in Tutorial and tagged , , , .