Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – react-native-fbsdk post message facebook Graph API FBGraphRequest

I went through FBSDK Sharing documentation here, but I can’t find a simple example where one can just post a simple message to timeline (not a link, not a photo, not a video) using FBShareDialog.
I know I can do it running a web request which essentially does this:

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

as described in Graph API docs, but again – I want to use ShareDialog to have consistent UI.

How do I do it? Thank you.

Tags:

2

Answers


  1. 0

    Note: All user lower case “post” refers to the act of posting to a users wall. All upper case “POST” refers to HTTP request method.

    Facebooks offical react native SDK is located here https://developers.facebook.com/docs/react-native/

    Note there are three different component:

    1. Login
    2. Sharing
    3. Graph API.

    The first two are self explanatory and the examples are provided on the site.

    The Graph API is the primary way to get data in and out of Facebook’s
    social graph. It’s a low-level HTTP-based API that is used to query
    data, post new stories, upload photos and a variety of other tasks
    that an app might need to do.

    Facebook Graph API is just a REST API which lets you interact with the fb data via HTTP methods( GET, POST, DELETE etc). react-native-fbsdk just layer on top of it which makes it easier to make these request.

    There are two prerequisites to posting to a user time.

    1. Ensuring your fb app is correctly setup: https://developers.facebook.com/apps/
    2. Obtaining a user access token with publish_actions permission can be used to publish new posts.

    Once you have obtained these you can post a message using the react native GRAPH API.

    But first lets have a look at how you would do this simply using HTTP rather then the RN-SDK:

    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

    According to this we need to make a POST request to the location /v2.7/me/feed with the message defined as a paramater.

    To finally answer your question how to we post to the users timeline using the react native sdk (). Lets have a look at the rnsdk docs: https://developers.facebook.com/docs/react-native/graph-api

    It seems like we need two objects GraphRequest (to create a request) and GraphRequestManager (to send the request)

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

    Since there is no example provided on how to post to the user wall using these two objects we need to look into the source code:

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

    We can see from the constructor it takes three parameters:

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

    We know the graphPath = "/me/feed" from the Graph API docs. The callback will just be a function called upon return of the request. This leaves us with the config object, which is defined in the source as:

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

    So our config object will look something like this:

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

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

    Putting it altogether:

    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();
    Login or Signup to reply.
  2. 0

    I posted to facebook with react native 0.43 by above code but i changed on postRequestParams

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

    Here is all of me.

    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();
                });
        }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search