Android Facebook Integration

Facebook is an online social media and social networking service. Users can post comments, share photographs and links to news or other interesting content on the Web, play games, chat live, and even stream live video. Shared content can be made publicly accessible, or it can be shared only among a select group of friends or family, or with a single person. Facebook is also available as Android App.

In this blog, we will be discussing how can we integrate Android Apps with Facebook. We will be using a Facebook Login button to make the user enter our App using their facebook credentials. Developers can extract all the available information that the fb API provides. Steps to develop this can be summarized below -

• Create a new app ID on Facebook website.
• Download the SDK for the integration
• Include the required dependencies.
• Register your app on facebook by sumitting the package name and default Activity Class name
• Download the openssl exe for encryption.
• Generate Development Hash Key.
• Enable Single SignOn.
• Make changes to Manifest file of your app
• Handle Facebook Login Button using FacebookCallback
• Use OnActivityResult to confirm login has been successful
• Fetch Profile details from the user's facebook profile
• Download the display picture of the user using Async task
• Display the details on the next screen along with the display picture.

Used Concepts & Used Version: (Version of Android SDK, Facebook SDK)

We will be using Facebook's SDK here which is provided by Facebook's Developers website.

• Facebook Dependency - compile 'com.facebook.android:facebook-android-sdk:[4,5)'
• compileSdkVersion 25
• buildToolsVersion "26.0.1"

Now, let us begin the development...

1.Create a new app ID on Facebook website.

• Visit the link - https://developers.facebook.com/

• Click on the dropdown(Top Right Corner) and then click on 'Add a new App'

• Fill up the dialog which appears- Name of the app and email id. Then click on Create App Id

• Click on 'Facebook Login' button.

• Click on QuickStart link embedded in - 'Easily Add Facebook Login to your App with Quickstart.'

• Click on the Android Icon.

• Click on Download SDK to downalod Facebook SDK.

2.Click on import facebook sdk and Include the dependencies required for integration in your project.

// Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { repositories { jcenter() mavenCentral() } dependencies { classpath 'com.android.tools.build:gradle:2.3.3' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } } allprojects { repositories { jcenter() mavenCentral() } } task clean(type: Delete) { delete rootProject.buildDir }

Add Dependency to app module also.

