Developers Manual > SDK Integration > Facebook > Integrate Facebook SDK on Android

Integrate Facebook SDK on Android

version: cocos2d-js v3.x
language: JavaScript
platform: Android
update: Updated about 2 years ago

This doc walks you through the integration of Facebook SDK Beta for Cocos2d-JS on Android, including creating app, configuring SDK settings and apk packaging.

Notice: This doc only works with Facebook SDK Beta and later versions. If you are using ther Facebook SDK Alpha (Released with Cocos2d-JS v3.0 RC2), Please refer to Facebook SDK Alpha Integration Document

Create a Facebook App

Please refer to Step 5. Create a Facebook App - Getting Started with the Facebook SDK for Android to create a Facebook App with Android platform.

Add Facebook SDK Beta to A Cocos2d-JS Project

Use Cocos command line tool to generate a js project, and you need to make a few modifications to the Android project before you can use Facebook SDK Beta.

step1: Add app name and app id in frameworks/runtime-src/proj.android/res/values/strings.xml:

1
2
<string name="app_name">cocos sample</string>
<string name="app_id">1450063488603945</string>

step2: Add the following code snippet in frameworks/runtime-src/proj.android/AndroidManifest.xml:

1
2
3
4
5
6
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/app_id" />

<activity android:name="com.facebook.LoginActivity" />
<provider android:authorities="com.facebook.app.NativeAppCallContentProvider1450063488603945"
          android:name="com.facebook.NativeAppCallContentProvider"
          android:exported="true"/>

step3: Add Plugin-x link lib in frameworks/runtime-src/proj.android/jni/Android.mk:

LOCAL_WHOLE_STATIC_LIBRARIES += jsb_pluginx_static
$(call import-module,cocos2d-x/plugin/jsbindings)

step4: Add the following code snippet in frameworks/runtime-src/proj.android/jni/hellojavascript/main.cpp:

1
2
3
4
5
6
7
8
#include "PluginJniHelper.h"
void cocos_android_app_init (JNIEnv* env, jobject thiz) {
    LOGD("cocos_android_app_init");
    AppDelegate *pAppDelegate = new AppDelegate();
    JavaVM* vm;
    env->GetJavaVM(&vm);
    PluginJniHelper::setJavaVM(vm);
}

step5: Add the following code snippet in frameworks/runtime-src/Classes/AppDelegate.cpp. Notice: Please pay attention to the location of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
#include "jsb_cocos2dx_pluginx_auto.hpp"
#include "jsb_pluginx_extension_registration.h"
#endif

bool AppDelegate::applicationDidFinishLaunching()
{
    ScriptingCore* sc = ScriptingCore::getInstance();

    ...

    // Add these lines before sc->start()
    #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS || CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
        sc->addRegisterCallback(register_all_pluginx_protocols);
        sc->addRegisterCallback(register_pluginx_js_extensions);
    #endif

    sc->start();    

    ...

    return true;
}

step6: Add the following code snippet in copy_resources section of frameworks/runtime-src/proj.android/build-cg.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "from": "../../js-bindings/cocos2d-x/plugin/jsbindings/script", 
    "to": ""
},
{
    "from": "../../js-bindings/cocos2d-x/plugin/protocols/proj.android/src", 
    "to": "../src"
},
{
    "from": "../../js-bindings/cocos2d-x/plugin/plugins/facebook/proj.android/src", 
    "to": "../src"
}, 
{
    "from": "../../js-bindings/cocos2d-x/plugin/plugins/facebook/proj.android/sdk", 
    "to": "../libs"
}

step7: Add the following code snippet in frameworks/runtime-src/proj.android/project.properties:

android.library.reference.2=../../js-bindings/cocos2d-x/plugin/plugins/facebook/proj.android/DependProject

step8: Add the following code snippet in frameworks/runtime-src/proj.android/src/org/cocos2dx/javascript/AppActivity.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import org.cocos2dx.plugin.PluginWrapper;
import org.cocos2dx.plugin.FacebookWrapper;
import android.content.Intent;
import android.os.Bundle;

public class AppActivity extends Cocos2dxActivity {

    //...

    @Override
    public Cocos2dxGLSurfaceView onCreateView() {
        Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);
        glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8);
        PluginWrapper.init(this);
        PluginWrapper.setGLSurfaceView(glSurfaceView);
        FacebookWrapper.onCreate(this);
        return glSurfaceView;
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        FacebookWrapper.onAcitivityResult(requestCode, resultCode, data);
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        FacebookWrapper.onSaveInstanceState(outState);
    }

    //...
}

Now we are done with the setup and are ready to use the Facebook SDK Beta.

How to Use Facebook SDK Beta

Please visit Facebook SDK Beta for Cocos2d-JS

Package your project into apk

You can use Cocos2d-JS built-in tool - Cocos Console to package your project into an apk file. Run the following commandline under your project folder:

cocos compile -p android

More details in Cocos Console Document

1_2.PNG (15.3 kB) walzer@cocos2d-x.org, 2014-12-05 10:35

1_2en.PNG (14.9 kB) walzer@cocos2d-x.org, 2014-12-05 10:35

1.PNG (217.1 kB) walzer@cocos2d-x.org, 2014-12-05 10:35

2.PNG (16.9 kB) walzer@cocos2d-x.org, 2014-12-05 10:35

3.PNG (9.3 kB) walzer@cocos2d-x.org, 2014-12-05 10:35

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.