iOSアプリにFacebookのシェアを組み込む


アプリにFacebookのシェア機能を導入した時の導入メモです。
大雑把に以下の工程で、簡単にシェア機能を導入できるようです。

  1. FacebookDeveloperサイトでユーザ登録
  2. アプリをDeceloperサイトに設定
  3. CocoaPodsでライブラリを導入
  4. info.plistにライブラリの設定を記載
  5. 画面上にボタンを設置
  6. ボタンに対して、シェアしたい内容を設定

※ 下記サイトに記載されている内容の焼き増しです。
iOS用Facebook SDKスタートガイド
iOSでのシェア

FacebookでDeveloper登録

Developerサイトで作成するアプリを設定

この後の工程で、アプリIDとアプリ名を使用するので、取得しておく

FacebookSDKをcocoaPodsでインストール

インストールするライブラリを指定

pod 'FBSDKShareKit'

インストール

pod install

info.plistにFacebookDeveloperで設定した内容を設定

  • {your-app-id}にアプリID
  • {your-app-name}にアプリ名

を設定

<plist version="1.0">
  <dict>
    <key>FacebookAppID</key>
    <string>{your-app-id}</string>
    <key>FacebookDisplayName</key>
    <string>{your-app-name}</string>
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fb{your-app-id}</string>
      </array>
      </dict>
    </array>
  </dict>
</plist>

シェアボタンを画面に貼り付け

シェア機能をユーザに提供する方法は、シェアボタン、送信ボタン、シェアダイアログ、メッセージダイアログといろいろなシェア方法を使用できます。
ここでは、シェアボタンを使用してます。

FBSDKShareButton *shareButton = [FBSDKShareButton new];
shareButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:shareButton];

// 適当にautolayoutを指定しておく
[shareButton.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor constant:8.0f].active = YES;
[shareButton.leadingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.leadingAnchor constant:8.0f].active = YES;
[shareButton.trailingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.trailingAnchor constant:-8.0f].active = YES;
[shareButton.heightAnchor constraintEqualToConstant:44.0f].active = YES;

/** この後に、ここへシェアしたい内容をコードで設定 */

シェアしたい内容をシェアボタンに設定

リンク、写真、動画、マルチメディア(写真と動画)をシェアできます。
ここでは、リンクと写真のシェアについて、記載します。

リンクをシェア

リンクとコメントを投稿できる。
投稿画面は、ライブラリを組み込んだアプリ内でモーダル表示される。

FBSDKShareLinkContent *content = [[FBSDKShareLinkContent alloc] init];
content.contentURL = [NSURL URLWithString:@"https://google.com"];
shareButton.shareContent = content;

写真をシェア

写真とコメントをシェアできる。
シェア画面は、Facebookアプリがインストールされている時は、Facebookアプリ内で表示される。
インストールされていない時は、自動的にシェアボタンが押せなくなる。


UIImage *image = [UIImage imageNamed:@"sample"];

FBSDKSharePhoto *photo = [FBSDKSharePhoto new];
photo.image = image;
photo.userGenerated = YES;

FBSDKSharePhotoContent *content = [FBSDKSharePhotoContent new];
content.photos = @[photo];

shareButton.shareContent = content;

その他

ハッシュタグを追加

シェアダイアログを使用している時は、ハッシュタグを設定できます。
なぜか、シェアボタンでは設定できない仕様なので、注意が必要です。

content.hashtag = [FBSDKHashtag hashtagWithString:@"#HogeHoge"];

以上な感じで、割と手軽にシェア機能を組み込むことができました。
後々、Twitterについても記載していきたいと思います。