wake-up-neo.com

Verwenden der Facebook-Benutzeroberfläche "share_open_graph" zum Erstellen eines dynamischen Freigabedialogs für die Quizergebnisse

Zusammenfassung: Mein Problem besteht darin, FB.ui über die share_open_graph - Methode, um ein benutzerdefiniertes Dialogfeld für die Freigabe zu erstellen, das verschiedene 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: Ich musste nur ein reguläres Popup-Fenster mit einem Freigabedialog 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. Daher stellte ich in diesem Fall fest, dass die Vorteile einer älteren Lösung die umfangreiche Arbeit bei der Suche nach einer geeigneten Lösung überwogen https://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 sharer.php Nutzung Ich habe ursprünglich auf Buzzfeed gesucht.


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 eine Twitter-Schaltfläche mit demselben HTML-Code wie irgendwo sonst, wobei meine dynamische Beschreibung als die Eigenschaft data-text Angegeben wird, und rufe dann twttr.widgets.load(); auf, um die Schaltfläche zu aktivieren.

Der Facebook Share Button ist das Problem

  • Ich kann keinen "normal" Share-Button hinzufügen - es wird nur eine Eigenschaft verwendet, 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
});

screenshot showing the correct details appearing but in an old-style half-working and deprecated Feed dialog

Die Grundlagen der Arbeit - Bild, Titel und Beschreibung stimmen alle mit dem Quizergebnis überein (in diesem Fall "Französisch") - [~ # ~] aber [~ # ~] Der Feed-Dialog ist nicht nur veraltet, sondern auch dem Share-Dialog 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
});

screenshot showing correct modern share dialog but with generic OG tags and not my custom details

Das Freigabe-Dialogfeld 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: "Quiz teilen" als Story-Typ basierend auf der Option "Quiz" und dem vorhandenen Aktionstyp "Teilen". * Ich habe meiner prefix="" - Erklärung den entsprechenden Open Graph <head> - Inhalt hinzugefügt

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:

screenshot showing error box saying "The action you're trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: quiz."

Also habe ich url im obigen Code in quiz geändert und bekomme:

screenshot showing error box saying "Object at URL <url> has og:type of 'article'. The property 'quiz' requires an object of og:type 'matchadviceuk:quiz'"

Das macht langsam Sinn - die Seite selbst IS 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 obigen Block zurückkehre und nur type in matchadviceuk:article Ändere, wird derselbe Fehler angezeigt, dass "Quiz" nicht definiert ist. "Quiz" wird jetzt nirgends im Code erwähnt! (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, die Attribute type und url vollständig zu entfernen, in der Hoffnung, Facebook könnte sein eigenes Ding machen, 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 häufig durchführt, und sie machen tatsächlich einen Ausweichjob, indem sie einen Facebook sharer.php - Link mit dem dynamischen Inhalt verwenden, der als Teil der URL-Abfragezeichenfolge bereitgestellt wird, und Forcen es manuell in einem neuen Fenster zu öffnen. 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-Entwickler-Linie (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 dann mit FB.ui - hört sich gut an, abgesehen von der Tatsache, dass dies zu mehreren Posts führt der Feed des Benutzers, 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.

47
Matt Morrison

Ich habe getan mit share_open_graph Methode mit Objekt wie dieses ,

FB.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    action_properties: JSON.stringify({
        object : {
           'og:url': 'http://astahdziq.in/', // your url to share
           'og:title': 'Here my custom title',
           'og:description': 'here custom description',
           'og:image': 'http://example.com/link/to/your/image.jpg'
        }
    })
    },
    // callback
    function(response) {
    if (response && !response.error_message) {
        // then get post content
        alert('successfully posted. Status id : '+response.post_id);
    } else {
        alert('Something went error.');
    }
});
18
Lafif Astahdziq

Ich hatte ein ähnliches Problem und Ihre detaillierte Frage hat mir sehr geholfen, eine Lösung zu finden.

Wie Sie vorschlagen, erstellen Sie die benutzerdefinierte Aktion und das benutzerdefinierte Objekt in Bezug auf die Aktion in den App-Einstellungen in FB. In Ihrem Fall lautet die Aktion "Teilen" und das Objekt "Quiz". Und du solltest eine Geschichte wie "John Doe hat ein Quiz über die Some-awesome-App geteilt" haben.

