Facebookで自分のアプリを友達に招待する方法 -App Invite- | Xamarin.Forms

2017/07/18
19:09

今回はFacebookの友達に自分のアプリを紹介するApp Inviteの実装方法についてご紹介します。
AndroidではFacebookが表示されなかったり、iOSでは実機でのデバッグがクラッシュしたりと、今回もハマりどころ満載でした。

iPhone7 iOS10

Android5

前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.3.0.795 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.6.0.10

１．NuGetパッケージをインストール

NuGetパッケージマネージャから「Xamarin.Facebook」で検索します。

【iOSの場合】
Xamarin.Facebook.iOS v4.22.0以降をインストールします。（v4.24.0推奨）

【Androidの場合】
Xamarin.Facebook.Android v4.11.0以降をインストールします。
※MonoAndroidバージョンとの依存関係とXamarin.Android.Supportの依存関係があります。

尚、Android4ではログイン後に空白ページ（真っ白なページ）が表示される不具合のため、Xamarin.Facebook.Android v4.22.0以降（最新を推奨）をインストールしたほうが良いと思います。
https://developers.facebook.com/bugs/721787828000962/
※2017/11/29追記
Android4で再度確認したところ、正常にログインできました。
Xamarinのバージョンにも起因するものだったのでしょうか。

２．Facebook for Developersの登録

（１）AppLinkページを作成します。
以下のURLから　AppLinkを作成するボタンよりFacebook上でアプリ専用のURLが作成可能です。
https://developers.facebook.com/docs/app-invites
作成されたURLは http://fb.me/9999999999999 というようなURLが取得できます。

（２）以下のURLでアプリのIDが登録されていますのでアプリIDを控えます。
https://developers.facebook.com/apps/

※FacebookからのSDKのダウンロードは必要ありません。NuGetパッケージに含まれています。

３．PCLの記述

iOSとAndroidで共通の記述にするためにPCLプロジェクト内にDependencyServiceで呼び出すためのインターフェースを配置します。

IFacebookService.cs

namespace AppName.Services
{
    //DependencyServiceから利用する
    public interface IFacebookService
    {
        //SDKを初期化する（Android用）
        void Initialize();

        //Facebookを開く
        bool CanInvite(string appLinkURL, string previewImageURL);
    }
}

４．iOSの記述

（１）info.plistに正しく記述しないとデバッグ実行すらできなくなりますので必ずチェックしましょう。

info.plist

<plist version="1.0">
<dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>myappname</string>
                <string>fb999999999999999</string>
            </array>
        </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <!--Facebook v4.5-->
      <string>fbapi</string>
      <string>fbapi20130214</string>
      <string>fbapi20130410</string>
      <string>fbapi20130702</string>
      <string>fbapi20131010</string>
      <string>fbapi20131219</string>
      <string>fbapi20140410</string>
      <string>fbapi20140116</string>
      <string>fbapi20150313</string>
      <string>fbapi20150629</string>
      <string>fbapi20160328</string>
      <string>fbauth</string>
      <string>fbauth2</string>
      <string>fb-messenger-api20140430</string>
      <!--Facebook v4.6 FBSDKMessengerShareKit 
      <string>fb-messenger-platform-20150128</string>
      <string>fb-messenger-platform-20150218</string>
      <string>fb-messenger-platform-20150305</string>-->
      <!--Facebook v4.6 or lator
      <string>fbapi</string>
      <string>fbauth2</string>-->
      <string>fb-messenger-api</string>
      <string>fbshareextension</string>
  </array>
<dict>

（２）iOSプロジェクト内に以下のクラスを配置します。
FacebookService.cs

using Facebook.ShareKit;
[assembly: Dependency(typeof(FacebookService))]
namespace AppName.iOS.Services
{
    public class FacebookService : IFacebookService
    {
        public void Initialize()
        {
            //Android用
        }
        public bool CanInvite(string appLinkURL, string previewImageURL)
        {
            var fromController = UIApplication.SharedApplication.KeyWindow.RootViewController;
            var content = new AppInviteContent
            {
                AppLinkURL = new NSUrl(appLinkURL),
                PreviewImageURL = new NSUrl(previewImageURL)
            };
            var dg = new MyAppInviteDialogDelegate();
            var dialog = AppInviteDialog.Show(fromController, content, dg);
            return dialog.CanShow;
        }
    }

    public class MyAppInviteDialogDelegate : AppInviteDialogDelegate
    {
        public override void DidComplete(AppInviteDialog appInviteDialog, NSDictionary results)
        {
            //成功した場合
            Console.WriteLine("AppInviteDialogDelegate.DidComplete:" + results?.ToString());
        }

        public override void DidFail(AppInviteDialog appInviteDialog, NSError error)
        {
            //失敗した場合
            Console.WriteLine("AppInviteDialogDelegate.DidFail:" + 
                              error?.LocalizedFailureReason + System.Environment.NewLine + 
                              error?.LocalizedDescription);
        }
    }
}

（３）AppDelegateのFinishedLaunchingに３行追加します。
また、アプリがアクティブになった際のコードを追加します。

