2016-05-16 16 views
0

Ich brauche in Umsetzung in mein SPA Web-Anwendung (JavaScript + AngularJS) die Fähigkeit, URLs zu teilen, die umfassen Parameter wie:Facebook teilen Link mit dynamischen Parametern

http://MyTestSite.com?action=view&docID=12345 

oder:

http://MyTestSite.com?action=edit&docID=67890 

Die Die angezeigte Seite kann eine Liste mit sehr vielen Dokumenten enthalten, die geteilt werden können, und ich muss jedem von ihnen die Möglichkeit geben, geteilt zu werden (wo die anwendbare Aktion vom Status des Dokuments abhängen würde).

Nach viel Googeln scheint es, dass der einzige Weg für die Freigabe einer Verbindung, die Parameter enthält, durch die Verwendung von Open Graph ist (obwohl ich mir nicht sicher bin).

Also, die erste Frage wäre: Ist das der Weg zu gehen?

Unter der Annahme, dass die Antwort „JA“ ist, wie kann ich dynamisch aktualisieren, um die Aktion und docID, die im Header des HTML-Dokuments definiert werden? Ein solches Update muss stattfinden, sobald ich auf den Share-Button klicke, der einem bestimmten Eintrag auf der Seite angehängt ist.

Wenn die Antwort auf die vorherige Frage "NEIN" lautet (was bedeutet, dass das Open Graph nicht für die Freigabe eines Links mit Parametern geeignet ist), wie kann dies implementiert werden?

Vielen Dank im Voraus für jeden Vorschlag.

Antwort

0

Nach einiger Arbeit, mehr Fragen, und versuchen-Fehler, fand ich eine Lösung wie in here beschrieben

0

Das Problem ist, dass Facebook-Crawler, wie die meisten Crawler, kein Javascript auf der Seite auswerten, so dass Sie auf der ersten Seite mit den ersten Headern stecken bleiben.

Ich habe dieses Problem zuvor mit SPA behandelt, aber beim Erstellen einer server-gerenderten Seite, die nur für die Freigabe verwendet wird, wird diese Seite die relativen Header haben und zu meiner Anwendung umleiten.

auf dem Front-End applicaiton

var shareOnFacebook = function(type, autourl) { 
    FB.ui({ 
    method: 'share', 
    href: 'http://www.example.com/social/'+type+'/'+autourl, 
    }, function(response){ 

    console.log(response); 
    }); 
}; 

auf der Serverseite

<!-- do the logic to get the needed data and fill the needed tags --> 
    <meta property="og:title" content="{{$model->title}}" /> 
    <meta property="og:description" content="{{$model->description}}" /> 
    <meta property="og:image" content="{{$model->image}}" /> 

    <!-- after create a redirect--> 
    <meta http-equiv="refresh" content="0;url='http://www.example.com/{{$redirectHash}}"> 
+0

Vielen Dank @ Sam1188 für Ihre Antwort. Leider bin ich zu neu in diesem Geschäft, um zu verstehen, was Sie mit ** Server-gerenderten Seite ** meinen. Ich verstehe, dass Sie Angular erlauben, die richtigen Werte zu füllen (angezeigt durch die Verwendung von '{{}}'), aber das ist alles, was ich erreichen kann. Können Sie weitere Einzelheiten zum Erstellen dieser Seite angeben? Auch, in dem JavaScript, was und wo von Ihnen erhalten die Werte von 'type' und' autoutl'? – FDavidov

+0

server-gerenderten = PHP-Seite oder welche Serversprache Sie verwenden, und die {{}} sind nicht angular in dem bereitgestellten Beispiel, aber sie sind Klinge. – sam1188