質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

Facebookシェアボタンでコールバックを取得したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 985

mas_matix

score 14

前提・実現したいこと

お世話になっております。

Facebookのシェアボタンを押したら、POST送信を利用して
コールバックを取得したいと考えています。

Twitterのツイートボタンはうまくいったのですが、Facebookのコールバックは
検索してもうまく挙動するソースや考え方のヒットもなく、苦戦しております。

とりあえずコールバック時にアラートが鳴るかどうか試しているのですが、
ページ読み込み時にFacebookのシェアウィンドウが表示され、それを閉じた後に
「Error while posting.」が出てきてしまいます。

なんとか、
「クリックしてシェアウィンドウが出た時、もしくはシェアした際にアラートが出る」
ことはできないのでしょうか?

発生している問題・エラーメッセージ

ページ読み込み時にFacebookシェアウィンドウが表示され、そのままアラートも表示されてしまう

該当のソースコード

<div id="fb-root"></div>
<script>
  // facebook callback
    window.fbAsyncInit = function() {
    FB.ui({
        app_id: app_id,
        method: 'share',
      },
      // callback
      function(response){
        if (response && !response.error_message) {
          alert('Posting completed.');
        } else {
          alert('Error while posting.');
        }
      }
  )};

// facebook
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>
<div class="fb-share-button" data-layout="button_count"></div>

試したこと

Facebookページの公式開発者用ページ内に、シェアウィンドウが開かれた時に
トリガーとなるコマンドがあるかどうか探してみたが見つからなかった。

利用している環境

Windows 10
Opera 60.0.3255.95


2019年5月21日追記
以下のサイトのソースを参考に、ローカルで動かしましたが
appIDで登録したサイトの関係上、同サイト内のアドレスでないとシェアされたかどうかの
挙動の確認ができないようです。

下記ソースで「コールバック」アラートが出る方はいらっしゃいませんか?

https://liginc.co.jp/web/service/facebook/35972

<script type="text/javascript">
window.fbAsyncInit = function() {
    FB.init({
        appId      : 'appId',
        status     : false, // check the login status upon init?
        cookie     : true, // set sessions cookies to allow your server to access the session?
        xfbml      : true  // parse XFBML tags on this page?
    });
};
function postToFeed(url, description) {
    var obj = {
        method: 'feed',
        link: url,
        picture: '',
        name: '',
        caption: '',
        description: description
    };

    function callback(response) {
        if (response && response.post_id) {
            // コールバック後の処理
            alert('コールバック');
        }
    }

    FB.ui(obj, callback);
}
</script>
<script src='http://connect.facebook.net/ja_JP/all.js'></script>

<div id="fb-root"></div>
<div class="fb-share-button" data-href="https://www.your-domain.com/your-page.html" data-layout="button_count"></div>

5月22日追記

開発者用ページに、以下のソースがありました。
が、ngrokを利用してアドレスを一致させ、<script>内に入れてもアラートすら鳴りません...。
何かfunctionでトリガーが必要なのでしょうか?

https://developers.facebook.com/docs/javascript/reference/FB.ui

FB.ui(
  {
    method: 'share',
    href: 'https://developers.facebook.com/docs/',
  },
  // callback
  function(response) {
    if (response && !response.error_message) {
      alert('Posting completed.');
    } else {
      alert('Error while posting.');
    }
  }
);

5月23日追記

開発者用ページを見たところ、始めにFB.initを入れる必要があり、
またwindow.fbAsyncInit = function()はページを読み込んだ際のトリガーであることも分かりました。
しかし、公式ページを辿ってみても『シェアボタンが押された時にコールバック』という機能はなく、
様々なページを見てみると自分でJavascript上にトリガーを新たに作って対応している方が多いようです。

しかし、その場合はFacebookのシェア数が表示されなくなってしまいます。
欲張りかもしれませんが、なんとかシェア数をさせつつコールバックを行いたいです。

公式シェアボタン内は最終的にはiframeで出力されるらしく、
公式側で情報を公開していなければかなり難しいとは考えているのですが...。

参考:https://developers.facebook.com/docs/javascript?locale=ja_JP

  window.fbAsyncInit = function() {
    FB.init({
      appId      : Appid,
      version    : "v2.0"
    });

document.getElementById('fb_share').onClick = function() {
  FB.ui(
    {
      method: 'share',
      href: '',
    },
    // callback
    function(response) {
      if (response && !response.error_message) {
        alert('Posting completed.');
      } else {
        alert('Error while posting.');
      }
    }
  )
 }
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

自己解決しました。
公式プラグインは使わずに、Javascriptを利用して実現させました。
ありがとうございました。

参考:
https://qiita.com/39_isao/items/4c7009e292f2e0b6ff86

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る