Member Avatar for PsychicTide

Hello fellow Daniwebians, having a bit of trouble setting up the like button and comments box on my individual articles (local news website).

I've created an app (for the purposes of having an app ID) and created a page for that app. I'm now attempting to use Facebook's developer plugins page to create the needed code ( https://developers.facebook.com/docs/plugins ).

Using the like button setup as an example:
I've copied the API code and placed it just below the opening <body> tag like so...

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

And added the required html elements at the bottom of my article page...

<div class="fb-like" data-href="http://mywebsite.com/article.php?num=<? echo $number; ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

The like button, however, is not showing up in any browser. I've looked at google's console errors and have the following errors.

1)  ##########################
    #  The endpoint used to load this resource has been deprecated.
    #  Please update to the current Facebook JavaScript SDK.
    #  https://developers.facebook.com/docs/reference/javascript/
    ########################## FB.Share:53
2)  Invalid App Id: Must be a number or numeric string representing the application id. FB.Share:53
3)  The "fb-root" div has not been created, auto-creating FB.Share:53
4)  FB.getLoginStatus() called before calling FB.init().

I generated this code via the link at the start of this post. This is supposed to be the official up-to-date facebook developer link right? I've also tried to use this debug link I found, but there are no warnings or errors ( https://developers.facebook.com/tools/debug/ ). I can provide a live link if absolutely needed. No luck finding a solution for the last few hours, any ideas are much appreciated!

Edited by PsychicTide
  • 1 Contributor
  • 1 Reply
  • 313 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by PsychicTide

Dani AI

Generated

Short summary and practical checklist based on this thread: the problem turned out to be a legacy Facebook loader conflicting with the newer JavaScript SDK — as discovered, removing that old share script allowed the Like/Comments plugins to render. The most reliable fixes are to remove duplicate/legacy FB scripts, ensure the current SDK is loaded exactly once, and initialize it correctly before calling any FB API functions.

  • Remove any old Facebook script includes (legacy connect.php/FB.Share-style loaders) so there’s only a single SDK load.
  • Ensure the DOM contains the container element the SDK expects (the fb-root div) before the SDK runs. If plugins are injected after page load, call the XFBML parser rather than relying on an automatic parse.
  • Initialize the SDK with a numeric App ID (not the app name or page ID) and call FB.init before calling FB.getLoginStatus or other FB.* functions.
  • Use absolute, canonical URLs for plugin attributes and the og:url meta tag so Facebook scrapes the correct page. Avoid mixed-content issues by loading the SDK and site assets over HTTPS.

Quick isolation steps that often save time: reduce the page to a minimal static HTML containing only the SDK and a single plugin to confirm it renders; check the browser console and Network panel for blocked requests or duplicate SDK loads; temporarily disable other third-party scripts to spot conflicts; and use Facebook’s sharing/debug tool to force a re-scrape of the URL and inspect how FB sees the page.

Conclusion: the root cause reported here (a legacy FB.Share script) is a common gotcha. Keeping the SDK singular, initialized in the right order with a valid numeric App ID, and using canonical URLs will prevent the console errors shown in this thread and allow the social plugins to display correctly.

Member Avatar for PsychicTide

Apparent I neglected to remove an old share method I had previously used. The following line interrupted any other facebook API calls...

<script src="" type="text/javascript"></script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.