代码之家 › 专栏 › 技术社区 › mbrevoort

在facebook connect站点中通过ajax加载facebook fb:profile pic

fbml jquery facebook

mbrevoort · 技术社区 · 15 年前

在页面加载之后,我发出一个Ajax请求,将包含代表Facebook用户配置文件图片的标签的HTML块拉下来。我将结果附加到dom中的一个点上,但不加载徽标,相反,我看到的只是默认的轮廓。

以下是我如何用jquery加载HTML块

$.ajax({
  url: "/facebookprofiles"
  success: function(result) {
    $('#profiles').append(result);
  }
});

我要附加的HTML是这样的差异列表:

<div class="status Accepted">
  <fb:profile-pic class="image" facebook-logo="true" linked="true" size="square" uid="1796055648"></fb:profile-pic>
  <p>
    <strong>Corona Kingsly</strong>My Status Update<br/>
    <span style="font-size: 0.8em">52 minutes ago</span>
  </p>           
</div>

有什么想法吗?我假设一旦加载了DOM,就不会处理FB标记。有什么办法可以做到吗?我在Firebug控制台中没有看到任何异常或错误。

谢谢

3 回复 | 直到 13 年前

DSchultz 13 年前

第一次尝试

不确定这是否有很大帮助,但这里有一篇关于Ajax+FBML的文章: http://wiki.developers.facebook.com/index.php/FBJS#Creating_FBML_Elements

特别是,也许您可以使用setInnerfbml()方法

跟进

所以我认为init函数解析fbml。所以显而易见的问题是,如果在init之后插入fbml,如何让facebook的javascript库重新解析fbml(或者只是解析新的fbml)。

看起来这个线程可能有帮助: http://forum.developers.facebook.com/viewtopic.php?id=22245

下面是相关的代码,尽管在论坛上有更多的上下文:

if ( FB.XFBML.Host.parseDomTree )
  setTimeout( FB.XFBML.Host.parseDomTree, 0 );

Bill the Lizard Hacknightly 13 年前

fb.xfbml.host.ParseDomTree不适合我。也许它在新的API中发生了变化。工作内容是:

FB.XFBML.parse(document.getElementById('foo'))

或

FB.XFBML.parse()

如果你想分析整个页面。

Axe 13 年前

我正在将Microsoft Web助手与MVC3一起使用(其中包括Facebook助手)

Razor语法

 @Facebook.GetInitializationScripts()

输出端

<script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({ appId: '115631105198333', status: true, cookie: true, xfbml: true });
        };
        (function () {
            var e = document.createElement('script'); e.async = true;
            e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
        } ());

        function loginRedirect(url) { window.location = url; }
    </script>

所以我需要打电话

window.fbAsyncInit();

重新解析Facebook内容。