CODEWITHSUNDEEP
javascriptfacebooksdk
teeyo
teeyo

Reputation: 3755

Facebook like button blank page

I'm testing the integration of the facebook like button in my own page, but does not seem to get it through, here's my code :

<html>
<head>
<title>Your Website Title</title>
</head>
<body>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '613335972130771', // I changed this appId when I pasted the code
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (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&appId=613335972130771";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-like" data-href="https://www.facebook.com/" data-width="400" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

I get nothing in the console and the page stays blank.

Upvotes: 0

Views: 374

Answers (2)

teeyo
teeyo

Reputation: 3755

I did some extra researches and was able to solve this, first I needed to change the facebook sdk url, since I am testing on local machine only :

// from
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=613335972130771";
 fjs.parentNode.insertBefore(js, fjs);
// to
js.src = "https//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=613335972130771";
 fjs.parentNode.insertBefore(js, fjs);

Then I started getting a very clear error, which instructed me to change my domaine in the facebook developer application I was using (613335972130771) to be the exact domaine I am testing on (local.app)

Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

After changing the domaine, the link worked perfectly.

Upvotes: 0

Giacomo Torricelli
Giacomo Torricelli

Reputation: 763

Here a working snippet

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example Like</title>
    </head>
    <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&appId=692966564061436";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

        <div class="container">
            <div class="fb-like" data-href="http://example.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions