web-dev-qa-db-ja.com

Facebookのようなボタンとコールバック付きの共有ボタン

Facebookのような＆共有ボタンを配置したWebページがあり、対応するjavascriptコールバック関数も存在します。

問題は、ユーザーが「いいね」したときにのみJavaScriptコールバックが起動し、「共有」ボタンが押されたときに起動しないように見えることです。

ユーザーがリンクを共有するたびにユーザーに賞を与える必要があるようです。一方、「いいね」の場合、ユーザーはリンクを1回しか好きになれません（似ていない/似ているとは考えません）。

[共有]ボタンが廃止されたことを知っています。ただし、facebookには「いいね」ボタン付きの共有ボタンが用意されています。ソース： https://developers.facebook.com/docs/plugins/like-button/

この共有ボタンからこのコールバックメソッドを起動する方法はありますか？

これが私のコードです：

HTMLのBODYタグの先頭のコード：-

<div id="fb-root"></div>

<script>
    window.fbAsyncInit = function() {
    FB.init({
        appId: ' My App ID ',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
    });
    FB.Event.subscribe('Edge.create', function(response) {
        alert('You liked the URL: ' + response);

      });
};
(function(d) {
    var js, id = 'facebook-jssdk';
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

        </script>

いいねボタンと共有ボタンを表示するコード：-

<div class="fb-like" data-href=" My URL " data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
javascriptfacebookcallbackfacebook-likefacebook-javascript-sdk
19
Krish

このようなボタンを使用して共有コールバックを取得することはできません。代わりに、自分の共有ボタンを作成し、クリックで Feed Dialog を呼び出すことができます

FB.ui(
{
  method: 'feed',
  name: 'Facebook Dialogs',
  link: 'https://developers.facebook.com/docs/dialogs/',
  picture: 'http://fbrell.com/f8.jpg',
  caption: 'Reference Documentation',
  description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
  if (response && response.post_id) {
    alert('Post was published.');
  } else {
    alert('Post was not published.');
  }
}
);
29
Sahil Mittal

完全なコードはこちら

$("#bodyarea").on('click', '.share_fb', function(event) {
    event.preventDefault();
    var that = $(this);
    var post = that.parents('article.post-area');

    $.ajaxSetup({ cache: true });
        $.getScript('//connect.facebook.net/en_US/sdk.js', function(){
        FB.init({
          appId: '822306031169238', //replace with your app ID
          version: 'v2.3'
        });
        FB.ui({
            method: 'share',
            title: 'TTitle Test',
            description: 'Test Description Goes here. Tahir Sada ',
            href: 'https://developers.facebook.com/docs/',
          },
          function(response) {
            if (response && !response.error_code) {
              alert('Posting completed.');
            } else {
              alert('Error while posting.');
            }
        });
  });
});

動作するようにアプリケーションIDを変更します

実施例

9
Muhammad Tahir

APPを公開したくない人のためにここで作成した別の方法は次のとおりです。

   jQuery("#div_share").click(function() {

        var url = "http://www.facebook.com/sharer/sharer.php?u=YOUR_URL&title=YOUR_TITLE";

        var openDialog = function(uri, name, options, closeCallback) {
            var win = window.open(uri, name, options);
            var interval = window.setInterval(function() {
                try {
                    if (win == null || win.closed) {
                        window.clearInterval(interval);
                        closeCallback(win);
                    }
                }
                catch (e) {
                }
            }, 1000);
            return win;
        };

        openDialog(url,'Facebook','width=640,height=580', function(){
            jQuery("#div_share").hide();
            jQuery("#formulario").show();
        });
    });

Javascriptダイアログを開いて共有し、ユーザーがいつ閉じたかを確認します。彼らが本当にコンテンツを共有しているという保証はありません...しかし.. :)

3
Tiago Gouvêa

<div class="fb-like" data-href="page_link" data-layout="button_count" data-onshare="page_like_or_unlike_callback" data-onlike="page_like_or_unlike_callback" data-action="like" data-size="large" data-show-faces="true" data-share="false"></div>

data-onlike="function_name"を追加して、javascriptで関数を定義するだけです。あなたの完了、あなたの関数は、人があなたのウェブサイトのようにヒットするとすぐに呼び出されます。共有ボタンについては、まだ開発モードです。すぐに更新します。

2
Sulokit