CODEWITHSUNDEEP
javascriptfacebook
Saha
Saha

Reputation: 3

How to open and close popups with Javascript/FB.ui

I wrote a simple function to launch a facebook share dialog popup. The problem is, when the user submits the share form the redirect config code in the html link sends the user back to my site within the popup, rather than closing the popup and displaying the response fb sends back. 

function popwindow(url)
{
newwindow=window.open(url,'name','height=400,width=700');
if (window.focus) {newwindow.focus()}
}

with the html

<a href="#" onclick="popwindow('http://www.facebook.com/dialog/feed?app_id=XXX&link=somelink&display=dialog&redirect_uri=http://myurl.net/response/')">Share on Facebook</a>

Now I'm trying to figure out how to get FB's FB.ui js code to work (I'm a js beginner). I've looked through all the similar questions on stackoverflow to no avail. How do I write a link in my page's html to call a FB share dialog that pops up, submits when the user submits it, then closes the popup and sends the user to the proper confirm url with the proper response alerts?

I have this default fb code in a facebook.js file

FB.ui(
{
 method: 'feed',
 display: 'dialog'
},
function popwindow(url)
{
newwindow=window.open(url,'name','height=400,width=700');
if (window.focus) {newwindow.focus()}
}
function(response) {
 if (response && response.post_id) {
   alert('Post was published.');
 } else {
   alert('Post was not published.');
 }
}
);

How do I write out an html link to call the popup and have FB.ui take care of it?

Upvotes: 0

Views: 13936

Answers (1)

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

You shouldn't have to worry about popping a dialog yourself - the FB.ui call takes care of that for you. Here's a working example straight from documentation Here's an example with some HTML added:

<input type="button" onclick="share_prompt()" value="Share" />

<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript" charset="utf-8"></script>
<div id="fb-root"></div>    
<script type="text/javascript" charset="utf-8">
FB.init({
    appId: 'YOUR_APP_ID', 
    status: true, 
    cookie: true,
    xfbml: true
});

function share_prompt()
{


    FB.ui(
       {
         method: 'feed',
         name: 'Facebook Dialogs',
         link: 'http://developers.facebook.com/docs/reference/dialogs/',
         picture: 'http://fbrell.com/f8.jpg',
         caption: 'Reference Documentation',
         description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
         message: 'Facebook Dialogs are easy!'
       },
       function(response) {
         if (response && response.post_id) {
           alert('Post was published.');
         } else {
           alert('Post was not published.');
         }
       }
     );
 }

</script>

Upvotes: 6

Related Questions