私のウェブサイトには、グリッド上に配置された一連のアイテムがあります。アイテムをクリックすると、AJAXを介してその詳細がロードされます。詳細ビューには、製品のタイトル、写真、説明があります。
このビューでは、「いいね」ボタンが必要です。もちろん、AJAXを介してロードされたコンテンツで「いいね」をトリガーする必要があります。（注：このコンテンツはAJAXなしでもアクセスできます）
共有するタイトルと画像を指定する必要がない場合、これは簡単です。詳細ビューに、href属性に適切な値を持つfb：likeタグを含めるだけです。
ただし、OpenGraphタグを使用して指定される画像とタイトルも必要です。
これらのタグは、クリックされたアイテムに応じて異なる値を持つ必要があります。
これは私が試した解決策です：
- ドキュメントと同様に、JS SDKはホームページに非同期で読み込まれ、そこでFB.initも呼び出されます（parse：falseを使用）
- ヘッドには、ホームページに適切なタイトル、URL、および画像値を持つOGタグが含まれています
- 商品の詳細がAJAXを介して読み込まれる場合、商品を参照する値を与えるためにogタグを更新するJS（以下のコードスニペットを参照）を応答に含めます。
- 最後に、FB.XFBML.parse（）を呼び出します
私が得た結果は、 FB.XFBML.parse（）が呼び出される前に、のOGタグが完全に更新されることです。ただし、「いいね」ボタンを押すと、FB.init呼び出しがOGタグの以前の値を保持し、JSを介して設定した現在の値を無視するかのように、ホームページに「いいね」が作成されます。
私はこことGoogleの両方で多くの質問を一般的に調べましたが、驚くべきことに、これに似たケースを見つけることができませんでした。
これがFB.initへの私の呼び出しです
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
channelUrl : '*correct value hidden for privacy*', // Channel File for x-domain communication
status : true,
cookie : true,
xfbml : false // I want to parse them once the OG tags are properly set
});
// No additional code after init in my case
};
これは、挿入するHTMLの直後にAJAX応答に挿入したJSです。
<script type="text/javascript">
og_tags( <?php echo CJavaScript::encode( $this->shareData() ); ?> );
$(document).ready( function() {
FB.XFBML.parse();
});
</script>
関数の定義は次のとおりです
function og_tags( params ) {
var head = $('head');
for ( var p in params )
place_og_tag( { 'name' : p, 'value' : params[p] }, head );
}
function place_og_tag( opts, head ) {
var name = "og:" + opts.name;
var $tag = $( 'meta[property="' + name + '"]', head );
if ( $tag.length == 0 )
head.append( $('<meta property="' + name + '" content="' + opts.value + '" />') );
else
$tag.attr('content', opts.value );
}
私はこれに何日も苦労してきたので、助けてくれて本当にありがたいです。どうもありがとう！