Intégrer le Facebook SDK dans votre application

Salut les amis ! aujourd’hui nous allons apprendre comment intégrer la Facebook SDK dans notre application 😀

Quelle est l’utilité ?

Bonne question ! il faut savoir une chose, c’est que c’est bien d’avoir une excellente application avec pleins de fonctionnalités hypers cool et un design à couper le souffle, mais voyez-vous, si vous ne faîtes pas en sorte de créer de la viralité pour la faire connaître, je doute que beaucoup de personnes puissent la télécharger à part votre grand mère et vos amis 😛

Sérieusement cela sert à de multiples choses, on peut citer :

  • La possibilité d’authentifier vos utilisateurs.
  • Partager par exemple un lien sur Facebook depuis l’application.
  • Avoir quelques informations utiles sur vos utilisateurs ( tranche d’âge, sexe…etc )
  • …etc

Pour ce tutoriel, nous allons nous intéresser au partage, car cela consiste un excellent moyen pour faire monter le nombre de téléchargement de votre application !

L’intégration

    1. D’abord aller dans la console de Facebook puis dans MyApps -> Add New App , et vous choisissez la plateforme Android.
    2. Normalement vous arriver à cela et vous devez choisir un nom pour votre application FBimage3130
    3. Sélectionner la catégorie appropriée et laisser comme par défautimage3149
    4. Puis vous descendez jusqu’à Tell us about your Android project et dans package name vous mettez celui de votre application, dans mon cas cela sera “com.tutosandroidfrance.facebook”
    5. Et dans Default Activity Class Name vous mettez par exemple “com.tutosandroidfrance.facebook.MainActivity” et cliquer sur Next image3166
    6. Facebook vous affiche un message comme quoi ils n’ont pas trouvé l’application sur Play Store, c’est normal vous choisissez Use this package name et vous mettez Next jusqu’à arriver à Finish.

 

Côté client

Avant de faire quoi de que soit, vous devez récupérer l’identifiant de votre application Facebook. Et pour cela il vous faut aller dans MyApps -> notre application et vous trouverez l’id

image3183

 

Maintenant on peut commencer ! 😀

 

    1. Dans Android studio, créer un nouveau projet en allant dans File->New->New Project 
    2. Dans Application name mettez “Facebook” et Company domaine “tutosandroidfrance.com”
    3. Dans votre fichier /app/build.gradle, ajouter ceci avant les dépendances
      repositories {
          mavenCentral() 
      }
    4. Puis dans les dépendances, ajouter la ligne suivante
      compile 'com.facebook.android:facebook-android-sdk:4.1.0'
    5. Créer une class App qui hérite de la class Application, elle nous servira pour initialiser la SDK
      package com.tutosandroidfrance.facebook;
      
      import android.app.Application;
      
      import com.facebook.FacebookSdk;
      
      /**
       * Created by Back Packer
       * Date : 08/07/15
       */
      public class App extends Application {
      
          @Override
          public void onCreate() {
              super.onCreate();
      
              FacebookSdk.sdkInitialize(getApplicationContext());
          }
      
      }
      
      
  • Ajoutez la ressource suivante dans values -> strings, c’est l’id de notre application Facebook
    <string name="facebook_app_id">853738218055424</string>
  • Dans votre fichier AndroidManifest.xml , copiez le code suivant, il contient tout ce qui nécessaire pour faire fonctionner la SDK, mais attention n’oubliez pas de copier l’id de l’application
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.tutosandroidfrance.facebook" >
    
        <!-- Pour pouvoir utiliser la connexion internet -->
        <uses-permission android:name="android.permission.INTERNET"/>
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:name=".App"
            android:theme="@style/AppTheme" >
    
            <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    
            <activity android:name="com.facebook.FacebookActivity"
                android:configChanges=
                    "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
                android:theme="@android:style/Theme.Translucent.NoTitleBar"
                android:label="@string/app_name" />
    
            <!-- ATTENTION ! n'oubliez pas de remplacer 853738218055424 par l'id de votre
                application Facebook
            -->
            <provider android:authorities="com.facebook.app.FacebookContentProvider853738218055424"
                android:name="com.facebook.FacebookContentProvider"
                android:exported="true" />
    
            <activity
                android:name=".MainActivity"
                android:label="@string/app_name" >
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>
    
  • Dans votre fichier activtiy_main.xml, ajouter le code suivant
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
        <com.facebook.share.widget.ShareButton
            android:id="@+id/fb_share_button"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" />
    
    </RelativeLayout>
    

    device-2015-07-08-125320 device-2015-07-08-132528

  • Et dans votre class MainActivity, copiez le code ci-dessous
    package com.tutosandroidfrance.facebook;
    
    import android.net.Uri;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    
    import com.facebook.share.model.ShareLinkContent;
    import com.facebook.share.widget.ShareButton;
    
    public class MainActivity extends AppCompatActivity {
    
        private ShareButton shareButton;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            shareButton = (ShareButton) findViewById(R.id.fb_share_button);
    
            /**
             *  Dès que l'utilisateur clique sur notre ShareButton, cela
             *  lui affiche une vue qui lui permet de partager le lien
             *  qu'on a mis 🙂
             */
            ShareLinkContent content = new ShareLinkContent.Builder()
                    .setContentUrl(Uri.parse("http://www.android-pour-tous.com/"))
                    .build();
    
            shareButton.setShareContent(content);
        }
    
    }
    
    

 

Voilà maintenant vous pouvez tester l’application et partager le lien, et vous le trouver comme par magie sur votre profil 😛

ATTENTION !

Ce test a été fait en environnement de développement, c’est à dire que pour que le partage fonctionne quand l’application est signé, vous devez ajouter le bon hash ici

image3204

 

En faisant la manipulation suivante

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl
base64

Bref j’espère que ce tuto vous sera utile, n’hésitez pas à me faire des remarques ! 😀

Le code source de l’application est disponible sur Github

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *