CODEWITHSUNDEEP
javascriptjqueryfacebook
Charlie
Charlie

Reputation: 11787

Show FB status update popup on click?

I have this code which allows the user to update their fb status on my page:

<head>
  <title>My Great Website</title>
</head>
<body>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js">
  </script>
  <script>
     FB.init({ 
        appId:'**', cookie:true, 
        status:true, xfbml:true 
     });

     FB.ui({ method: 'feed', 
        message: 'Facebook for Websites is super-cool'});
  </script>
 </body>

It works fine but when the page loads it automatically shows the popup, but I want the box to only show when I press a button. Is this possible? I don't see an option in the FB Documentation.

Upvotes: 1

Views: 952

Answers (3)

genesis
genesis

Reputation: 50976

demo ("An error occurred. Please try again later." is showing because I have wrong appID specified) 

<html>
<head>
  <title>My Great Website</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js">
  </script>
  <script>
     FB.init({ 
        appId:'**', cookie:true, 
        status:true, xfbml:true 
     });

     $(function(){ 
          $("#post-wall").click(function(){
              FB.ui({ method: 'feed', 
                 message: 'Facebook for Websites is super-cool'});
              return false;
          });
      });
   </script>
   <a href="#" id="post-wall">Post feed on your wall</a>
  </body>
</html>

Upvotes: 2

ifaour
ifaour

Reputation: 38135

<html>
<head>
  <title>My Great Website</title>
</head>
<body>
    <button onclick="open_fb_dialog()">Open Dialog</button>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js">
  </script>
  <script>
     FB.init({ 
        appId:'XXXXXX', cookie:true, 
        status:true, xfbml:true 
     });
    function open_fb_dialog() {
     FB.ui({ method: 'feed', 
        message: 'Facebook for Websites is super-cool'});
    }
  </script>
 </body>
</html>

Just put it inside a function and call the function on your action button (<button>, <a>..etc)

Upvotes: 1

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

<head>
  <title>My Great Website</title>
</head>
<body>
  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js">
  </script>
  <script>
     FB.init({ 
        appId:'**', cookie:true, 
        status:true, xfbml:true 
     });
     function showMessage() {
        FB.ui({ method: 'feed', 
           message: 'Facebook for Websites is super-cool'});
     }

     $('.showMessage').click(function() {
        showMessage();
     });
  </script>

  <a href="javascript:;" class="showMessage">Show Message</a>
 </body>

Upvotes: 1

Related Questions