apply plugin: 'com.android.application' android { compileSdkVersion 25 buildToolsVersion "26.0.1" defaultConfig { applicationId "example.facebookintegration" minSdkVersion 17 targetSdkVersion 25 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) testCompile 'junit:junit:4.12' compile 'com.facebook.android:facebook-android-sdk:[4,5)' compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:design:25.3.1' }

Run ‘Sync Gradle’ after you add the dependencies.

3.Provide information about your project- package and Default Activity Class.

In the next Dialog , click on 'Use this package name' as we are developing for testing purposes and will not be working on an app on Google Play.

4. Downloading Open SSL.

Visit the link - https://code.google.com/archive/p/openssl-for-windows/downloads - to download the openssl. Open SSL is open source and a software library to be used in applications that need to secure communications over computer networks against eavesdropping or need to ascertain the identity of the party at the other end.

5. Generating Key Hashes

Go to your computer's command Prompt to generate the Key hashes. You will require below commands for generating key hashes.

Enter the Key Hashes into the Key Hashes field.

6. Enable Single Sign On in the next step.

Go to your app's String's file in the value folder. Enter your app id there as one the strings.

7. Making changes in Manifest file.

• Adding meta-data for application id of the app

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="example.facebookintegration"> <uses-permission android:name="android.permission.INTERNET"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.NoActionBar"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id" /> <activity android:name=".Main2Activity" android:label="@string/title_activity_main2" android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:screenOrientation="portrait"> </activity> </application> </manifest>

8. Handling the Login button

Add a Login button and Logout button for the app in the layout. Login button is provided by the Facebook SDK.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <com.facebook.login.widget.LoginButton android:id="@+id/login_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:gravity="center" android:layout_margin="4dp" android:paddingTop="12dp" android:paddingBottom="12dp"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/logout" android:text="logout"/> </LinearLayout>

Below is the MainActivity which handles the login button. We use a callBackhandler to be called when user presses the Login button.the callBack is registered within the onCreate method and called on Login button. The callback gets the user's identity confirmed from Facebook and calls the nextActivity method while providing the profile as the argument. In the nextActivity method , profile is used to fetch the details of the user and provided to an Intent(which is to be fired to take user to next Activity - Main2Activity.class).

package example.facebookintegration; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.Toast; import com.facebook.AccessToken; import com.facebook.AccessTokenTracker; import com.facebook.CallbackManager; import com.facebook.FacebookCallback; import com.facebook.FacebookException; import com.facebook.FacebookSdk; import com.facebook.Profile; import com.facebook.ProfileTracker; import com.facebook.login.LoginManager; import com.facebook.login.LoginResult; import com.facebook.login.widget.LoginButton; public class MainActivity extends AppCompatActivity { private CallbackManager callbackManager; //interface from FB SDK which manages the callbacks from an Activity's/fragment's // onActivityResult() Method private AccessTokenTracker accessTokenTracker; //This class can be extended to receive notifications of access token changes. // The AccessTokenTracker.stopTracking() method should be called in the onDestroy() // method of the receiving Activity or Fragment. private ProfileTracker profileTracker; // This class can be extended to receive notifications of profile changes. // The ProfileTracker.stopTracking() method should be called in the onDestroy() // method of the receiving Activity or Fragment. //Facebook login button //A callback class for the Facebook SDK. private FacebookCallback<LoginResult> callback = new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { //Profile class represents a basic facebook profile Profile profile = Profile.getCurrentProfile(); nextActivity(profile); } @Override public void onCancel() { } @Override public void onError(FacebookException e) { } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FacebookSdk.sdkInitialize(getApplicationContext()); callbackManager = CallbackManager.Factory.create(); accessTokenTracker = new AccessTokenTracker() { @Override protected void onCurrentAccessTokenChanged(AccessToken oldToken, AccessToken newToken) { } }; profileTracker = new ProfileTracker() { @Override protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) { nextActivity(newProfile); } }; accessTokenTracker.startTracking(); profileTracker.startTracking(); LoginButton loginButton = (LoginButton)findViewById(R.id.login_button); callback = new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { AccessToken accessToken = loginResult.getAccessToken(); Profile profile = Profile.getCurrentProfile(); nextActivity(profile); Toast.makeText(getApplicationContext(), "Logging in...", Toast.LENGTH_SHORT).show(); } @Override public void onCancel() { } @Override public void onError(FacebookException e) { } }; loginButton.setReadPermissions("user_friends"); loginButton.registerCallback(callbackManager, callback); FacebookSdk.sdkInitialize(getApplicationContext()); } @Override protected void onResume() { super.onResume(); //Facebook login Profile profile = Profile.getCurrentProfile(); nextActivity(profile); } @Override protected void onPause() { super.onPause(); } protected void onStop() { super.onStop(); //Facebook login accessTokenTracker.stopTracking(); profileTracker.stopTracking(); } @Override protected void onActivityResult(int requestCode, int responseCode, Intent intent) { super.onActivityResult(requestCode, responseCode, intent); //Facebook login callbackManager.onActivityResult(requestCode, responseCode, intent); } private void nextActivity(Profile profile){ if(profile != null){ Intent main = new Intent(MainActivity.this, Main2Activity.class); main.putExtra("name", profile.getFirstName()); main.putExtra("surname", profile.getLastName()); main.putExtra("imageUrl", profile.getProfilePictureUri(200,200).toString()); startActivity(main); } } }

Main2Activity.class fetches the data from the intent and displays it on its layout. We are showing user's name and display picture here. For downloading the image, we are using DownloadImage.class which is extending AsyncTask.

package example.facebookintegration; import android.content.Intent; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; import com.facebook.login.LoginManager; import com.facebook.share.model.ShareLinkContent; import com.facebook.share.widget.ShareDialog; public class Main2Activity extends AppCompatActivity { private ShareDialog shareDialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { ShareLinkContent content = new ShareLinkContent.Builder().build(); shareDialog.show(content); } }); Bundle inBundle = getIntent().getExtras(); String name = inBundle.get("name").toString(); String surname = inBundle.get("surname").toString(); String imageUrl = inBundle.get("imageUrl").toString(); TextView nameView = (TextView)findViewById(R.id.nameAndSurname); nameView.setText("" + name + " " + surname); new DownloadImage((ImageView)findViewById(R.id.profileImage)).execute(imageUrl); shareDialog = new ShareDialog(this); Button logout = (Button)findViewById(R.id.logout); logout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { LoginManager.getInstance().logOut(); Intent login = new Intent(Main2Activity.this, MainActivity.class); startActivity(login); finish(); } }); } }

Layout for Main2Activity.class

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:text="Hello:" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:textSize="20dp" android:layout_gravity="center_horizontal"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/nameAndSurname" android:textSize="22dp" android:textStyle="bold" android:layout_marginTop="10dp" android:layout_gravity="center_horizontal"/> <ImageView android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/profileImage" android:layout_marginTop="10dp" android:layout_gravity="center_horizontal"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Logout" android:id="@+id/logout"/> </LinearLayout>

DownloadImage.class

package example.facebookintegration; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.AsyncTask; import android.util.Log; import android.widget.ImageView; import java.io.InputStream; public class DownloadImage extends AsyncTask<String, Void, Bitmap> { ImageView bmImage; public DownloadImage(ImageView bmImage) { this.bmImage = bmImage; } protected Bitmap doInBackground(String... urls) { String urldisplay = urls[0]; Bitmap mIcon11 = null; try { InputStream in = new java.net.URL(urldisplay).openStream(); mIcon11 = BitmapFactory.decodeStream(in); } catch (Exception e) { Log.e("Error", e.getMessage()); e.printStackTrace(); } return mIcon11; } protected void onPostExecute(Bitmap result) { bmImage.setImageBitmap(result); } }

9. Output of the App.

Below are the screenshots from the app after development.