How to integrate “Facebook” and use it in cocos2d-x2.2.2/3.0beta2version (Tutorial1: for Android )Part1

This post is also available in:

Chinese
http://blog.csdn.net/liuyuyefz/article/details/17754025

Note from YUYE:

You guys voted for me to update this "How to integrate “Facebook” and use it in cocos2d-x, so your wish is my command! :]
This tutorial series is now fully up-to-date for Cocos2D-X 2.2.2/3.0beta2, Android.

Facebook is an online social networking service. Its name comes from a colloquialism for the directory given to students at some American universities.[5] Facebook was founded on February 4, 2004 by Mark Zuckerberg with his college roommates and fellow Harvard University students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.[6] The founders had initially limited the website’s membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities before it opened to high-school students, and eventually to anyone aged 13 and over. Facebook now allows anyone who claims to be at least 13 years old to become a registered user of the website.

This tutorial series will walk you through the process of creating a simple game to explain How can you integrate “Facebook” SDK and use it in cocos2d-x2.2.2version (for Android),and the part3 will introduce how to do these in V3.0beta2 from start to finish. You can follow along with the series, or just jump straight to the sample project at the end of the article.

h3. Jump to
Part 2:
http://www.cocos2d-x.org/forums/6/topics/45572
Part 3:
http://www.cocos2d-x.org/forums/6/topics/46057
of the series.

Downloading and Installing:

You can download cocos2d-x v2.2.2/v3.0beta from : http://www.cocos2d-x.org/download

The architecture and API is many difficult from v2.2.2/v3.0beta

The biggest change is v3.0: Changing namespace from “cocos2d” to “cc”

How to install it :

If you don not familiar with how to install it. just can reference “How to create a “Hello World” C*+ project with cocos2d-x2.2.2 or 3.0beta”
http://www.cocos2d-x.org/forums/6/topics/43031

You can download FacebookSDK from : https://developers.facebook.com/docs/android/

Create a Facebook App

Access to Facebook Developers site, on the top bar, go to ‘Apps’ > ‘Create a New App’:

And enter basic information such as its name and a unique namespace:

Once created, note down the app ID shown at the top of the dashboard page. You’ll need to add this to your project files.

Go to ‘Setting’ in the left nav , then click on the ‘Add Platform’ button and select Android. Add the debug key hash that you obtained. And check “Single Sign On”

If you have a release key, you will need to add its hash in the same way.
To obtain the release key hash, On OS X, run:

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

On windows ,Use:

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

You will be prompted for a password. This should be ‘android’ without quotes.

You can get more information : https://developers.facebook.com/docs/android/getting-started

Integrate Facebook’s SDK in Eclipse

Before you Integrate Facebook’s SDK in Eclipse, you’ll move the SDK to the path “/Users/USERNAME/cocos2d-x/projects/FacebookTutorial”

So let’s Open Eclipse and import 3 projects.

1, facebook-android-sdk:
under the path “/Users/USERNAME/cocos2d-x/projects/FacebookDemo/facebook-android-sdk”

2, proj.android:
under the path “/Users/USERNAME/cocos2d-x/projects/FacebookDemo/proj.android”

3, libcocos2dx:
under the path"/Users/USERNAME/cocos2d-x/cocos2dx/platform/android/java"


Then, make sure your “facebook-android-sdk” is a library for main project.

Now you have been integrated facebookSDK to your android projects. Go ahead and build and run the template as-is. If all works OK, you should see the following:

Facebook Plugin

You can download Facebook Plugin from :https://github.com/Ryeeeeee/FacebookTutorial

This is a simple Plugin we encapsulated method as following:

1.login
2.logout
3.getLoginStatus
4.sendRequests
5.pickFriends
6.postStatus

Move following files(.java) to “/Users/USERNAME/cocos2d-x/projects/FacebookTutorial/proj.android/src/org/cocos/fbtutorial”

Now we need to know how to connect “FacebookPlugin” to your “Main.Activity”.

Here is your “Main.Activity”, it dependent to What name you created the game.

Open your the AndroidManifest.xml and add following code:

Move “pick_friends_activity.xml” to “res/layout/”

Add the following code into “res/values/strings.xml”

Add the following code into “jni/android.mk”:

In this step, you’ll add code to implement some features.If you want to integreate the plugin you want, just add the plugin into your activity.For example, the followings show how to add Facebook Login Plugin. You can add other plugins in the same way.

Define a private variable for the FacebookLoginPlugin instance:

private FacebookConnectPlugin facebookLoginPlugin = null;

Next, override the onCreate() method to create a new FacebookLoginPlugin object, passing in the Context object.

@Override
protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		facebookLoginPlugin = new FacebookConnectPlugin(this);
		facebookLoginPlugin.onCreate(savedInstanceState);		
}

