Zusammenfassung: Mein Problem wird immerFB.uiüber dieshare_open_graph Methode, um ein benutzerdefiniertes Freigabedialogfeld zu erstellen, das unterschiedliche Titel, Beschreibungen und Bilder enthält, basierend auf den Aktionen des Benutzers auf der Seite.

Die Frage war meine erste und ich hatte keinen Ruf, so dass zahlreiche Links entfernt wurden, aber (danke an alle, die mir Upvotes gegeben haben) ich konnte die ursprünglich fehlenden Screenshots retten.

BEARBEITEN: Am Ende musste ich nur ein reguläres Popup-Fenster mit einem Freigabe-Dialog verwenden, es ist nicht ideal, aber es funktioniert zumindest zuverlässig. Je mehr ich mich im Internet umsah, desto mehr stellte ich fest, dass viele angesehene Websites immer noch Popup-Sharing wie dieses verwenden. In diesem Fall überwogen die Vorteile einer älteren Lösung gegenüber der umfangreichen Arbeit bei der Suche nach einer geeigneten Lösunghttps://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 mit dynamischen Details, die über eine URL-Abfrage bereitgestellt werden, die mindestens etwas aktueller ist als die Verwendung von sharer.php, die ich ursprünglich auf Buzzfeed gesehen habe.

Meine Seite:

Ich habe ein Quiz. Zehn Fragen, fünf Antworten auf jede Frage, ein Ergebnis wird erzeugt, indem eine von fünf Optionen als "Ergebnis" zugewiesen wird. Alles soweit das Quiz funktioniert super. Das Ergebnis wird angezeigt, wenn das Quiz über Ajax / jQuery abgeschlossen ist. Auf diese Weise kann ich in Zukunft ein PHP-basiertes Front-End für andere Personen erstellen, um die Erstellung von Quiz zu verwalten.Ich gebe die URL der Seite gerne im folgenden Code an, aber bis ich das Problem behebe, kann ich sie nicht öffentlich veröffentlichen, sodass Sie nicht darauf zugreifen können!

Mein Ziel:

Wenn das Ergebnis des Quiz angezeigt wird, sollten auch Facebook- und Twitter-Freigabetasten vorhanden sein, die so angepasst wurden, dass sie ein Bild, einen Titel und eine Beschreibung enthalten, die dem Quizergebnis des Benutzers entsprechen.

Der Twitter-Button war einfach dynamisch zu machen

Ich erstelle mit jQuery einen Twitter - Button mit demselben HTML - Code wie irgendwo sonst, wobei meine dynamische Beschreibung als "" angegeben wirddata-text Eigenschaft, und rufen Sie dann antwttr.widgets.load(); um den Knopf zu aktivieren.

Der Facebook Share Button ist das ProblemIch kann keine hinzufügen"normal" Share-Button - es wird nur eine Eigenschaft benötigt, die URL (ändert sich nicht pro Quiz-Ergebnis).Ich kann die generischen Open Graph-Tags, die auf der Seite vorhanden sind, auch nicht ändern - obwohl jQuery dies kann, bedeutet das Zwischenspeichern von Facebook, dass es sinnlos ist. Außerdem sollten die allgemeinen Freigabetasten (FB / Twitter / G +) auf jeder Seite unberührt bleiben und immer die Standard-OG-Tags verwenden.

Ich erstelle also einen Link und hänge ihn mit jQuery an die Seite an. Anschließend lege ich mit jQuery die Klick-Trigger-Aktion fest. Die App-ID wurde bereits erfolgreich mit dem Codeblock FB.init () festgelegt. Dies sind die Methoden, die ich für den Klick-Trigger ausprobiert habe:

Versuch 1:FB.ui({ method: "feed" })

FB.ui({
  method: 'feed',
  name: "I got "+response.country+"! Which European are you destined to date?",
  link: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  picture: response.image,
  description: response.body
});

Die Grundlagen der Arbeit - Bild, Titel und Beschreibung stimmen mit dem Quizergebnis überein (in diesem Fall "Französisch") -ABER Das Dialogfeld "Feed" ist nicht nur veraltet, sondern auch dem Dialogfeld "Teilen" weit unterlegen (siehe unten). Ich würde das gerne richtig machen.

Versuch 2:FB.ui({ method: "share" })

FB.ui({
  method: 'share',
  href: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  name: "I got "+response.country+"! Which European are you destined to date?",
  picture: response.image,
  description: response.body
});

