隐藏 Div 内的社交媒体按钮答案

【问题标题】：Social Media buttons inside hidden Div隐藏 Div 内的社交媒体按钮
【发布时间】：2012-03-28 14:05:45
【问题描述】：

有没有人能够让 Facebook Like、Twitter Follow 和 Google +1 按钮在 chrome 扩展中工作。

我可以显示按钮和一些功能，但似乎缺少部分。例如，Like 按钮不记得您是否喜欢它，它每次显示计数为 1。 Twitter 未显示正确的关注者数量，并且在“关注”文本后缺少@username。

我知道扩展是沙盒的。有没有人找到解决这个问题的方法？例子？代码？

更新

问题在于社交媒体按钮位于隐藏的 div 中（显示：无）。 div 使用jQuery 的slideToggle 来显示和隐藏。默认情况下，div 不显示，社交媒体按钮在上面。当我将社交媒体按钮放在未隐藏的 div 中时，它们可以正常工作。有什么解决办法吗？

问题在于社交媒体按钮位于隐藏的 div 内（可以通过选项卡访问的不同显示）。有什么方法可以让它们在不更新触发事件的 z-index 的情况下工作？

【问题讨论】：

标签： javascript jquery facebook twitter social-networking

【解决方案1】：

它们确实在扩展页面中工作。您必须明确指定一个公共 URL，并且必须修改 facebook/twitter 以明确包含该协议。 //platform.twitter.com 到 https://platform.twitter.com

popup.html

<html>
<body>
  <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow @twitter</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1&appId=113869198637480";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <div class="fb-like" data-href="http://example.com" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false"></div>

  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  <g:plusone href='http://example.com'></g:plusone>
</body>
</html>

manifest.json

{
  "name": "test",
  "version": "1",
  "browser_action": {
    "default_popup": "popup.html"
  }
}

【讨论】：

是的，在发布这个问题之前我已经这样做了。这样做会使按钮以上述方式工作。但是我希望它们能够完全发挥作用。
例如，推特按钮说“关注”但不是“关注@jjNford”
我认为问题在于 Twitter 和 Facebook 正在尝试联系该按钮，但它没有可以访问的 URL，因为它是沙盒的。
我的答案中的代码为我显示Follow @twitter。每个按钮也会按预期记住状态。
hmmmm...这很奇怪...我不知道为什么我的那个不工作。您是否在清单中设置了任何权限？

【解决方案2】：

问题解决了。我将标记添加到标记页面，并在 slideToggle 开始后立即对 API 脚本进行了匿名函数调用。完美运行。

【讨论】：

我遇到了同样的问题。 Facebook 按钮位于设置为 display:none; 的 div 上。（直到悬停动作）。无法让匿名功能调用正常工作。你能分享你使用的代码吗？
@Mark1270287 我最终取消了社交媒体按钮，所以我没有代码了 - 抱歉。