Question

上周我将Facebook和Twitter分享按钮添加到我的rails应用程序中。我认为它们工作正常，但似乎它们没有可靠加载，需要刷新才能让它们显示出来。我认为这是一个涡轮问题，因为这些事情经常是这样我安装了jquery-turbolinks＆＃39; gem。这不是一个涡轮机问题。

环顾四周之后，我找到了this one这样的答案，虽然在我的推特功能结束时添加了twttr.widgets.load();解决了这个问题，但我没有把FB.XFBML.parse();带到使Facebook共享按钮无需刷新即可加载。在this Facebook开发页面上，它不会将共享按钮列为可以使用该代码修复的内容之一。

我的代码部分如下：

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk')); FB.XFBML.parse();</script>

<div class="share-buttons">
   <div id="fb-root"></div>
      <div class="fb-share-button" data-href="#{request.original_url}" data-width="110"></div>
</div>

Answer 1

这是因为有时你的FB对象甚至没有定义，你的FB.XFBML.parse（）函数被调用。初始化时需要调用FB对象。所以你的代码改为：

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

     window.fbAsyncInit = function(){  // this gets triggered when FB object gets initialized
            console.log("FB Object initiated");
            FB.XFBML.parse(); // now we can safely call parse method
       };

</script>

Answer 2

为什么不尝试客户端共享按钮而不是服务器端共享按钮。只有在服务器端呈现后才进行额外处理的情况下，才需要服务器端。您可能无需在服务器上进行渲染。

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

你也可以去https://developers.facebook.com/docs/plugins/share-button/ 传递您想要分享的网址将为您生成示例代码。然后，您可以根据该代码，使用其位置的变量更改服务器端共享页面的URL。这样您就可以获得可重复使用的代码段，该代码段可用于您网站上的每个页面。

<a href="https://www.facebook.com/sharer/sharer.php?u={$pageURLValue}" target="_blank">
  Share on Facebook
</a>

当您渲染页面时，只需将{$ pageURLValue}设置为当前页面即可。对不起，我不知道rails，所以变量标签可能不同。将{$ pageURLValue}替换为rails的值标记。

Answer 3

我遇到了同样的问题 - 我有一个div popup，iframe指向包含twitter按钮的html页面。我从一开始就隐藏了弹出窗口。这显然导致twitter按钮无法渲染..而不是隐藏它与display：none / visibility：隐藏位置弹出远处（左：-10000px）并在你想显示弹出窗口时重置左侧位置.. 希望它可以帮助别人..

Answer 4

我将一个Facebook页面小部件嵌入我的网站，这是一个Angular SPA，我有同样的“需要刷新”问题，因为我错误地将脚本放在包含名为“index.html”的视图页面的父级中，但我将嵌入式DIV专门放在“social_media.html”页面上的不同子视图中。 “index.html”在第一次访问我的网站的任何页面时加载并解雇了该脚本，但此时在我未使用和未请求的“social_media.html”视图中没有DIV的可见性，所以当用户最终导航到使用子视图“social_media.html”的链接，“index.html”没有“重新加载”，因此除非我点击刷新，否则不会重新激活脚本。为了解决这个问题，我只需将Script和DIVS全部放入相同的“social_media.html”，即可立即加载并触发所有“social_media.html”作为视图页面加载的请求。注意：我也必须添加DhruvPathak的方法。

Answer 5

只需动态调用函数FB.XFBML.parse();即可，而不用重新加载页面。

Facebook分享按钮直到刷新后才显示

5 个答案: