CODEWITHSUNDEEP
javascriptfacebookpopupshare
Rafael
Rafael

Reputation: 17

Facebook Share Popup-Button Stops to Work after First Click

I have a Facebook Button on my page. It calls a share popup.

The problem is that button works just on the first click. The second, third clicks don't do nothing. I always need to refresh the page.

I'm a newbie. Could you help me with this code?

Thank you.

    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'zzzzzzzzzz', 
          status     : true, 
          cookie     : true,
          xfbml      : true  
        });

        FB.ui(
          {
            method: 'feed',
            name: 'Bitcoin Catcher Faucet & Rotator', 
            link: 'http://bitcoin-catcher.com',
            picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
            caption: 'Only 1000+ Rewards Faucet & Rotator', 
            description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!' 
          },  

          function(response) {
            if (response && response.post_id) {
    unhide('claim', '');
            } else {
            }
          }
        );

      };

     function fb_callout() {

      (function(d){
             var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
             if (d.getElementById(id)) {return;}
             js = d.createElement('script'); js.id = id; js.async = true;
             js.src = "//connect.facebook.net/en_US/all.js";
             ref.parentNode.insertBefore(js, ref);
             }(document));
         }
    </script> 

<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />

Upvotes: 0

Views: 811

Answers (2)

Rafael
Rafael

Reputation: 17

I did this way and nothing happens...

<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />

<div id="fb-root"></div>
<script>

function fb_callout() {

    FB.ui(
      {
        method: 'feed',
        name: 'Bitcoin Catcher Faucet & Rotator', 
        link: 'http://bitcoin-catcher.com',
        picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
        caption: 'Only 1000+ Rewards Faucet & Rotator', 
        description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!' 
      },  

      function(response) {
        if (response && response.post_id) {
unhide('claim', '');
        } else {
        }
      }
    );

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxx', 
      status     : true, 
      cookie     : true,
      xfbml      : true  
    });

  (function(d){
         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         ref.parentNode.insertBefore(js, ref);
         }(document));
     }

  };


</script>

Upvotes: 0

marekful
marekful

Reputation: 15361

The call to FB.ui should be outside fbAsyncInit. Place it in the click event handler of the Share button.

In your code sample, the FB JS SDK is loaded with every click. This is not what you want.

Even though it works the first time because the SDK calls fbAsyncInit once it's loaded which in turn - in your example, mistakenly again - displays the feed dialog through an FB.ui call, reloading the SDK breaks the API for subsequent calls. The SDK should not be loaded every time.

What you want instead is to load the SDK only once when the page loads (it's asynchronous so it wont block the browser) and then assign a click handler to the button which calls FB.ui.

It'd look something similar to the below

<body>
<img alt="Share on Facebook" onclick="fb_callout();" />

<script>
  // Handler for click event
  function fb_callout() {
    FB.ui({...}, function(response) {});
  }

  // This is called when the SDK js file is loaded by the browser
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'zzzzzzzzzz', 
      status     : true, 
      cookie     : true,
      xfbml      : true  
    });
  }

  // This loads the FB SDK js
  (function(d){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
  }(document));
</script>
</body>

Upvotes: 1

Related Questions