将 FB 页面与 Rails 集成
Integrating FB Page with Rails
我正在尝试将 FB 页面与我的新 Rails 应用程序集成。
问题:
仅当请求直接来自客户端的地址栏(将 url 放入地址栏并点击开始)或请求来自一个控制器到另一个控制器时,Facebook 页面容器才会正确呈现。
当在网站上单击同一控制器的任何操作时,即从同一控制器调用时,FB 页面块无法正确呈现。
在这里测试 : Test Link
我所做的是:
- 在 application.html.erb
中添加了 FB JS
- 在那里,我正在为 Fb 页面放置我的代码。(如下所示)
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Forgotten Heroes</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="fb-root"></div>
<!-- FB JAVASCRIPT SDK STARTS -->
<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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- FB JAVASCRIPT SDK ENDS -->
<div id="header" class="generic">
Forgotten Heroes
<div id="main-menu">
<span class='menu-links'>Home</span>
<span class='menu-links'>Blogs</span>
<span class='menu-links'>Trending</span>
<span class='menu-links'>About Us</span>
</div>
<div id="fb-page-like">
<div class="fb-page" data-href="https://www.facebook.com/IndianForgottenHeroes" data-width="350" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-show-posts="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/IndianForgottenHeroes">
<a href="https://www.facebook.com/IndianForgottenHeroes">Forgotten Heroes</a>
</blockquote>
</div></div>
</div>
</div>
<%= yield %>
<div id="footer" class="generic">
© <a href="http://forgottenhero.in" >forgottenhero.in</a>
</div>
</body>
</html>
我找到了解决方案
这是由 turbolink
引起的,导致 js 每次使用 html 时都无法正确执行。
所以必须从application.js
中删除//= require turbolinks
我正在尝试将 FB 页面与我的新 Rails 应用程序集成。
问题:
仅当请求直接来自客户端的地址栏(将 url 放入地址栏并点击开始)或请求来自一个控制器到另一个控制器时,Facebook 页面容器才会正确呈现。
当在网站上单击同一控制器的任何操作时,即从同一控制器调用时,FB 页面块无法正确呈现。
在这里测试 : Test Link
我所做的是:
- 在 application.html.erb 中添加了 FB JS
- 在那里,我正在为 Fb 页面放置我的代码。(如下所示)
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Forgotten Heroes</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="fb-root"></div>
<!-- FB JAVASCRIPT SDK STARTS -->
<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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- FB JAVASCRIPT SDK ENDS -->
<div id="header" class="generic">
Forgotten Heroes
<div id="main-menu">
<span class='menu-links'>Home</span>
<span class='menu-links'>Blogs</span>
<span class='menu-links'>Trending</span>
<span class='menu-links'>About Us</span>
</div>
<div id="fb-page-like">
<div class="fb-page" data-href="https://www.facebook.com/IndianForgottenHeroes" data-width="350" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-show-posts="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/IndianForgottenHeroes">
<a href="https://www.facebook.com/IndianForgottenHeroes">Forgotten Heroes</a>
</blockquote>
</div></div>
</div>
</div>
<%= yield %>
<div id="footer" class="generic">
© <a href="http://forgottenhero.in" >forgottenhero.in</a>
</div>
</body>
</html>
我找到了解决方案
这是由 turbolink
引起的,导致 js 每次使用 html 时都无法正确执行。
所以必须从application.js
//= require turbolinks