Integrating FB Page with Rails

Question

I'm trying to integrate FB page with my new Rails application.

Problems:

The Fb Page container is properly rendered only when request is directly from addressbar of client(putting url in addressbar and hit go) OR when request is from one controller to other.
When any action of same controller is clicked on website i.e. call from SAME controller, the FB Page block is not rendered properly.

Test it here : Test Link

What I've done is:

Added FB JS in application.html.erb
And there itself, I'm putting my code for Fb Page.(shown below)

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">
  &copy; <a href="http://forgottenhero.in" >forgottenhero.in</a>
</div>

</body>
</html>

Are you using AJAX to dynamically load content? If so: http://stackoverflow.com/a/29134477/1427878 — CBroe, Jul 31 '15 at 12:41
No it was not related to that in any way. I got the solution. It was caused by *turbolink* which is causing js not to get executed properly everytime with html. — Sachin, Jul 31 '15 at 14:33

score 0 · Accepted Answer · answered Jul 31 '15 at 14:36

0

I got the solution

It was caused by turbolink which is causing js not to get executed properly everytime with html.

So have to remove //= require turbolinks from application.js

answered Jul 31 '15 at 14:36

Sachin

963
11
31

Integrating FB Page with Rails

1 Answers1