0

可能重复：
使用 jquery 和 ajax 添加 facebook 元标记

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

在这个视图中，我想要一个 Like 按钮，它当然应该在通过 AJAX 加载的内容上触发 Like。（注意：此内容也可以不使用 AJAX 访问）

如果不需要指定要共享的标题和图片，这很简单：只需在详细视图中包含一个 fb:like 标记，并在 href 属性中设置适当的值。

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

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

这是我尝试过的解决方案：

  • 与文档中一样，JS SDK 在主页中异步加载，并且 FB.init 也在那里调用（使用 parse : false）
  • head包含适合主页的带有title、url和image值的 OG 标签
  • 当通过 AJAX 加载产品的详细信息时，我在响应中包含一些 JS（请参见下面的代码片段），它会更新 og 标签以向它们提供引用产品的值
    • 最后，我调用 FB.XFBML.parse()

我得到的结果是，在调用 FB.XFBML.parse()之前，OG 标签已完美更新。但是按下 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 );
}

非常感谢您的帮助，因为我已经为此苦苦挣扎了好几天。非常感谢！

4

0 回答 0