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

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

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2297閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/05/20 16:23

編集2019/05/23 07:41

前提・実現したいこと

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

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

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

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

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

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

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

該当のソースコード

HTML

1<div id="fb-root"></div> 2<script> 3 // facebook callback 4 window.fbAsyncInit = function() { 5 FB.ui({ 6 app_id: app_id, 7 method: 'share', 8 }, 9 // callback 10 function(response){ 11 if (response && !response.error_message) { 12 alert('Posting completed.'); 13 } else { 14 alert('Error while posting.'); 15 } 16 } 17 )}; 18 19// facebook 20(function(d, s, id) { 21var js, fjs = d.getElementsByTagName(s)[0]; 22if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; 23js.src = "https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.0"; 24fjs.parentNode.insertBefore(js, fjs); 25}(document, 'script', 'facebook-jssdk')); 26 27</script> 28<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

HTML

1<script type="text/javascript"> 2window.fbAsyncInit = function() { 3 FB.init({ 4 appId : 'appId', 5 status : false, // check the login status upon init? 6 cookie : true, // set sessions cookies to allow your server to access the session? 7 xfbml : true // parse XFBML tags on this page? 8 }); 9}; 10function postToFeed(url, description) { 11 var obj = { 12 method: 'feed', 13 link: url, 14 picture: '', 15 name: '', 16 caption: '', 17 description: description 18 }; 19 20 function callback(response) { 21 if (response && response.post_id) { 22 // コールバック後の処理 23 alert('コールバック'); 24 } 25 } 26 27 FB.ui(obj, callback); 28} 29</script> 30<script src='http://connect.facebook.net/ja_JP/all.js'></script> 31 32<div id="fb-root"></div> 33<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

Javascript

1FB.ui( 2 { 3 method: 'share', 4 href: 'https://developers.facebook.com/docs/', 5 }, 6 // callback 7 function(response) { 8 if (response && !response.error_message) { 9 alert('Posting completed.'); 10 } else { 11 alert('Error while posting.'); 12 } 13 } 14);

5月23日追記

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

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

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

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

Javascript

1 window.fbAsyncInit = function() { 2 FB.init({ 3 appId : Appid, 4 version : "v2.0" 5 }); 6 7document.getElementById('fb_share').onClick = function() { 8 FB.ui( 9 { 10 method: 'share', 11 href: '', 12 }, 13 // callback 14 function(response) { 15 if (response && !response.error_message) { 16 alert('Posting completed.'); 17 } else { 18 alert('Error while posting.'); 19 } 20 } 21 ) 22 } 23}; 24 25(function(d, s, id) { 26 var js, fjs = d.getElementsByTagName(s)[0]; 27 if (d.getElementById(id)) return; 28 js = d.createElement(s); js.id = id; 29 js.src = "https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3"; 30 fjs.parentNode.insertBefore(js, fjs); 31}(document, 'script', 'facebook-jssdk'));

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2019/05/23 11:26

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問