In deinem JS-Code erzählst du Facebook diese Geschichte.

FB.ui({
  method: 'share_open_graph', 
  action_type: 'matchadviceuk:share',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    // The action properties
  })
});

Sie haben FB bereits mitgeteilt, dass Ihre Geschichte das Objekt "Quiz" enthält, mit der Aktion "Teilen". Also sagst du zuerst, wo sich dieses "Quiz" -Objekt befindet.

FB.ui({
  method: 'share_open_graph', 
  action_type: 'matchadviceuk:share',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    quiz: 'http://example.com/quizItem' // customObjectProperties (found when editing your object in the fb dev portal, looks like `og:quiz`). Note: from what I can tell, every object with name `myObject` will have a `og:myObject` property.
  })
});

Jetzt weiß FB, wo sich dieses "Quiz" -Objekt befindet. Der nächste Schritt besteht darin, ein "Quiz" -Objekt an diesem Ort zu haben. Sie können unter dieser URL eine HTML- oder PHP Seite erstellen. Dies ist eine normale HTML-Seite mit einigen zusätzlichen Meta-Tags. Mit diesen Meta-Tags wird Ihre Seite als "Quiz" -Objekt erkannt ist ein Beispiel-HTML-Code und Kommentare:

<html>
    <head>
        <meta property="og:type" content="quiz">
        <!-- this tells that the page is a quiz -->

        <meta property="og:title" content="Some page title" >
        <!-- your page must have a title for sharing -->

        <!-- you can also use og:description and og:image if you want to change more but they are optional. Again you can find these when you edit your custom object -->
        ...

Nun wird die HTML- (oder PHP-) Seite unter dieser URL vom FB als "Quiz" -Objekt erkannt.

In meinem Fall musste ich auch einige Variablen übergeben, um den Dialog zu teilen. Daher habe ich eine PHP page als Objekt verwendet. Von JS aus rufe ich mit einer Inline-Abfrage auf und lese die GET-Parameter in meinem PHP.

FB.ui({
  method: 'share_open_graph', 
  action_type: 'matchadviceuk:share',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    quiz: 'http://example.com/quizItem?country=<populated country name>'
  })
});

Und PHP Datei ist so etwas wie

<?php
    $country = $_GET['country'];
?>
<html>
    <head>
        <meta property="og:type" content="quiz">
        <meta property="og:title" content="Quiz from <?php echo $country; ?>" >
        ...

Ich hoffe das hilft. Prost!

3
Doruk Eker

Die Eigenschaft 'quiz' erfordert ein Objekt von og: type 'matchadviceuk: quiz'. "Dies macht langsam Sinn - die Seite selbst IS ein Artikel

Sie waren hier richtig. Danach ging ich zur Seitenvorlage, die im 'url'-Parameter von' action_properties 'referenziert und hinzugefügt wurde

<meta property="og:type" content="myapp:mytype" />

In deinem Fall wäre es

<meta property="og:type" content="matchadviceuk:quiz" /> 

Das ist alles, das Teilen über FB.ui funktioniert

Natürlich sollte Ihr Entwicklungsserver eine externe http-Adresse haben (ich benutze http://ngrok.com für solche Dinge)

Bearbeiten: Auf jeden Fall sollten Sie der URL zusätzliche Parameter hinzufügen, anhand derer bestimmte Daten in og: title, og: description, og: image-Metatags auf der Seite ausgefüllt werden, da es den Anschein hat, als ob diese Parameter für Titel, Beschreibung und Bild in action_properties nicht vorhanden sind Arbeit, zB.

...
action_properties: JSON.stringify({
    ...
    url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date?" + response.country_id,
    ...
3

das Objekt muss ein Objekt sein

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

Ich habe genau das gleiche Problem. Letztendlich musste FB.api anstelle von FB.ui verwendet werden

Es gibt hier ein Beispiel, in dem ein og: likes-Vorgang gepostet wird: https://developers.facebook.com/docs/opengraph/getting-started

Sie müssen nur die Aktion und das Objekt anpassen, um Ihre eigene benutzerdefinierte Story zu veröffentlichen.

Für mich besteht das Problem darin, dass Beiträge ohne vorherige Aufforderung in einem Popup-Fenster angezeigt werden, wie es bei herkömmlichen Schaltflächen zum Freigeben der Inhalte der Fall ist.

0
user3634146