5

私のウェブサイト用にカスタムの Facebook 共有ダイアログ ボックスを作成する方法を説明する、ここやインターウェブの周りのいくつかの投稿を見てきました。

しかし、私の平均的な状況とはいくつかの違いがあることがわかりました。

1- ユーザーがボタン (共有ボタン) をクリックしたときにページ内のカスタム領域を開閉したい

2- ページのコンテンツではなく、ライトボックスのコンテンツを共有したい。たとえば、製品のリストがあり、各製品がライトボックスで開きます。現在ライトボックスで開いているこの製品に関する情報を共有したい

Javascript SDK について誰かが話しているのを見ましたが、インストール ガイドでは APP_ID を設定するように指示されていますが、私の Web サイト用にアプリを作成する必要はありません。この SDK を使用するには、SDK を作成する必要がありますか?

こんなパターンも発見

http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg

これをコピーしてアドレスバーに貼り付けると機能します。しかし、ユーザーは新しいページにリダイレクトされます。それは良くありません。

上記のパターンでこれを試しましたが、機能しませんでした

<a href="#" 
          onclick="
            window.open(
                'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
              'facebook-share-dialog', 
              'width=626,height=436');
            return false;">
          Share on Facebook
        </a>

渡そうとしているパラメーターを受け入れません。

この問題を解決する方法を知っている人はいますか？メタタグの「コンテンツ」を変更することでしょうか? あなたのソリューションは何ですか？

@編集

私が使用したソリューションで答えただけです

@EDIT 2

v2.2で更新

4

3 に答える 3

6

これは、私のウェブサイトの問題を解決するために私がしたことです：

最初に、Facebook が提供するツールを追加しました。

<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR APP ID GOES HERE',                        // App ID from the app dashboard      
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });
    // channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
    // Additional initialization code such as adding Event Listeners goes here
  };

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

</script>

次に、共有者を開く関数 shareOnFacebook と、この関数を呼び出すボタンを作成しました。

var globalFacebookShareObject = {} //will be set when I click on a product, on a picture, on a comment or post, or whatever I want to share on Facebook or when I load the page

function shareOnFacebook(){
    FB.ui({
        method: 'feed',
        name: globalFacebookShareObject.name,
        link: globalFacebookShareObject.link,
        caption: 'R$ '+globalFacebookShareObject.caption,
        picture: globalFacebookShareObject.picture,
        description: globalFacebookShareObject.description
    }, function(response) {
        if(response && response.post_id){}
        else{}
    });
}

<button onclick='shareOnFacebook()'>Share it!</button>

@edit at 10/01/2015 まだ v2.2 に取り組んでいます

共有ダイアログの作成方法については、Feed メソッドを参照してください (より柔軟と思われる方法を使用しています)feed。

クイックスタートへ Javascript SDK をページにインポートする方法を理解するには

于 2013-09-20T20:40:21.127 に答える