Bimde Bimde - 3 months ago 29
Javascript Question

Using Facebook Page Plugin

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.

Answer

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 ;)