0

画像ギャラリーに PrettyPhoto ライトボックスを使用しています。画像がポップアップすると、その下に Twitter と Facebook のボタンが表示されます。これは PrettyPhoto プラグインに組み込まれており、正常に動作します。

問題は、Facebook ボタンが iframe の種類である (ユーザーがコメントを入力できない) ことです。これを HTML5 ボタンに置​​き換えたいと思います (クリックするとコメント ボックスが開きます)。

これを置き換えたい（iframeボタンの標準FBコード）：

<div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href='+pp_real_links[set_position]+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:23px;" allowTransparency="true"></iframe></div>

...これで（HTML5のようなボタンの標準fbコード）：

<div class="fb-like" data-href="instagram.com/the-pic" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">test text</div>

交換してもライトボックスに表示されません。ただし、サイトの他の場所でも機能します。

はい、prettyPhoto の css コードを に置き換えまし.facebookた.fb-like。また、div にテキストを配置して、適切な場所に表示されていることを確認します。

問題の根本は、ソーシャル リンク コードが JS で定義されていることにあると思います。PrettyPhoto 設定には、ライトボックスと共有ボタンの html を格納する「マークアップ」という属性があります。したがって、おそらく FB JS コードと接続していません。

解決策は何ですか？

4

1 に答える 1

0

投稿したコード（古いiframeのもの）は、iframeをロードするだけなので、 facebookjavascriptsdkを使用する必要はありません。

一方、使用するhtml5コードは、レンダリングするためにsdkを必要とします。divはfb-like、sdkが新しいiframeを挿入する単なるコンテナーであることがわかります。

あなたのコードから、あなたがjs sdkをロードしているかどうかはわかりませんが、そうでない場合は、ドキュメントに記載されているようにロード/初期化してください。必ずxfbml属性を含めてください。

FB.init({
    appId      : 'YOUR_APP_ID', // App ID
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
});

すでにjssdkを使用している場合は、sdkの読み込みと初期化が完了した後に「いいね」ボタンのコードが動的に追加されない限り、機能するはずです。
その場合は、FB.XFBML.parseメソッドを使用してください。

FB.XFBML.parse();

// or you can pass the container element:
FB.XFBML.parse(document.getElementById(ELEMENT_ID));
于 2012-06-04T20:21:59.400 に答える