2013-03-02 3 views
7

In unserem Blog haben wir einen Link, wo Benutzer unsere Artikel auf ihre Zeitleiste posten können. Ein Popup öffnet sich und der Benutzer postet auf Facebook, dann bleibt das Popup dort und leitet zu "www.oursite.com" weiter. Wie können wir stattdessen das Popup schließen, wenn der Benutzer die Veröffentlichung beendet oder auf den Abbrechen-Button klickt? Laut this so question kann es nicht getan werden, aber Huffington Post hat es herausgefunden, aber mit Blick auf ihren Code können wir es nicht herausfinden. Als Beispiel the facebook share Schaltfläche hier öffnet ein Popup und schließen Sie dann, wenn Sie den Artikel entweder oder den Artikel absenden.Wie schließe ich das Popup, nachdem ich auf Facebook gepostet habe?

Hier ist, was wir haben:

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); 
     } 

Wir Hinzufügen window.close versucht habe(); im Callback (und auch self.close();), versuchte redirect_uri leer zu lassen (und redirect_uri auszulassen, aber es ist notwendig).

+0

Vielleicht kann diese Antwort Ihnen helfen: http://stackoverflow.com/a/2520861/1427942 – Eich

Antwort

15

Umleiten zu http://oursite.com/#close_window. Geben Sie dann auf der Startseite Ihrer Website Folgendes ein:

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

+2

arbeiten nicht in Chrom – Manuel

+0

Chrom nicht erlauben, ein Fenster zu schließen, das von anderem Skript geöffnet wurde – levi

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

Es scheint, dass die akzeptierte Antwort ist nicht mehr aufgrund der Tatsache arbeiten, dass Facebook nun alles nach einer Hash-Streifen und ersetzt sie durch post_id = xxxxx.

Lösung 1 (wenn Sie vertrauen FB nicht dies in naher Zukunft zu ändern):

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

Lösung # 2 (wenn Sie ein wenig mehr Versicherung gegen ändern wollen und dies nicht tun etwas dagegen, eine zweite Datei): eine neue hTML-Datei closewindow.html erstellen:

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

und Link, um es in der Umleitung.

+0

Lösung # 2 ist brilliant, lol, danke. – Lauro182

8

Nachdem ich einen ganzen Tag an diesem Problem gearbeitet habe, habe ich eine sehr gute Lösung, die ich gerne teilen würde. Anstatt das SDK mit FB.ui() zu verwenden, habe ich entdeckt, dass ich es vollständig vermeiden kann, indem ich mein eigenes Popup manuell auf https://www.facebook.com/dialog/feed öffne. Auf diese Weise funktioniert redirect_uri wie erwartet. Solange der Benutzer auf eine Schaltfläche klicken muss, um den Dialog zu öffnen, wird kein Popup-Blocker ausgelöst.

Ich glaube nicht, dass es irgendwelche Kompromisse mit diesem Code gibt, und wenn überhaupt, ist es viel einfacher zu verwenden als das eigentliche SDK.

Mein Javascript-Code (die Sie als FacebookFeedDialog.js speichern kann) sieht wie folgt aus:

/* 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'); 
} 

Hier ist eine Beispiel-HTML-Datei, die den Javascript-Code oben verwendet:

<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> 

Ihre Close html Datei kann wie folgt aussehen:

<SCRIPT> 
window.close(); 
</SCRIPT> 
+0

Danke Mann, nach ein paar Stunden damit zu kämpfen, eine perfekte Lösung! Du hast meinen Tag gerettet!! –

+0

Es ist schön, geschätzt zu werden! – Steven

1

Dies ist keine direkte Antwort auf th Die ursprüngliche Frage, aber es könnte anderen helfen, hier anzukommen.

Es gibt eine robustere Art und Weise, dies zu tun, dass Sie Maßnahmen ergreifen, auf der Ursprungsseite kann, wenn die Aktien erfolgreich abgeschlossen werden:

mit Ursprung in der Seite: Sie haben auf der Seite

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... 
    } 
} 

stellen Sie wie Ihr redirect_uri, die ich Karte in der Regel so etwas wie http://myserver.com/share/close:

window.opener.shareCompleted(); 

Jetzt bist du der Anteil Fenster gesichert wird geschlossen und Sie können bei Bedarf auf der ursprünglichen Seite Aktionen ausführen.

Hinweis: shareCompleted muss für diese Arbeit im Root-Fenster Namensraum zur Verfügung stehen. Wenn Sie alle Ihre JavaScript sind Einwickeln, wie Sie sein sollte, dann sicher sein, zu:

window.shareCompleted = shareCompleted; 
3

UPDATE: dieses Skript Ihre Redirect Seite hinzufügen:

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

es funktioniert gut :) –

2

Entfernen Sie einfach den redirect_uri Parameter aus die URL

Wie here.

+0

Funktioniert das für irgendjemand in diesen Tagen (Juli 2017)? Wenn ich auf 'here' klicke, kann ich posten, aber das Fenster schließt nicht, es sitzt nur auf https://www.facebook.com/dialog/return/close#_=_ –