web-dev-qa-db-ja.com

FB.uiを介したFacebook共有

「フィードへの投稿」ダイアログを表示するための新しいドキュメントに基づいて作成した次のコードを使用しようとしています（ https://developers.facebook.com/docs/javascript/reference/FB.ui ）しかし、次のエラーが発生します "ReferenceError：FB is not defined"

私が使用するコードは、私が思いつくことができる最も単純なものです。

window.fbAsyncInit = function() {     
    FB.init({
      appId      : 'xxxxxxxx',
      status     : true,
      xfbml      : true
    });
  };

  (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 = "http://connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));


    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.'
    });

何か案は？

編集1

ユーザーがリンクをクリックしたときにダイアログを開きたい場合は、jqueryクリックイベントを使用します

$(".userActions a.facebook").click(function() {
   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.'
    });
});

または、パラメータを受け入れる関数内にFB.uiを配置し、この関数を呼び出します。

window.fbAsyncInit = function() {     
    FB.init({
      appId      : 'xxxxxxxx',
      status     : true,
      xfbml      : true
    });

    // Code in here will run once FB has been initialised

    function FB_post_feed(method,name,link,picture,caption,description){
       FB.ui({
            method: method,
            name: name,
            link: link,
            picture: picture,
            caption: caption,
            description: description
        });
    }

};

(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 = "http://connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

そしてHTMLのどこか

$(".userActions a.facebook").click(function() {
    FB_post_feed('feed','Facebook Dialogs','https://developers.facebook.com/docs/dialogs/','http://fbrell.com/f8.jpg','Reference Documentation','Dialogs provide a simple, consistent interface for applications to interface with users.')
}
javascriptfacebook-javascript-sdkfb.ui
6
Andreas Traganidas

さて、あなたがそこで行ったいくつかの概念上の間違いがあります。

最初：

window.fbAsyncInit = function() {     
    FB.init({
        appId      : 'xxxxxxxx',
        status     : true,
        xfbml      : true
    });
};

(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 = "http://connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

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.'
});

これは何をすることになっていますか？ユーザーの操作なしで共有ダイアログを開きますか？ FacebookのAsyncInit関数の直後ではなく、共有ダイアログが表示されることになっているときにFB.uiを呼び出す必要があります。

また、関数の名前が示すように、facebooksdkは非同期で開始されます。これは、関数を配置した場所でFBが定義されないことを意味します。

秒：

window.fbAsyncInit = function() {     
    FB.init({
        appId      : 'xxxxxxxx',
        status     : true,
        xfbml      : true
    });

    // Code in here will run once FB has been initialised

    function FB_post_feed(method,name,link,picture,caption,description){
        FB.ui({
            method: method,
            name: name,
            link: link,
            picture: picture,
            caption: caption,
            description: description
        });
    }
};

この場合、FB_post_feed関数は、fbAsyncInit関数内のローカル関数です。したがって、fbAsyncInitの外部でFB_post_feed関数にアクセスすることはできません。

さらに、FB.initは非同期です。つまり、FB_post_feedが作成されるまでにFBは未定義になります。

HTMLコードの定義方法に応じて、またこの識別子が正しい場合は、コード

$(".userActions a.facebook").click(function() {
    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.'
    });
});

正常に動作するはずです。ただし、アドバイスです。クラスは通常、何かのスタイルを設定するために使用されます。代わりにボタン（または「a」要素）IDを使用するのがベストプラクティスです。

7
João Bruno Abou Hatem de Liz

私は同じ問題を抱えていて、jQueryでFacebookスクリプトを要求し、それを初期化することで解決しました。

function FB_post_feed(method,name,link,picture,caption,description){
   FB.ui({
        method: method,
        name: name,
        link: link,
        picture: picture,
        caption: caption,
        description: description
    });
}


$(document).ready(function()
{
    $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
        FB.init({ appId: 'xxxxxxxx', status: true, cookie: true, xfbml: true });
    });
});
0
Ninita