記事一覧

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


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


iPhone7 iOS10
xamarin_facebook_appinvite_01.png
Android5
xamarin_facebook_appinvite_04.png



前提条件
・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



1.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のバージョンにも起因するものだったのでしょうか。



2.Facebook for Developersの登録

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

xamarin_facebook_appinvite_02.png


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

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



3.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);
    }
}



4.iOSの記述

(1)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>

(2)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);
        }
    }
}

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

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に戻ってきますので、必要があれば処理を実装してください。完了ボタンを押下すると自分のアプリが表示されます。



5.Androidの記述

(1)AndroidManifest.xmlに以下の2つのタグを追加します。
(※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>

(2)strings.xmlに手順2-2で取得したアプリ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>

(3)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ページが表示されます。 Android5ではFacebookアプリが表示されます。

xamarin_facebook_appinvite_03.png



6.使用方法

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

TestPage.xaml.cs
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/");
}



7.参考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からご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。