web-dev-qa-db-ja.com

「share_open_graph」Facebook UIを使用して、クイズ結果の動的共有ダイアログを作成する

概要：私の問題はFB.uiを取得することですshare_open_graphメソッド。ページでのユーザーのアクションに基づいて、さまざまなタイトル、説明、画像を含むカスタマイズされた共有ダイアログを作成します。

質問が私の最初であり、評判がなかったため、多数のリンクが削除されましたが、（私に賛成票をくれたすべての人に感謝します）元々欠けていたスクリーンショットを救うことができました。

EDIT：共有ダイアログを含む通常のポップアップウィンドウを使用するだけになりました。理想的ではありませんが、少なくとも確実に動作します。ウェブをよく見ると、多くの有名な立派なサイトがまだこのようなポップアップ共有を使用していることがわかったので、この場合、レガシーソリューションを使用する利点は適切なソリューションを見つけるための広範な作業を上回りました https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 URLクエリ経由で提供される動的な詳細で、少なくともわずかに最新のもの私がもともとBuzzfeedで見ていたsharer.phpの使用法。

私のページ：

クイズがあります。 10個の質問、それぞれに5つの答え、5つのオプションの1つを「結果」として割り当てる結果が生成されます。クイズがうまく機能する限りはすべて。結果は、Ajax/jQueryを介してクイズが完了すると取り込まれます。これは、将来、他の人がクイズの作成を管理するためのPHPベースのフロントエンドを構築できるようにするためです。 私は喜んで以下のコードでページURLを提供しますが、申し訳ありません-この問題を解決するまで公開できませんので、アクセスできません！

私の目標：

クイズの結果が表示される場合、ユーザーのクイズの結果に適した画像、タイトル、および説明を含めるようにカスタマイズされたFacebookおよびTwitter共有ボタンも必要です。

Twitterボタンは簡単に動的に実行できました

JQueryを使用して、動的な説明を_data-text_プロパティとして指定して、どこでも同じHTMLを使用してTwitterボタンを作成し、twttr.widgets.load();を呼び出してボタンをアクティブにします。

Facebookの[共有]ボタンが問題です

  • "normal"共有ボタンを追加できません-1つのプロパティ、URLのみが必要です（クイズの結果ごとに変更されません）。
  • また、ページに存在する一般的なOpen Graphタグを変更することもできません。jQueryはこれを実行できますが、Facebookのキャッシングは意味がありません。さらに、すべてのページの汎用共有ボタン（FB/Twitter/G +）は影響を受けず、常にデフォルトのOGタグを共有する必要があります。

だから私がやっていることは、リンクを作成してjQueryでページに追加し、jQueryでクリックトリガーアクションを設定することです。アプリIDは、コードのFB.init（）ブロックで既に正常に設定されています。これらは、クリックトリガーに対して試した方法です。

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

基本的な作業-写真、タイトル、説明はすべてクイズの結果に沿っています（この場合は「フランス語」）-[〜＃〜] but [〜＃〜]フィードダイアログは非推奨であるだけでなく、[共有]ダイアログよりも大幅に劣っています（以下を参照）。これを適切に行いたいです。

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

共有ダイアログ は現在のものであり、廃止されたフィードダイアログと比較してデザインと機能が改善されていることがわかります。しかし、この基本的な使用法では、通常の共有ボタンに似ています。追加情報を提供しようとしても、URLのみが使用され、ページの汎用Open Graphタグがコンテンツを提供します。

試行3：FB.ui({ method: "share_open_graph" })

これは私が使用しなければならないもののようです。どのように解決する必要があるのですか！ *「クイズ」をオブジェクトタイプとしてアプリに追加しました（名前：matchadviceuk）。 *「クイズ」オプションと既存の「共有」アクションタイプに基づいて、「クイズを共有」をストーリータイプとしてアプリに追加しました。 *追加しました：適切なOpen Graph _prefix=""_コンテンツを_<head>_宣言に追加しました

ボタンのクリック機能は次のようになります。

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

クリックすると、以下が生成されます。

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

そこで、上記のコードのurlをquizに変更すると、次のようになります。

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

これは理にかなっています-ページ自体IS記事であり、それは変更できません。したがって、この新しい「クイズ」オブジェクトタイプはまったく使用したくないかもしれません。しかし、上記のブロックに戻ってtypeを_matchadviceuk:article_に変更すると、「クイズ」が定義されていないという同じエラーが発生します。この時点で、「クイズ」 「オブジェクトタイプはコード内のどこにも記載されていません！（Facebookキャッシングの犠牲になる可能性があります。これはさらに複雑です。）

