vendredi 31 juillet 2015

Integrating FB Page with Rails

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="http://ift.tt/1eFsdao" 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="http://ift.tt/1eFsdao">
      <a href="http://ift.tt/1eFsdao">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>

Aucun commentaire:

Enregistrer un commentaire