Question

可能重复：
use jquery and ajax to add facebook meta tag

在我的网站上，我有一组布置在网格上的项目。单击项目可通过AJAX加载其详细信息。在详细视图中，我有一个产品标题，图片，描述。

在这个视图中，我想要一个Like按钮，当然应该在通过AJAX加载的内容上触发Like。 （N.B。：此内容也可以在没有AJAX的情况下访问）

如果不需要指定要共享的标题和图片，这是微不足道的：只需在详细视图中包含一个fb：like标记，其中包含href属性中的相应值。

但是我还需要使用OpenGraph标签指定的图片和标题。

这些标签需要具有不同的值，具体取决于所单击的项目。

这是我尝试的解决方案：

与文档一样，JS SDK在主页中异步加载，FB.init也在那里调用（ with parse：false ）
head 包含适用于主页的标题， url 和图像值的OG标记
当通过AJAX加载产品的详细信息时，我在响应中包含了一些JS（请参阅下面的代码片段），它更新了og标记，为它们提供了涉及产品的值
- 最后，我调用FB.XFBML.parse（）

我获得的结果是OG标签完全更新，之前 FB.XFBML.parse（）被调用。但是按下Like按钮会为主页创建一个'like'，好像FB.init调用保持OG标记的先前值并忽略我通过JS设置的当前值

我在这里和谷歌一般都看了很多问题，但令人惊讶的是我找不到与此类似的案例。

这是我对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
  };

这是我在AJAX响应中放入的JS，就在插入HTML之后

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

非常感谢帮助，因为我几天都在努力解决这个问题。非常感谢！

通过AJAX加载使用Open Graph标签的facebook Like按钮

0 个答案: