fbpx

How to integrate Facebook interactions in your apps

Posted on by myonesen

This article will help you adding some Facebook improvements into your app:

  • Facebook connect, to enable users to create their account seamlessly from their Facebook account
  • Share on Facebook available from some pages of your app

How to do that ?

Step 1: Start

On apps.penguinapps.biz, enter to manage one of your app, then go into “Settings > Facebook”:

In this page, these fields appear:

Step 2: Creation of a Facebook App

To be able to integrate Facebook interactions in your app, you must create a Facebook app. This app is a small software that will enable to create links between your app and the Facebook account of your users.

To create a Facebook page click on this link: https://developers.facebook.com/ .

This window appears:

To create a Facebook Application, you have to register as a developer on Facebook. Don’t worry it’s completely free. Click on Apps to follow the process.

This appears:

Click on “I accept the Facebook Platform Policy and the Facebook Private Policy” and then click on Continue to validate your choice.

This appears:

You have to enter you phone number to validate your account.

Step 3: The creation of a Facebook app

Now, you are registered on Facebook as a developer, you are now able to create the app which will enable your users to connect to your app with their Facebook account. To do this, click on “My Apps” at the top of the page. Then click on “Add a new app”

Choose “Web site”:

Then choose a name for your Facebook app. If you count to use for all your apps, if you have the intent to create several apps on penguinapps.biz, you can choose a name related to your company or a generic name, and if you intent to create only one app, you can choose a name related to your app’s name. In all cases, keep in mind this name will be displayed to the users when they will be prompted to accept to share their Facebook data with your app.

Then click on “Create new Facebook App ID”.
In the new window that opens, just choose “Communication” for the category and click “Create app ID”.

Then from the upper right corner, click on “Skip quick start”:

In the page that opens, click on “Settings” from the left menu

Step 4: Settings of your Facebook App

Now you will have 3 possibilities depending on 3 types of settings:
  • On penguinapps.biz, for your app, you don’t have set up a custom domain name for your mobile website, and you don’t have set up a white label admin panel. So, click here to see the process.
  • On penguinapps.biz, for your app, you don’t have set up a custom domain name for your mobile website, but you have set up your white label admin panel. Click here to see the process.
  • On penguinapps.biz, for your app, you have set up a custom domain name for your mobile website, regardless you have or not set up a white label admin panel. Click here to see the process.
1st CASE:
In Facebook, in the “App domains” field, enter “cms.penguinapps.biz” without “http” neither “www.” :
Next,click on “+ add platform”, and add “Website”.Just fill out the “Site URL” field with http://cms.penguinapps.biz:

Then click on “Save changes”

Click here to continue after 1st Case.

2nd CASE:
In Facebook, in the “App domains” field, enter the url of your white label admin panel without “http” neither “www.”. For example, “admin.yourdomain.com”

Next, click on “+ add platform”, and add “Website”.

Just fill out the “Site URL” field with the address of your white label admin panel and “http://” before it:

Click here to continue after 2nd Case.

3rd CASE:
In Facebook, in the “App domains” field, enter the url of your mobile website custom domain without “http” neither “www.”. For example, “mobile.domain.com”

Next click on “+ add platform”, and add “Website”.

Just fill out the “Site URL” field with the address of your mobile website custom domain admin panel and “http://” before it:

Here is the continuation regardless of your previous case.

 

Step 5: Your app keys

Now, you just have to enter the application ID and the secret key on Tiger

So go in “Settings” from the left menu of the developer Facebook website, and you will find your App ID and Secret Key:

Copy and paste it in apps.penguinapps.biz.
Then, in “status&reviews” in your Facebook App page, from the left menu, and in front of “Do you want to make this app and all its live features available to the general public?” switch to “yes”.

And it’s done!

Leave a Reply