简体   繁体   中英

How do I stop my Facebook share window from being blocked by popup-blocker?

I have my Facebook share window appearing when a function is called onClick of the Facebook share button.

The problem is that the Facebook window attempts to appear but is blocked by popup-blocker.

This is my first time creating a share window. Is there a simple solution to bypass the popup blocker?

Here is the button that triggers the function:

<button class="share-now" onclick="fb_callout();">

And here is the function that is called:

<script>
 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));
     }
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : '162280254223002', // App ID from the App Dashboard
      xfbml   : true,
      version : 'v2.5',
      status     : true
    });

    // Additional initialization code such as adding Event Listeners goes here
    FB.ui(
      {
        method: 'feed',
        href: 'http://www.example.com',
        name: 'Example',
        link: 'http://www.example.com',
        picture: 'http://image.png',
        caption: 'Caption',
        description: 'words go here'
      },
      function(response) {
        if (response && response.post_id) {
          alert('Post was published.');
        } else {
          alert('Post was not published.');
        }
      }
    );
  };
  </script> 

Right now you are trying to open a popup not on user interaction, but in an asynchronous callback function. Of course the popup blocker detects that and blocks the popup (for a good reason). You need to do two things:

  • Load the JS SDK on page load, NOT on user interaction.
  • Call FB.ui directly on user interaction. It should be the only thing in the fb_callout function.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM