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

【问题标题】：how to make own custom widgets like facebook social plugins?如何制作自己的自定义小部件，如 facebook 社交插件？
【发布时间】：2012-01-05 01:09:45
【问题描述】：

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

基本上是一些javascript、css和html代码，但是怎么做呢？有什么例子，教程吗？

【问题讨论】：

您的意思是如何通过 javascript 提供 html 服务？与本地相同。
只需像平常一样编写小部件（使用 HTML、CSS 和 JS），然后使用 iframe 将其嵌入到其他页面或使用 JS 通过 ajax 获取数据并附加 @ 987654323@ 和 script 元素您的小部件需要到使用小部件的页面。

标签： javascript css facebook html

【解决方案1】：

我强烈推荐来自 Disqus 的人的Third Party Javascript (Manning)，以获得对所有内容的全面了解。虽然它不会为您的 SDK/widget 制作提供灵丹妙药的解决方案，但它会帮助您在进行过程中防弹。这是一个很好的参考，如果简短/简洁，并且代码绝对不适合 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 上，开发由于 11 年前的错误而停止？https://bugzilla.mozilla.org/show_bug.cgi?id=631218）所以对于可预见的未来，iframe 定制将需要 JavaScript。 :)

【讨论】：

我还可以注意到，在未来，我怀疑我们都将使用 HTML5 Web 组件来完成这类事情，尽管目前本地实现还很遥远。我最近一直在羡慕 dart 的 web_ui，不过……
你发的链接对我很有帮助，你还有吗？
@marflar 我可以跟进说“easyXDM”使得在 IE6-7 中使用 Flash 可以进行 postMessage 样式的 iframe 到父级通信，但如果你能提供帮助，请尝试将你的小部件设计为优雅地回退到静态 iframe 内容，而不是因为 easyXDM 太昂贵（以位为单位）无法加载。对于真正的隔离 + 速度，请考虑在父级中使用无 src 的 iframe，该 iframe 加载和管理跨嵌入在页面中的“视图”式 iframe（如 G+）的所有小部件操作，如果可能，请尝试使用现代 JS 框架，如 Angular.js .

【解决方案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/

【讨论】：

【解决方案3】：

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

【讨论】：

嗨，DMCS，我不是说如何使用 facebook 小部件，而是像 facebook 那样创建我自己的自定义小部件 :)
是的，这些链接将带您到达那里。编码愉快！
这将创建一个 facebook 小部件，我想创建自己的小部件而不是 facebook 小部件。
好的，抱歉，我本来没看懂你的问题。你能澄清一下你想要做什么吗？
我想制作自己的自定义小部件，以便其他开发人员可以在他们的网站上使用我网站上的内容。