Invalid version specified, facebook share plugin error

Question

I want to use the facebook share plugin for the web app I am working on, I only need the basic share button. The app uses requirejs for loading javascript, so I followed the how-to and changed the facebook api url to the one found in code snippets on facebook docs. This doesn't work and the sdk throws error invalid version specified. This is how my files look.

main.js

require.config({
  shim: {
    'facebookshare' : {
      exports: 'FB'
    }
  },
  paths: {
    'facebookshare':  "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0"
 }
});
require(['fb']);

fb.js

define(['facebookshare'], function(facebook) {
   document.body.innerHTML += '<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button"></div>';
});

What is the best way of including only the facebook share plugin with requirejs?

I referred following questions, but none of them provide a concrete solution. Uncaught error: no version specified and wrong version error.

Answer 1

I was also getting the following error even when using the standard embed code that Facebook provides.

Uncaught Error: invalid version specified in sdk.js

The first thing to check is that you're including the version number in your FB.init call:

FB.init({
  appId: 'your-app-id',
  xfbml: true,
  version: 'v2.8'
});

---

The now-outdated fix...

...was to make a simple tweak and changed the path:

From:   //connect.facebook.net/en_GB/sdk.js  
To:     //connect.facebook.net/en_GB/all.js

And this fixed the error. Unfortunately I have no idea why. :-(

Answer 2

Consider including a version parameter to the src property as shown below:

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"

The default template on Like button for Web is incomplete; upon clicking on the "Get Code" button Facebook will generate you a complete template with the version parameter included.

Answer 3

Minor heads up, I had to change

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

to

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

Answer 4

I ran into this problem when I was changing my file from HTTP to HTTPS. The reason was the lack of specific "HTTP:" or "HTTPS:" in the following code:

<div class="fb-comments" data-width="100%" data-href="//amazingjokes.com/image/2017-03-17/A_good_sign_for_St__Patricks_day" data-num-posts="5"
     data-colorscheme="light">
</div>

normally the '//domain.com' copies the scheme we're on, so when you're on htts://example.com a link to '//example2.com' will seen as 'https://example2.com'. For the 'fb-comments' you'll need to specifically state HTTP or HTTPS for the data-href.

Also note that 'https://example.com' according to facebook is another page than 'http://example.com'. So if you upgrade your site for SSL you will lose all past comments if you change the URL in the social plugins from HTTP to HTTPS... The solution I chose was to use HTTP for all older posts, and HTTPS for everything recent