上周我将Facebook和Twitter分享按钮添加到我的rails应用程序中。我认为它们工作正常,但似乎它们没有可靠加载,需要刷新才能让它们显示出来。我认为这是一个涡轮问题,因为这些事情经常是这样我安装了jquery-turbolinks' 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>
答案 0 :(得分:8)
这是因为有时你的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>
答案 1 :(得分:1)
为什么不尝试客户端共享按钮而不是服务器端共享按钮。只有在服务器端呈现后才进行额外处理的情况下,才需要服务器端。您可能无需在服务器上进行渲染。
<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的值标记。
答案 2 :(得分:0)
我遇到了同样的问题 - 我有一个div popup,iframe指向包含twitter按钮的html页面。我从一开始就隐藏了弹出窗口。这显然导致twitter按钮无法渲染..而不是隐藏它与display:none / visibility:隐藏位置弹出远处(左:-10000px)并在你想显示弹出窗口时重置左侧位置.. 希望它可以帮助别人..
答案 3 :(得分:0)
我将一个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的方法。
答案 4 :(得分:0)
只需动态调用函数FB.XFBML.parse();
即可,而不用重新加载页面。