如何使用 FBML 在 Facebook 应用页面上显示 UserVoice 反馈选项卡？答案

【问题标题】：How do I get the UserVoice Feedback Tab to display on a Facebook app page using FBML?如何使用 FBML 在 Facebook 应用页面上显示 UserVoice 反馈选项卡？
【发布时间】：2009-10-31 19:30:23
【问题描述】：

我有一个使用 FBML 的 Facebook 应用程序，我想在我的应用程序页面上包含 UserVoice 反馈选项卡小部件。我将 JavaScript 复制并粘贴到我的 FBML 页面中，但是当 Facebook 呈现页面时，该 JavaScript 被删除，因此该选项卡不会显示。

有没有人有使用Facebook's modified version of JavaScript 并让 UserVoice 选项卡在 FBML 页面上工作的经验？

这是 JavaScript 代码：

<script>
<!--
  var uservoiceJsHost = ("https:" == document.location.protocol) ? "https://uservoice.com" : "http://cdn.uservoice.com";
  document.write(unescape("%3Cscript src='" + uservoiceJsHost + "/javascripts/widgets/tab.js' type='text/javascript'%3E%3C/script%3E"))
//-->
</script>
<script>
<!--
UserVoice.Tab.show({ 
  /* required */
  key: 'callme',
  host: 'callme.uservoice.com', 
  forum: '31286', 
  /* optional */
  alignment: 'left',
  background_color:'#f00', 
  text_color: 'white',
  hover_color: '#06C',
  lang: 'en'
})
//-->
</script>

【问题讨论】：

标签： facebook fbml fbjs uservoice

【解决方案1】：

忘记 JavaScript。只需包含以下 HTML：

<style type="text/css">
#uservoice-dialog
{
    display: block;
    margin: -2em auto 0 auto;
    position: absolute;
    text-align: left;
    z-index: 100003;
}
#uservoice-overlay
{
    background-color: #000;
    filter: alpha(opacity=70);
    height: 100%;
    left: 0;
    opacity: .7;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100002;
}
#uservoice-dialog[id], #uservoice-overlay[id]
{
    position: fixed;
}
#uservoice-overlay p
{
    color: #ddd;
    font: bold 14px arial, sans-serif;
    letter-spacing: -1px;
    margin: 0;
    padding: 5px;
}
#uservoice-dialog #uservoice-dialog-close
{
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    color: #06c;
    cursor: pointer;
    height: 48px;
    position: absolute;
    right: -12px;
    top: -11px;
    width: 48px;
}
* html.dialog-open body
{
    height: 100%;
}
* html.dialog-open, * html.dialog-open body
{
    overflow: hidden;
}
html.dialog-open object, html.dialog-open embed, * html.dialog-open select
{
    visibility: hidden;
}
* html #uservoice-overlay
{
    width: 110%;
}
* html #uservoice-dialog #uservoice-dialog-close
{
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://uservoice.com/images/icons/close.png');
}
a#uservoice-dialog-close
{
    background-image: url(http://cdn.uservoice.com/images/icons/close.png);
}
</style>
<a href="YOUR_USERVOICE_PAGE_URL_HERE" id="uservoice-feedback-tab">Feedback</a>

这应该会在您的页面上放置一个 UserVoice 选项卡。您可以随意自定义 CSS。

请注意，这会跳过 UserVoice 模态对话框（无论如何在 Facebook 上都不能很好地工作）并将用户直接带到您的 UserVoice 主页。

【讨论】：

现在更详细地看一下，你有一堆 css 类，但是你打算如何/在哪里使用它们？
UserVoice JavaScript 所做的唯一一件事就是将这些类和几个元素添加到您的页面中。 CSS 实际上超出了您的需要；如果你愿意，你可以选择“uservoice-feedback-tab”样式。

【解决方案2】：

您还可以注册新的 UserVoice Facebook 标签，让您可以将 UserVoice 直接嵌入您的 Facebook 页面。这可能是最好的解决方案！（完全披露，我是 UserVoice 的联合创始人）

www.uservoice.com/facebook

【讨论】：

谢谢斯科特！我会检查一下。欢迎使用 StackOverflow！
这会进入 Facebook 页面，但 Facebook 应用程序的 UV 呢？