廃止されたシェアボタンのたぶん正しい代替手段 : Facebook開発者向けドキュメントの日本語訳とTips

廃止されてしまったシェアボタンの代わりに使われている/sharer/sharer.phpのドキュメントが削除されたので、ついにシェアボタンの代替手段まで使えなくなるかもしれないという話を昨日紹介しました。そこで、今回はFeed Dialogを利用してシェアを実装する手段を紹介します。sharer.phpのドキュメントが削除された後はFeed Dialogのドキュメントへとリダイレクトされるようになりましたから、シェアの代替手段としてはこれが推奨されているようです。

現状

よく使われている代替手段は、以下のようなリンクでシェア用ダイアログページを表示し、そこからシェアさせるというものです。

<a href="https://www.facebook.com/sharer/sharer.php?u=http://facebook-docs.oklahome.net/archives/52065629.html" target="_blank"><img src="share_icon_hogehoge.png"></a>

ダイアログを表示したところ

別ウィンドウでダイアログが開きます。

タイムライン上での表示

テストユーザを作成し、そのユーザでシェアしてみた結果です。テストユーザの作成方法はテストユーザのドキュメント日本語訳をご覧ください。テストの為に連投する場合などは、スパム認定されない為にもテストユーザを利用するのが吉です。
シェア内容の表示は、廃止されたシェアボタンと同じです。

ニュースフィード上での表示

テストユーザを２つ作成し、友達関係を作ってニュースフィードへの流れ方を見ることができます。好きな映画の登場人物の性格を元にテストユーザを使い分けるとちょっと楽しいですね。

Feed Dialogで実装

Feed Dialogドキュメントで紹介されているコードをコピペして、appIdの部分とパラメータだけ変更してlinkにシェアしたいページURLを指定します。実際にはsharer.phpと同様、location.hrefを指定するケースが多そうです。

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
    <title>My Feed Dialog Page</title>
</head>
<body>
    <div id='fb-root'></div>
    <script src='http://connect.facebook.net/ja_JP/all.js'></script>
    <p><a onclick='postToFeed(); return false;'>シェア</a></p>
    <p id='msg'></p>

    <script>
      FB.init({appId: 127497087322461, status: true, cookie: true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          link: 'http://facebook-docs.oklahome.net/archives/52065629.html',
          picture: '',
          name: '',
          caption: '',
          description: ''
        };

        function callback(response) {
          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>
</body>
</html>

ダイアログを表示したところ

ダイアログを使う場合でもユーザ自身が操作してサブミットすることになるので、特にパーミッションは必要ありません。ユーザによるアプリの認証など無しにすぐ使えます。
sharer.phpへのリンクの場合と違ってページ遷移しないところがちょっと便利ですね。文言も「シェア」なので分かりやすいです。

タイムライン上での表示

sharer.phpからのシェアと違って、サムネイル画像と説明文の所が薄いグレーで縁取りされていません。自分のコメントとの境界が曖昧になってしまっている感じが若干します。

ニュースフィード上での表示

こちらでも同様に縁取りはありません。ただし、「フェイスブック開発者向けドキュメントの日本語とTipsより」という風にブログのタイトルが表示されています。ブログ管理用のアプリを作成し、そのアプリ名をブログタイトルと同じものにしている為で、ここをクリックするとブログトップ画面へと遷移します。記事タイトルをクリックした場合はsharer.phpと同様、共有した記事へと飛びます。

まとめ

Feed Dialogを使う利点

別ウィンドウでsharer.phpを開くよりも遷移がすっきりしている
アプリ名とリンクが表示されるので、記事本体へのリンクとサイトトップへのリンクを両方出せる
captionパラメータに文字列を指定するとキャプション付きでシェアされ、記事タイトル下にURLの代わりに表示される

sharer.phpを使う利点

先日廃止されたシェアボタンと全く同じようにシェアされ、ニュースフィード上でもタイムライン上でも同じように表示されて違和感が無い
ちゃんとシェアとしてカウントされるので、いいね！ボタン横の数値に反映される

Facebook開発者向けドキュメントの日本語訳とTips