Geek Answers Handbook

How to close popup after sending to facebook?

We have a link on our blog where users can publish our articles on their timeline. A popup window opens and the user goes to facebook, then the popup window remains and redirects to "www.oursite.com". How do we close the popup when the user either ends the publication or clicks the cancel button? According to this question so , it cannot be done, but Huffington's message figured it out, but looking at their code, we cannot figure it out. For example, the facebook share button here will open a pop-up window and then close when you publish an article or cancel it.

Here is what we have:

FB.init({appId: "90210", status: true, cookie: true}); function postToFeed() { // calling the API ... var obj = { method: 'feed', redirect_uri: 'http://www.oursite.com/', link: 'http://www.oursite.com/', picture: 'http://www.oursite.com/png.png', name: 'Some title', caption: '', description: '' }; function callback(response){ window.close(); // doesn't do anything //document.getElementById('msg').innerHTML = "Post ID: " + response['post_id']; } FB.ui(obj, callback); }

We tried to add window.close (); in the callback (as well as self.close ();) tried to leave redirect_uri empty (and tried to leave redirect_uri in general, but this is necessary).

+7
source share
8 answers

As of 10/2017, removing redirect_uri seems to work.

The default will be https://www.facebook.com/dialog/return/close#_=_

whose source is only <script type="text/javascript"> window.close() </script>

+2
source

It seems that the accepted answer no longer works because facebook is now stripping something after the hash and replacing it with post_id = xxxxx.

Solution No. 1 (if you trust FB not to change this in the near future):

 if(window.location.search.indexOf('post_id')==1) window.close();

Solution No. 2 (if you want a little more insurance against changes and do not mind the second file): Create a new html file closewindow.html:

 <html><body><script>window.close()</script></body></html>

and a link to it in the redirect.

+17
source

Redirect to http://oursite.com/#close_window . Then, on the home page of your site, enable something like this:

if (window.location.hash == '#close_window') window.close(); .

+15
source

After spending the whole day working on this issue, I have a very good solution that I would like to share. Instead of using the SDK with FB.ui (), I found that I could completely avoid this by manually opening my own popup for https://www.facebook.com/dialog/feed , Thus, redirect_uri works like expected. As long as you require the user to click a button to open a dialog box, a pop-up blocker will not start.

I do not believe that there are any compromises with this code, and, in any case, it is much easier to use than the actual SDK.

My Javascript code (which you can save as FacebookFeedDialog.js) is as follows:

 /* by Steven Yang, Feb 2015, originally for www.mathscore.com. This code is free for anybody to use as long as you include this comment. */ function FacebookFeedDialog(appID, linkTarget, redirectTarget) { this.mParams = { app_id: appID, link: linkTarget, redirect_uri: redirectTarget, display: "popup" } }; /* Common params include: name - the title that appears in bold font description - the text that appears below the title picture - complete URL path to the image on the left of the dialog caption - replaces the link text */ FacebookFeedDialog.prototype.addParam = function(key, value) { this.mParams[key] = value; }; FacebookFeedDialog.prototype.open = function() { var url = 'https://www.facebook.com/dialog/feed?' + encodeCGIArgs(this.mParams); popup(url, 'feedDialog', 700, 400); }; /* Takes a param object like this: { arg1: "value1", arg2: "value2" } and converts into CGI args like this: arg1=value1&arg2=value2 The values and args will be properly URI encoded */ function encodeCGIArgs(paramObject) { var result = ''; for (var key in paramObject) { if (result) result += '&'; result += encodeURIComponent(key) + '=' + encodeURIComponent(paramObject[key]); } return result; } function popup(mylink,windowname,width,height) { if (!window.focus) return; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; if (!windowname) windowname='mywindow'; if (!width) width=600; if (!height) height=350; window.open(href, windowname, 'resizable=yes,width='+width+',height='+height+',scrollbars=yes'); }

Here is an example HTML file that uses the Javascript code above:

 <HTML> <BODY> <SCRIPT type="text/javascript" src="FacebookFeedDialog.js"></SCRIPT> <SCRIPT> var dialog = new FacebookFeedDialog(yourAppIDGoesHere,yourDestinationURLGoesHere,yourCloseWindowURLGoesHere); dialog.addParam('name','This is my title'); dialog.addParam('description','This is the description'); dialog.addParam('picture',yourImageURLGoesHere); dialog.addParam('caption','This is the caption'); </SCRIPT> <A href="javascript:dialog.open()">Open facebook dialog</A> </BODY> </HTML>

Your html CloseWindow file might look like this:

 <SCRIPT> window.close(); </SCRIPT>
+8
source

UPDATE: Add this script to the redirect page:

 if (document.referrer == "https://www.facebook.com/" && (window.location.href.indexOf('post_id=') != -1 || window.location.hash == '#_=_')) { window.close(); }
+3
source

Just remove the redirect_uri parameter from the url.

Like here .

+2
source

This is not a direct answer to the original question, but it can help others arriving here.

There is a more reliable way to do this, which allows you to act on the original page when the package completed successfully:

On the original page:

 var shareWindow; function openShareWindow() { // See https://developers.facebook.com/docs/sharing/reference/share-dialog shareWindow = window.open('https://www.facebook.com/dialog/share?app_id=...&display=popup&redirect_uri=...'); } function shareCompleted() { if (shareWindow) { shareWindow.close(); shareWindow = null; // The share was successful, so do something interesting here... } }

On the page that you set as your redirect_uri , which I usually map to something like http://myserver.com/share/close :

 window.opener.shareCompleted();

Now you are sure that the share window will be closed, and if necessary, you can act on the original page.

Note: shareCompleted must be available in the root window namespace for this to work. If you complete all of your JavaScript, as it should be, make sure that:

 window.shareCompleted = shareCompleted;
+1
source 
 <script>if (window.location.hash.indexOf("#close_window") != -1) window.close();</script>
0
source

More articles:


All Articles