Custom Facebook share button does not work

Question

Can somebody explain why my custom Facebook share button does not work? Whenever I click the button it the share window just does not show up. I've tried it as html file on an actual webserver, and I've read everything in the facebook docs regarding the share button.

When using the same code provided by facebook it does work.

I do get this error though when clicking on the button.

This is my code. (Without the CSS because its a bit more, If you need it I can add it.)

<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1"></script>

<div class="page-header">
  <h1>Share Dialog</h1>
</div>
<p>Click the button below to trigger a Share Dialog</p>
<button class="fill" id="fb-share-button">Share on Facebook</button>

<script>
document.getElementById('fb-share-button').onclick = function() {
  FB.ui({
    method: 'share',
    display: 'popup',
    href: 'https://nureinberg.de',
  }, function(response){});
}
</script>

Answer 1

You need to initialize the FB SDK,

This includes the FB.init function and having the <div id="fb-root"></div> element.

Check out this pen - it works just fine minus the App ID of course, but the popup portion works:

https://codepen.io/xhynk/pen/MVKerM

I also added the version ID to the sdk.js script ( https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7 )

Answer 2

Try adding a version and the App ID to the JS SDK source:

https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=<your-app-id>

Although, i would recommend using the asynchronous way to load the JS SDK: https://developers.facebook.com/docs/javascript/quickstart

If you do not want to create an App, use sharer.php with a standard anchor-tag:

https://www.facebook.com/sharer/sharer.php?u=<encoded-url>

Answer 3

Thank you for all your answers. It works now with the following code.

I've also created a codepen for it.

window.fbAsyncInit = function() {
  FB.init({
    appId      : 'your-app-id',
    cookie     : true,
    xfbml      : true,
    version    : 'v2.7'
  });

  FB.AppEvents.logPageView();

};

document.getElementById('fb-share-button').onclick = function() {
  FB.ui({
    method: 'share',
    display: 'popup',
    href: window.location.href,
  }, function(response){});
}