如何制作自己的自定义小部件，如Facebook社交插件？

Question

如何像facebook一样创建自己的小部件？ https://developers.facebook.com/docs/guides/web/#plugins

基本上它有点javascript，css和html代码，但怎么做呢？ 任何示例，教程？

Answer 1

我强烈推荐来自Disqus的人员Third Party Javascript (Manning)，以便对所有内容进行全面了解。虽然它不会为您的SDK /小部件制作提供灵丹妙药的解决方案，但它可以帮助您随时防弹。这是一个很好的参考，如果简短/简洁，代码肯定不适合JavaScript初学者。

至于Facebook如何做到这一点，虽然它没有完全描述他们的iframe / widget方法，但它显示了他们如何在非标准网页中进行防弹嵌入：http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/

要获得额外奖励积分，请将其与http://www.phpied.com/non-onload-blocking-async-js/结合使用，如果内存对我有好处，它应该除了iOS 6之外的所有加载微调器。

要获得更高级的iframe乐趣，请参阅https://github.com/benvinegar/seamless-talk以及http://benv.ca/处的任何其他幻灯片/帖子。 （我想我有一天会见Ben，因为我最近一直在借用他的东西，而且他是加拿大的同伴。）

请注意，作为本机浏览器概念的无缝iframe仅限于webkit并且存在错误：https://bugs.webkit.org/show_bug.cgi?id=99289（在Firefox上，dev。由于一个11岁的bug而停止了吗？https://bugzilla.mozilla.org/show_bug.cgi?id=631218 ）因此，在可预见的未来，iframe定制将需要JavaScript。 ：）

Answer 2

在这里查看有关如何使用JSONP构建自己的小部件的教程：

http://alexmarandon.com/articles/web_widget_jquery/

以及如何使其安全：

http://wordpress.tv/2011/08/31/mike-adams-developing-secure-widgets-secure-iframe-communication-in-a-pre-postmessage-world/

Answer 3

您可以使用Facebook Javascript SDK执行此操作（请参阅https://developers.facebook.com/docs/reference/javascript/）。您需要了解可以从Javascript SDK查询的Graph API（请参阅https://developers.facebook.com/docs/reference/api/）。在整个Facebook的文档中，有大量的示例代码。玩得开心！