Using Facebook Page Plugin

Question

While trying to use the Page Plugin from Facebook to create a small portlet to display updates from a company page, I encountered various errors. The largest of which is the plugin display simply not showing up.

Here is the page: http://bit.ly/1OR4bYw

Here is my code (directly copied and pasted from facebook, aside from the html tags):

<html>
    <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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

        <div class="fb-page" data-href="https://www.facebook.com/facebook" 
        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/facebook">
        <a href="https://www.facebook.com/facebook">Facebook</a>
        </blockquote></div></div>
    </body>
</html>

Error thrown in the console: GET file://connect.facebook.net/en_US/sdk.js net::ERR_FILE_NOT_FOUND

Solution: add 'https://' infront of the path to the sdk. Resulting in the following line changed:

js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";

However, this results in the error not being thrown anymore, but the plugin display (the actual widget) is still not displayed. Or rather, NOTHING is being displayed.

I've tried:

Removing the '#xfbml=1&version=v2.5' at the end of the path
Changing the location of the div with id 'fb-root'
Changing the location of the script (before and after various elements)
Using multiple browsers
Using all potential solutions from this question

I find it hard to believe that sample code from the Facebook developers website itself wouldn't work, and would like some explanation of what I'm doing wrong.

First of all, you need to use the code on a website that is viewed via HTTP(S), otherwise the reference to the SDK in the form `//connect.facebook.net/` won’t work. Are you viewing your page only locally in the browser, by opening is via the file system? In that case, the SDK might not work (even if you fix the address issue) – try when the page is uploaded to a (local) web server and accessed via HTTP(S). — CBroe, Oct 21 '15 at 09:56
@CBroe Thank you for the input, I tried uploading the file to a web server and viewing it that way and surprisingly enough, it worked. However, can you please explain to me why this is happening and why the SDK can't be accessed when opening the file from a local file system (even with the 'https:' in front of the link). Thanks again. — Bimde, Oct 21 '15 at 19:11
The SDK can be “accessed”, but it can probably not check other stuff properly – like which user is currently logged in to Facebook in the browser. (And if your FB page, that you want to display the plugin for, is not published yet, or access-restricted in some other way, which user is logged in matters.) — CBroe, Oct 22 '15 at 09:48

Virtua Creative · Accepted Answer · 2015-10-24T09:28:08.107

I've edited this answer to make it better.

First, make sure you are embedding your own page, not Facebook's...

Instead of:

...
<div class="fb-page" data-href="https://www.facebook.com/facebook" ...
...

..your code is going to be like this:

<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 = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- your content -->
    <div class="face">
        Here is the div or section where you want to place your Facebook snippet.
        <br>
        <div class="fb-page" data-href="https://www.facebook.com/YOURPAGE" 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/YOURPAGE"><a href="https://www.facebook.com/YOURPAGE">YOUR PAGE TITLE</a></blockquote></div></div>
    <!-- your content -->
</body>

Leave the provided code like it is, there's no need for changes, and if you want to do so, make sure you do that at Facebook's code gen.

Then you will need a local server in order to see the results, like Mampp or Xampp. Otherwise you will see it working only when uploading your page to your web server.

Having Xampp installed, the only thing you need to do is adding your website root folder to a folder called htdocs. This is your localhost. Every website you want to create, I suggest you do that within this folder, so you'll be able to see things exactly as they will be displayed by web browsers.

Let's say your website root folder is called example and it is inside htdocs Xampp folder. You turn Apache on in Xampp and go to your browser and type localhost/example/ and you will see your index page.

Hope it helps! If it does, please mark the answer as correct or useful! Thanks ;)

Everything was ok with the code, the only problem was that it wasn't on a web server. Xampp works great. Thank you. — Bimde, Oct 26 '15 at 20:39

Abraham · Answer 2 · 2016-08-23T01:01:22.560

Just in case you still have this problem, use this code instead, the facebook code seems to be giving errors on my blogger until I used the lines of codes below for this website. http://www.HipHopLevel.net

<div id='fb-root'/>
<script>//<![CDATA[
(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.3&appId=YOUR APP ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]></script>

Using Facebook Page Plugin

2 Answers2