To ensure that the sessions are set up correctly, your activity must override the activity lifecycle methods:onCreate(), onResume(), onActivityResult(), onPause(), onDestroy() and onSaveInstanceState() and call the corresponding FacebookLoginPlugin methods.

Add the following code to make those changes:

@Override
public void onResume() {
	super.onResume();
	facebookLoginPlugin.onResume();
}

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

@Override
public void onPause() {
	super.onPause();
	facebookLoginPlugin.onPause();
}

@Override
public void onDestroy() {
	super.onDestroy();
	facebookLoginPlugin.onDestory();
}

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


FacebookSDKPath.png (28.4 KB)


HowToImport.png (78.1 KB)


threeImport.png (18.4 KB)


openLibary.png (91.2 KB)


FBisLib.png (108.1 KB)


HelloWorld.jpg (20.4 KB)


FacebookConnectPlugin.jpeg (43.9 KB)


FacebookConnectPluginPath.png (26.3 KB)


MainActivity.jpeg (46.6 KB)


mainActivity.png (81.0 KB)


mainActivity.png (81.0 KB)


plugins.png (76.3 KB)


src.png (89.4 KB)


androidmanifest.png (243.1 KB)


pick_friends_xml.png (40.5 KB)


tocreateapp.png (38.9 KB)


tocreateappwith.png (42.4 KB)


appid.png (53.8 KB)


keyhashes.png (38.6 KB)


androidmani.png (247.3 KB)


string.png (61.1 KB)


androidfest.png (249.6 KB)


androidmk.png (50.1 KB)

Thank you

@dungmv you are welcome

Fairly simple and straight to the point!
Keep up the good work, yuye!
Thank you.

P.S.: I’ve noticed the

tag is not displayed correctly.
Same in the docs. Must be the CSS or some bound php.

thank you
for this tutorial
I look forward so that Part 3
I try to make changes to adapt to version 3 without success until now.

need new Cocos2dxGLSurfaceView.
Error Logins:
02-24 02:58:34.847: I/dalvikvm(28708): #31 pc 00734d20 /data/app-lib/com.shadw.storycraft-1/libcocos2dcpp.so
02-24 02:58:34.847: I/dalvikvm(28708): at dalvik.system.NativeStart.run(Native Method)
02-24 02:58:34.847: E/dalvikvm(28708): VM aborting

part 2 : http://cocos2d-x.org/forums/6/topics/45572

@Shadw you can reference here for you problem

  1. How to convert “js” to “jsc” for code security
    http://www.cocos2d-x.org/forums/20/topics/43492

Thank you for part 3

@yuye I did not understand for ‘convert “js” to “jsc”’ . I not use Cocos2d-x html5/ javascript.
I Use Cocos2d-x c++ v3 beta0.

It works better with Part 3.

All function when the facebook application not installed.

but if facebook installed (facebook 6.0.0.28.28) all bug :

The message “Application would like to accéder à vos profil public et liste d’amis” in login have multi langue ?

after login getStatus return CLOSED_LOGIN_FAILED.

Post : show windows but no send post

pickfriend : again The message “Application would like to accéder à vos profil public et liste d’amis”.

SendRequests : Bug my application (E/AndroidRuntime(17767): com.facebook.FacebookException: Attempted to use a Session that was not open.}

@Shadw ok, can you give me a demo. I’ll test for you. sent to yuye.liu@chukong-inc.com
and tell you device and os version. thank you.
You can just use cocos2d-x for c++. but it can not make web game.
cocos2d-x html5

@yuye oh thank you for your help.
I compress and upload an example is I will send an email with the details.

@Shadw I hope can get more detail to description your problem. and a sample. so we are holding Game developer Conference. so maybe I’ll back your message later

Awesome tutorial.

How to share a picture + message ??
Can you show a small example.
let us assume picture is stored locally in the phone at a string path.

How to upload “picture + message” to fb timeline ?

thanks

will there be an ios verison atall??? :slight_smile:

@siddharthshekar I think IOS is easy than android. and the process is nearly the same way.

new to facebook integration…could you write a brief tutorial for it too pls :slight_smile:

@siddharthshekar I try to write a tutorials for u later.but we are holding developer conference. so it’s busy time now.
after 15th this month. I’ll make it for you. thanks for reading my tutorials. I hope you guys can understand me.

@yuye thanks… sure mate… really like you guys dedication. I really like cocos2d-x and this community. math and code are like music :slight_smile: … it is a universal language :slight_smile: … understand it loud and clear.

for ios Facebook integration tutorial is available ?

@srinivas I’ll start in this week

Hi. I followed the tutorial, but when I try to use the fb share (Post Status) it’s not showing what I expect. I am uploading a screenshot of what I see. I will be glad if someone help :slight_smile:

I am using cocos2d-x 3.0

Any ideas? (Sorry if spam. I really want to get this done :slight_smile: )