そして、これは私がさらなるアイデアを超えて立ち往生しているところです。 Facebookが独自の機能を実行できることを期待して、typeおよびurl属性を完全に削除しようとしましたが、できません。

オブジェクトタイプとストーリータイプをアプリに追加する努力が必要であるとはまだ確信していませんが、いずれにしても、これを機能させることはできません。助けてください！

と比較：

これらのタイプのクイズを頻繁に行うのはBuzzfeedであり、実際には、URLクエリ文字列の一部として提供される動的コンテンツでFacebooksharer.phpリンクを使用するという厄介な仕事をします、手動で新しいウィンドウで開くように強制します。それは "く、「公式」ではなく、ユーザーフレンドリーではありません。そして、モバイルとタブレットのブラウジングで問題を起こす可能性があると思います。これらすべての理由から、私はFB.uiを使用して適切に行うことを望んでいます。それだけでなく、sharer.phpには「それは非推奨ですか？」という絶え間ない流れがあります。公式FB開発者ライン（評判がないためリンクを追加できない）でさえ、長い間このように機能しないということです。

研究：

大量のグーグル検索とスタックオーバーフロー検索を行いました。私の問題に完全に一致するものはありません（驚いたことですが、PHPを注入した結果ページを別にせずにこの処理をすべて動的に実行する必要があるなど、追加の制限があります）。 この質問 は、SO for "share_open_graph"の唯一の結果であり、FB.apiでオブジェクトを作成し、FB.uiでパブリッシュします。これにより、ユーザーのフィードに複数の投稿が作成され、Facebookからのアクセスが禁止されます。このユーザーは、PHP純粋なクライアント側の対話性が必要な場所に依存できました。

jqueryfacebookfacebook-graph-apifacebook-javascript-sdkfb.ui
47
Matt Morrison

share_open_graphこのようなオブジェクトを持つメソッド、

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

私は同様の問題を抱えていましたが、あなたの詳細な質問は解決策を思いつくのに大いに役立ちました。

FBのアプリ設定でカスタムアクションとアクションに関連するカスタムオブジェクトを作成することをお勧めします。あなたの場合、アクションは「共有」であり、オブジェクトは「クイズ」です。 「John DoeがSome-awesome-appでクイズを共有しました」などのストーリーが必要です。

JSコードでは、基本的にFacebookにこのストーリーを伝えています。

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

FBには、ストーリーに「クイズ」オブジェクトがあり、「共有」アクションがあることを既に伝えています。最初に、この「クイズ」オブジェクトの場所を伝えます。

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

これで、FBはこの「クイズ」オブジェクトの場所を認識します。次のステップでは、その場所に「クイズ」オブジェクトを配置します。そのURLでHTMLまたはPHPページを作成できます。これは、追加のメタタグを備えた通常のHTMLページです。これらのメタタグにより、ページが「クイズ」オブジェクトとして認識されます。サンプルのHTMLコードとコメントです：

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

これで、そのURLのHTML（またはPHP）ページがFBによって「クイズ」オブジェクトとして認識されます。

私の場合、ダイアログを共有するためにいくつかの変数を渡す必要がありました。したがって、PHPページをオブジェクトとして使用しました。JSからインラインクエリを使用して呼び出しを行い、PHPのGETパラメーターを読み取ります。JSは次のようになります。

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

そしてPHPファイルは次のようなものです

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

これがお役に立てば幸いです。乾杯！

3
Doruk Eker

プロパティ 'quiz'にはog：type 'matchadviceuk：quiz'のオブジェクトが必要です。 "これは理にかなっています-ページ自体IS記事

あなたはここにいた。その後、「action_properties」の「url」パラメーターで参照して追加したページテンプレートに移動しました

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

あなたの場合、それは

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

以上で、FB.uiを介した共有が機能します

もちろん、開発中のサーバーには外部httpアドレスが必要です（このような場合は http://ngrok.com を使用します）

編集：とにかく、実際にaction_propertiesのタイトル、説明、画像パラメーターとは思えないので、ページのog：title、og：description、og：imageメタタグに特定のデータを入力するために、URLに追加のパラメーターを追加する必要があります仕事、例えば.

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

オブジェクトは、オブジェクトでなければなりません

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

私はまったく同じ問題を抱えています。 FB.uiの代わりにFB.apiを使用しなければならなくなった

ここに例があり、og：likesアクションの投稿に使用されています： https://developers.facebook.com/docs/opengraph/getting-started

独自のカスタムストーリーを投稿するには、アクションとオブジェクトをカスタマイズするだけです。

私にとってこれの問題は、従来の共有ボタンがどのように機能するかのように、ポップアップウィンドウで最初にプロンプ​​トを表示せずに投稿することです。

0
user3634146