如何在 iframe facebook 应用程序中使用 FB.Connect.streamPublish?

Posted

技术标签:

【中文标题】如何在 iframe facebook 应用程序中使用 FB.Connect.streamPublish?【英文标题】:How do I use FB.Connect.streamPublish in an iframe facebook app? 【发布时间】:2010-01-11 22:27:55 【问题描述】:

我正在制作一个简单的基于 iframe 的 Facebook 应用。我有以下代码来调整 iframe 的大小:

FB_RequireFeatures(["Connect"], function()
  FB.XdComm.Server.init('/xd_receiver.htm');
  FB.CanvasClient.startTimerToSizeToContent();
  FB.CanvasClient.syncUrl();
);

我想添加一个链接,该链接将显示一个弹出窗口,允许用户将应用定义的图像/链接发布到用户的墙上。为了让事情开始工作,我尝试在点击事件上使用以下代码:

FB.Connect.streamPublish('');

但是,什么也没有发生。我试过添加:

FB.init(<?=API_KEY?>, '/xd_receiver.htm');

FB_RequireFeatures 函数中,在它之前,在它之后......都没有运气。什么都没发生。没有错误被抛出。没有。有什么想法吗?

【问题讨论】:

只是一个提示,如果你是第一次尝试制作一个简单的应用程序,那么制作一个 FBML 应用程序要比 iFrame 容易得多 【参考方案1】:

查看此页面以获取有关使用 Connect 使用 iFrame 应用设置 Stream 发布的完整说明:

http://thetechnicalexperience.blogspot.com/2010/02/how-to-use-fbconnectstreampublish.html

【讨论】:

【参考方案2】:

检查你是否有:(一些来自http://wiki.developers.facebook.com/index.php/Connect/Setting_Up_Your_Site#Referencing_Facebook_Connect_on_Your_Site)

已创建 xd_receiver.htm,并且它位于您域的根目录中 在文档的BODY顶部包含FeatureLoader.js.php 在文档底部添加了问题中的 javascript(例如 FB_RequiresFeatures 等)

我的应用中当前运行良好的代码示例:

<script type="text/javascript">
   window.onload = function() 
        FB_RequireFeatures(["XFBML", "Connect"], function() 
           FB.Facebook.init("...my api key...","xd_receiver.htm");
           FB.CanvasClient.syncUrl();
        );
   ;
</script>

您可以在 FB_RequireFeatures 调用中省略“XFBML”,并将路径也更改为 xd_receiver.htm,它应该可以正常工作。

此外,请仔细检查应用程序的连接 URL(通过 Facebook 中的开发者应用程序设置)指向 xd_receiver.htm 文件的父级。因此,如果您的应用托管在 http://www.mydomain.com 上,那么查看您的代码示例,您的 xd_receiver.htm 将位于 http://www.mydomain.com/xd_receiver.htm,并且您希望将 http://www.mydomain.com 作为连接 URL。

如果这仍然不起作用,请尝试安装Firebug(或类似工具)以查看网络流量。当我让它工作时,Facebook Javascript API 会默默地失败,只有通过检查来回的请求,我才发现 Facebook 不喜欢我的 Connect URL。

为了测试它是否正常工作,我很想使用

FB.Connect.streamPublish();

而不是您发布的行,因为它应该弹出一个对话框,并且清楚地作为一个工作示例给出。我不确定如果你只是传递一个空字符串作为参数会发生什么。

最后,市面上有很多基于 IFrame 的 Facebook 应用程序 - 如果您发现其中一个正在做您喜欢的事情,您可以随时查看他们的 Javascript 以了解他们是如何实现的。或者换句话说,Facebook 充满了示例 IFrame 应用程序代码。

【讨论】:

我根据需要包含了“xd_receiver.htm”。我没有设置连接 URL,因为如果我设置它,每次我进入应用程序时,它都会在新窗口中加载实际 URL,而不是在 facebook 中的 Canvas 中加载。我安装了 Firebug ......我试过做 console.log(FB.Connect.streamPublish());它打印出“真实”。我已经尝试过 ('') 和 (),并且我在 dev wiki 上看到了这两个示例......两者都没有。我查看了 firebug 中的响应,但它对我的 Connect URL 不满意(因为未设置)。但是,如果我设置了一个,那么转到该应用程序会使我离开现场。 如果不设置连接 URL,您将无法使用 FB javascript 客户端。当新窗口弹出时,streamPublish 工作吗?如果是这样,您需要做的就是解决“新窗口”问题,一切都会按要求工作。回顾您在问题中包含的内容,我认为我们还没有足够的能力来弄清楚您为什么要获得一个新窗口。你使用的是什么浏览器?您能否提供更多返回的 HTML,或者您有一个我们可以访问以查看应用运行的 URL 吗? 我的意思是,如果我设置了 Connect URL,访问应用程序会导致 Facebook 加载 Connect URL(与我的应用程序的 URL 相同),而不是在 iframe 中加载数据在 Facebook 画布中。 当你说去应用程序时,我假设你的意思是去apps.facebook.com/myapp?您应该有一个引用您自己的服务器的 Canvas 回调 URL,例如mydomain.com,也可以是您的连接 URL。事实上,我的应用程序对两者使用相同的 URL,这可能很常见。我很好奇你是如何导航到你的应用程序的——你是要去apps.facebook.com/yourapp,还是去应用程序本身(即mydomain.com)?如果您直接从自己的服务器请求应用程序,我可以理解它不会将您重定向到 Facebook 框架 URL。【参考方案3】:

您必须设置连接 url 才能使用 javascript 库。尝试将您的书签 URL 设置为 http://apps.facebook.com/yourapp 看看是否有帮助。

【讨论】:

【参考方案4】:

@Cyphus

是的,当我说“访问应用程序”时,我的意思是访问 facebook 上的应用程序页面 (apps.facebook.com/myapp)。目前,我的回调 URL 仅设置为画布。一旦我尝试将回调 URL 用于画布和连接 URL,每当我尝试访问应用程序时,我都会被重定向到实际的回调 URL 本身,而不是在 facebook 中加载 iframe。我不直接从我的服务器请求它,因为这在某种程度上违背了拥有 facebook 应用程序的目的。

【讨论】:

以上是关于如何在 iframe facebook 应用程序中使用 FB.Connect.streamPublish?的主要内容,如果未能解决你的问题,请参考以下文章

Facebook 如何在画布页面上为 iFrame 设置跨域 cookie?

Facebook - 如何使用 iframe 应用直接进入请求权限对话框?

如何制作一个只是链接而不是 iFrame 的 Facebook“Like”按钮?

getElemenstByTag 在 facebook 页面插件 iframe 中返回 null

ajax 调用在我的 facebook iframe 中返回 null

如何从 iframe 重新加载最顶部的窗口?