0

I'm having tremendous trouble getting the new Facebook Page Plugin to work. I discovered that I needed to change SDK src path from //... to http://... because, for some reason it wouldn't load while testing locally.

So in the script that loads the SDK, it now says

...
js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=471086929645819";
...

instead of

...
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=471086929645819";
...

But now, instead of just getting a plain link to the page (which happened because the SDK didn't load), I get nothing. If I open up the Firefox Network Monitor in the console, I can actually see a bunch of GET requests for all my friends' profile images for use in the widget. So I know that it's actually loading the data, but it's not displaying it on the page. Any idea what's going on? Here's the exact code of the HTML file I'm testing on.

<body>
<div id="fb-root"></div>
<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 = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=471086929645819";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/TheWelcomingCommittee" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/TheWelcomingCommittee"><a href="https://www.facebook.com/TheWelcomingCommittee">The Welcoming Committee</a></blockquote></div></div>

</body>
J-bob
  • 8,380
  • 11
  • 52
  • 85
  • It works for me with that page when I try - what isn't working in your case, exactly? is the plugin not rendering at all, rendering strangely? Are there mixed content or other warnings in your browser console? – Igy Jul 08 '15 at 19:02
  • It's not rendering at all. Sometimes the link `The Welcoming Committee` shows up for a second and then disappears when the SDK code runs. But once it loads I'm left staring at a blank screen. – J-bob Jul 08 '15 at 19:16
  • So after 45 seconds the console prints `"fb:page failed to resize in 45s"`. This issue discussed here: http://stackoverflow.com/questions/16833196/fblogin-button-failed-to-resize-in-45s for the FB login button, the solution is specific to that. Oy vey! Any ideas? – J-bob Jul 08 '15 at 19:25
  • That implies there's a problem (possibly with cross domain communication) when the Facebook SDK tries to modify the DOM of your page - are you sure the fb-root div is the only one and the FB JS SDK is being loaded correctly? – Igy Jul 09 '15 at 01:03
  • 1
    _“because, for some reason it wouldn't load while testing locally”_ – that “some reason” is that `//connect.facebook.net/…` is a _protocol-relative URL_, and as such it can only work if you access your page via HTTP or HTTPS, but not if you are only viewing your page by opening it in your browser via the file system. You should really install a local web server (XAMPP is easy for beginners), so that you can test under more “realistic” conditions, and don’t get bogged down by problems like this. – CBroe Jul 09 '15 at 12:55

1 Answers1

1

I don't think you can successfully test it locally. I was having the same problem, so I created a test page with just the FB code on it (same as what you've posted here). When viewed locally (on Chrome, IE, and Firefox), the plugin was exhibiting the same behavior that you've described. The only solution was to upload the page to a web server for viewing - then I was able to see the plugin normally.

daogirl
  • 26
  • 2