1

ここで問題が発生しました。Yahoo！をご存知ですか。ニュース？そのようなウィジェットを作りたいです（記事を読むとFacebookに公開されます）。

FacebookアプリとOpenGraphを作成したばかりですが、ウェブサイトに挿入する方法がわかりません。Wordpressを使用していて、Googleで検索していましたが、まだわかりません。お役に立てば幸いです。自分。

私はまだ理解していません。アプリとopengraphを作成し、ヘッダーと関数にopengraphタグを挿入しましたが、投稿ページを開こうとすると「エラーが発生しました」と表示されます。手伝って頂けますか？

4

1 に答える 1

5

ドキュメントを読んで、概念がどのように機能するかを理解する必要があります

  1. ユーザーは、記事を読むなど、アプリでアクションを実行します
  2. アプリは、GraphAPIエンドポイント/me / action：object=Object_URLへのHTTPPOSTを呼び出します
  3. Facebookは、オブジェクトのWebページ（WordPressページ）をクロールし、そのメタタグを読み取り、アクションを介してオブジェクトをユーザーに接続します。

あなたの行動はnews.readsなので、次のように電話します

POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]

この作業を行うreadには、アプリの設定でビルドされたアクションタイプを設定する必要があります。https://developers.facebook.com/apps/YOUR_APP_ID/opengraph

news.read in app settings

article次に、オブジェクトセットのタイプが必要です。

記事オブジェクト

次に、WordPressブログでオブジェクトのURLを設定する必要があります。これらは、メタタグを挿入することで行われます。

<html>
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# 
                  article: http://ogp.me/ns/article#">
     <meta property="fb:app_id"               content="YOUR_APP_ID"> 
     <meta property="og:type"                 content="article"> 
     <meta property="og:url"                  content="URL of this object">
     <meta property="og:site_name"            content="Name of site hosting article">
     <meta property="og:image"                content="URL to an image">
     <meta property="og:title"                content="Name of article">
     <meta property="og:description"          content="Description of object"> 
     <meta property="article:published_time"  content="DateTime"> 
     <meta property="article:modified_time"   content="DateTime"> 
     <meta property="article:expiration_time" content="DateTime">
     <meta property="article:author"          content="URL to Author object">
     <meta property="article:section"         content="Section of article">
     <meta property="article:tag"             content="Keyword">
    </head>
<body>
    <!-- main article body -->
</body>
</html>

したがって、テーマの設定に基づいて、これらをheader.phpまたはindex.phpファイルに配置します。次に、関数を挿入する必要があります。たとえば、テーマの設定に基づいてifステートメントを挿入する必要があります。

投稿のURL

<meta property="og:url" content="<?php the_permalink() ?>"/>

単一の投稿タイトル

<meta property="og:title" content="<?php single_post_title(''); ?>" />

次に、このURLをリントして、正しくセットアップされていることを確認する必要があります。これは、次の方法で実行できます。

http://developers.facebook.com/tools/debug

メタタグが適切に設定されていることを確認したら、前述のようにアクションをテストする必要があります

POST https://graph.facebook.com/me/news.reads?article=[article object URL in your Wordpress Blog]

すべてが設定されている場合、これはアクションのIDを返す必要があります。

次に、JSSDKを使用して認証のロジックを実装する必要があります

<div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '[YOUR_APP_ID]', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });
    };

    // Load the SDK Asynchronously
    (function(d){
      var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js";
      d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
  </script>

およびログインボタンプラグイン

<fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions"> </fb:login-button>

関数.phpファイル内、またはsingle.phpページとindex.phpページ内のいずれか

そこから、ページの読み込み時に以下のアクションを呼び出す関数を作成する必要があります

<script type="text/javascript">
  function readArticle()
  {
      FB.api(
        '/me/news.reads',
        'post',
        { article: 'http://yourwordpress.com/site/' },
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Article read was successful! Action ID: ' + response.id);
           }
        });
  }
  </script>
于 2012-05-30T17:13:05.097 に答える