DasDialog freigeben ist aktuell, und Sie können die Verbesserungen in Design und Funktionalität im Vergleich zum veralteten Feed-Dialogfeld sehen. Aber in dieser grundlegenden Verwendung ist es wie ein normaler Freigabeknopf, und trotz meiner Versuche, zusätzliche Informationen bereitzustellen, wird nur die URL verwendet und die generischen Open Graph-Tags auf der Seite liefern den Inhalt.

Versuch 3:FB.ui({ method: "share_open_graph" })

Dies scheint die zu sein, die ich verwenden muss. Ich muss nur herausfinden, wie! * Ich habe meiner App "Quiz" als Objekttyp hinzugefügt (Name: matchadviceuk). * Ich habe meiner App hinzugefügt: "Ein Quiz teilen" als Story-Typ basierend auf der Option "Quiz" und dem vorhandenen Aktionstyp "Teilen". * Ich habe hinzugefügt: das entsprechende Open Graphprefix="" Inhalt zu meinem<head> Erklärung

Die Klickfunktion auf den Button sieht nun so aus:

FB.ui({
  method: 'share_open_graph',
  action_type: 'matchadviceuk:share',
  action_properties: JSON.stringify({
    type: 'matchadviceuk:quiz',
    url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
    title: "I got "+response.country+"! Which European are you destined to date?",
    description: response.body,
    image: response.image
  })
});

Beim Klicken erzeugt dies:

Also habe ich mich veränderturl im obigen Code zuquiz und ich bekomme:

Das macht langsam Sinn - die Seite selbst ist ein Artikel, und nein, das kann sich nicht ändern. Vielleicht möchte ich diesen neuen "Quiz" -Objekttyp überhaupt nicht verwenden. Aber wenn ich zum Block oben zurück gehe und mich nur umziehetype zumatchadviceuk:articleWir bekommen den gleichen Fehler, wenn "Quiz" nicht definiert wird - an dieser Stelle macht dies überhaupt keinen Sinn, da der Objekttyp "Quiz" jetzt nirgendwo im Code erwähnt wird! (Möglicherweise Opfer von Facebook-Caching, was eine zusätzliche Komplikation darstellt.)

Und hier stecke ich über jede weitere Idee fest. Ich habe sogar versucht zu entfernentype undurl Attribute ganz in der Hoffnung, Facebook könnte sein eigenes Ding tun, aber nein.

Ich bin immer noch nicht davon überzeugt, dass meine Bemühungen, Objekttyp und Story-Typ zu meiner App hinzuzufügen, überhaupt notwendig waren, aber so oder so kann ich das einfach nicht zum Laufen bringen. Bitte helfen Sie!

Vergleichen mit:

Es ist Buzzfeed, der diese Art von Quiz oft macht, und sie machen tatsächlich einen Mistjob, wenn sie ein Facebook benutzensharer.php Verknüpfung mit dem dynamischen Inhalt, der als Teil der URL-Abfragezeichenfolge bereitgestellt wird, und manuelles Öffnen in einem neuen Fenster. Es ist hässlich, nicht "offiziell", nicht so benutzerfreundlich, und ich wage zu sagen, dass es möglicherweise Probleme beim Browsen auf Handys und Tablets gibt. Aus all diesen Gründen würde ich es vorziehen, es mit FB.ui richtig zu machen - nicht nur das, sondern sharer.php ist in einem ständigen Fluss von "ist es oder ist es nicht veraltet?" und sogar die offizielle FB-Entwicklerlinie (kann keinen Link hinzufügen, da kein Ruf besteht) - ist, dass es nicht lange so funktioniert.

Forschung:

Ich habe Tonnen von Googeln und Stack Overflow-Suche durchgeführt. Nichts passt ganz zu meinem Problem (was mich überrascht, aber ich habe zusätzliche Einschränkungen, wie die Notwendigkeit, diese gesamte Verarbeitung dynamisch ohne separate PHP-infundierte Ergebnisseiten durchzuführen).Diese Frage ist das einzige Ergebnis auf SO für "share_open_graph" und erstellt ein Objekt mit FB.api und veröffentlicht es dann mit FB.ui - hört sich gut an, abgesehen davon, dass dies mehrere Beiträge zum Feed des Benutzers erzeugt, was zu einem Verbot von Facebook führen würde. Dieser Benutzer konnte sich auf PHP verlassen, wo ich reine clientseitige Interaktivität benötige.