AppDelegate.cs

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    //Facebook
    Facebook.CoreKit.Profile.EnableUpdatesOnAccessTokenChange(true);
    Facebook.CoreKit.Settings.AppID = "999999999999999";　//アプリID
    Facebook.CoreKit.Settings.DisplayName = "AppName";

    LoadApplication(new App());
    return base.FinishedLaunching(app, options);
}
/// <summary>
/// アプリが再びアクティブになった場合
/// </summary>
/// <param name="uiApplication"></param>
public override void OnActivated(UIApplication uiApplication)
{
    base.OnActivated(uiApplication);

    //Facebook
    Facebook.CoreKit.AppEvents.ActivateApp();
}

<注意点>
・info.plist を記述しないとiOS実機でデバッグ開始時にクラッシュし、デバッグができません。シミュレータでは実行時にObjective-C Exceptionが発生します。
・error code 9 でDidFailに落ちる場合、Facebookのログインが完了していません。
・iOSではブラウザが立ち上がり、ログイン後に招待が可能です。
・Facebookのページでキャンセルすると　AppDelegate.csのOpenUrlに戻ってきますので、必要があれば処理を実装してください。完了ボタンを押下すると自分のアプリが表示されます。

５．Androidの記述

（１）AndroidManifest.xmlに以下の２つのタグを追加します。
（※INTERNETのパーミッションも必要です。）
特にcom.facebook.FacebookActivityの記述が無いだけで全く動作せず解決するのに大変時間がかかりました。

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<application android:label="AppName" android:icon="@drawable/icon">
    <!-- Facebook Invite -->
    <meta-data android:name="com.facebook.sdk.ApplicationId" 
               android:value="@string/facebook_appId" />
    <activity android:name="com.facebook.FacebookActivity"
              android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
              android:label="@string/app_name" />
</application>

（２）strings.xmlに手順２－２で取得したアプリIDを追加します。
AppName.Android\Resources\values\strings.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <string name="app_name">AppName</string>
  <string name="facebook_appId">999999999999999</string>
</resources>

（３）Androidプロジェクト内に以下のクラスを配置します。
FacebookSDKの初期化はMainActivityで行っても良いですが、アプリを使用する際に必ず使用する機能では無い為、ContentPageを開く際に初期化をした方が良いと考えます。
尚、MainActivityで使用する際はFacebookSdk.SdkInitialize(this);と記載します。

FacebookService.cs

using Xamarin.Forms;
using Xamarin.Facebook;
using Xamarin.Facebook.Share.Widget;
using Xamarin.Facebook.Share.Model;
[assembly: Dependency(typeof(FacebookService))]
namespace AppName.Droid.Services
{
    public class FacebookService : IFacebookService
    {
        public void Initialize()
        {
            //SDKの初期化
            if (!FacebookSdk.IsInitialized)
            {
                FacebookSdk.SdkInitialize(Forms.Context);
            }
        }
        public bool CanInvite(string appLinkURL, string previewImageURL)
        {
            if (AppInviteDialog.CanShow())
            {
                var activity = Forms.Context as Activity;
                var content = new AppInviteContent.Builder()
                                .SetApplinkUrl(appLinkURL)
                                .SetPreviewImageUrl(previewImageURL)
                                .Build() as AppInviteContent;
                AppInviteDialog.Show(activity, content);
                return true;
            }
            return false;
        }
    }
}

Android4ではこのようにアプリ内のActivityにFacebookWebページが表示されます。　Android５ではFacebookアプリが表示されます。

６．使用方法

PCLプロジェクトの中の任意のページに記述します。
引数のappLinkURLには手順２－１で取得したURLを記載します。数字はFacebookでのアプリIDとは異なりますので、ご注意ください。

TestPage.xaml.cs

using AppName.Services;
using Xamarin.Forms;
public class TestPage : ContentPage
{
    public TestPage()
    {
        //Android用のSDKを初期化する
        DependencyService.Get<IFacebookService>().Initialize();
    }
    async void OnInviteClick(object sender, EventArgs e)
    {
        bool canInvite = DependencyService.Get<IFacebookService>().CanInvite(
                                 @"https://fb.me/999999999999999",  //手順2-1で取得したURL
                                 @"http://表示したい画像のURL/");
    }
}

７．参考URL

https://developers.facebook.com/docs/app-invites
https://components.xamarin.com/gettingstarted/facebookios
http://pointdeveloper.com/adding-facebook-app-invite-for-cordova-and-phonegap-apps/

※2018/05/03追記
この記事でご紹介しました Facebook App-invite の API は Facebook により2018/02/06に廃止されました。現在はご利用いただけません。

最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニューは以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html

関連記事

Toast(トースト)を表示する方法 | Xamarin.Forms
RelativeLayoutを使用するとFillAndExpandを設定しても横幅が100%にならない現象の対応方法 | Xamarin.Forms
Facebookで自分のアプリを友達に招待する方法 -App Invite- | Xamarin.Forms
aapt.exeはコード１を伴って終了しました -エラーの対応方法- | Xamarin.Forms
Androidの通知にスタイルを適用する方法 | Xamarin.Forms

RelativeLayoutを使用するとFillAndExpandを設定しても横幅が100%にならない現象の対応方法 | Xamarin.Forms ホーム aapt.exeはコード１を伴って終了しました -エラーの対応方法- | Xamarin.Forms

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