react-native - react-native-fbsdk メッセージの投稿 Facebook グラフ API FBGraphRequest

Question

ここで FBSDK 共有のドキュメントを調べましたが、FBShareDialogを使用して単純なメッセージ (リンク、写真、ビデオではない) をタイムラインに投稿できる単純な例が見つかりません。基本的にこれを行うWebリクエストを実行できることを知っています：

POST graph.facebook.com/me/feed?
message="My new post message!"&amp;
access_token={your-access-token}

Graph API docs で説明されているように、繰り返しになりますが、ShareDialog を使用して一貫した UI を実現したいと考えています。

どうすればいいのですか？ありがとうございました。

score 2 · Accepted Answer

注: すべてのユーザーの小文字の「投稿」は、ユーザーのウォールに投稿する行為を指します。すべて大文字の「POST」は、HTTP リクエストメソッドを表します。

Facebookの公式反応ネイティブSDKはここにありますhttps://developers.facebook.com/docs/react-native/

3 つの異なるコンポーネントがあることに注意してください。

ログイン
共有
グラフ API。

最初の 2 つは自明であり、例はサイトで提供されています。

Graph API は、Facebook のソーシャルグラフにデータを出し入れするための主要な方法です。これは、データのクエリ、新しいストーリーの投稿、写真のアップロード、およびアプリが実行する必要があるその他のさまざまなタスクに使用される低レベルの HTTP ベースの API です。

Facebook Graph API は、HTTP メソッド (GET、POST、DELETE など) を介して fb データと対話できるようにする単なる REST API です。react-native-fbsdk はその上にレイヤーを重ねるだけで、これらのリクエストを簡単に行うことができます。

ユーザー時間への転記には 2 つの前提条件があります。

fb アプリが正しくセットアップされていることを確認する: https://developers.facebook.com/apps/
publish_actions 権限を持つユーザーアクセストークンを取得すると、新しい投稿を公開できます。

これらを取得したら、react ネイティブ GRAPH API を使用してメッセージを投稿できます。

しかし、最初に、RN-SDK ではなく HTTP を使用して単純にこれを行う方法を見てみましょう。

https://developers.facebook.com/docs/graph-api/reference/v2.7/user/feed

POST /v2.7/me/feed HTTP/1.1
Host: graph.facebook.com
message=This+is+a+test+message

これによると、パラメーターとして定義されたメッセージを使用して、場所/v2.7/me/feedに POST 要求を行う必要があります。

最後に、react native SDK () を使用してユーザーのタイムラインに投稿する方法について質問にお答えします。rnsdk ドキュメントを見てみましょう: https://developers.facebook.com/docs/react-native/graph-api

GraphRequest(リクエストを作成するため) とGraphRequestManager(リクエストを送信するため) の2 つのオブジェクトが必要なようです。

const FBSDK = require('react-native-fbsdk');
const {
  FBGraphRequest,
  FBGraphRequestManager,
} = FBSDK;

これら 2 つのオブジェクトを使用してユーザーウォールに投稿する方法の例が提供されていないため、ソースコードを調べる必要があります。

https://github.com/facebook/react-native-fbsdk/blob/master/js/FBGraphRequest.js

コンストラクターから、次の 3 つのパラメーターを受け取ることがわかります。

  /**
   * Constructs a new Graph API request.
   */
  constructor(
    graphPath: string,
    config: ?GraphRequestConfig,
    callback: ?GraphRequestCallback,
  )

graphPath = "/me/feed"Graph API のドキュメントからわかります。コールバックは、リクエストが返されたときに呼び出される単なる関数になります。これにより、ソースで次のように定義されている構成オブジェクトが残ります。

type GraphRequestConfig = {
  /**
   * The httpMethod to use for the request, for example "GET" or "POST".
   */
  httpMethod?: string,
  /**
   * The Graph API version to use (e.g., "v2.0")
   */
  version?: string,
  /**
   * The request parameters.
   */
  parameters?: GraphRequestParameters,
  /**
   * The access token used by the request.
   */
  accessToken?: string
};

したがって、config オブジェクトは次のようになります。

const postRequestParams = {
            fields: {
                message: 'Hello World!'
            }
}

const postRequestConfig = {
            httpMethod: 'POST',
            version: 'v2.7',
            parameters: postRequestParams,
            accessToken: token.toString() //pre-obtained access token
}

全体的に言えば：

const FBSDK = require('react-native-fbsdk');
const {
  FBGraphRequest,
  FBGraphRequestManager,
} = FBSDK;

_responseInfoCallback(error: ?Object, result: ?Object) {
  if (error) {
    alert('Error fetching data: ' + error.toString());
  } else {
    alert('Success fetching data: ' + result.toString());
  }
}

const postRequestParams = {
  fields: {
         message: 'Hello World!'
      }
}

const postRequestConfig = {
  httpMethod: 'POST',
  version: 'v2.7',
  parameters: postRequestParams,
  accessToken: token.toString()
}

const infoRequest = new GraphRequest(
  '/me/feed',
  postRequestConfig,
  this._responseInfoCallback,
);

new FBGraphRequestManager().addRequest(infoRequest).start();

score 2 · Accepted Answer

上記のコードでreact native 0.43でFacebookに投稿しましたが、変更しました postRequestParams

const postRequestParams = {
  message: {
         string: 'Hello World!'
      }
}

これが私のすべてです。

const FBSDK = require('react-native-fbsdk');
const {
        GraphRequest,
        GraphRequestManager,
        AccessToken
} = FBSDK;
class PostScreen extends React.Component {
    postToFacebook = () => {
            AccessToken.getCurrentAccessToken().then(
                (data) => {
                    let tempAccesstoken = data.accessToken;
                    const _responseInfoCallback = (error, result) => {
                        console.log(result);
                    }

                    const postRequestParams = {
                        message: {
                            string: "Hello world!"
                        }
                    }

                    const postRequestConfig = {
                        httpMethod: "POST",
                        version: "v2.9",
                        parameters: postRequestParams,
                        accessToken: tempAccesstoken
                    }

                    console.log(postRequestConfig);

                    const infoRequest = new GraphRequest(
                        "/me/feed",
                        postRequestConfig,
                        _responseInfoCallback,
                    );
                    console.log("infoRequest");
                    console.log(infoRequest);

                    new GraphRequestManager().addRequest(infoRequest).start();
                });
        }
}

react-native - react-native-fbsdk メッセージの投稿 Facebook グラフ API FBGraphRequest

2 に答える 2

Related

Reference