Posting on a Facebook Page Using Angular/nodeJS with Facebook Graph Api

So, I’ve had this task to publish a post on a Facebook page from my Angular/NodeJs application.

I had a lot of difficulties and I couldn’t find a lot of help online. But after four days of intense researching, asking around and publishing in forums, I have managed to make it work.

So, this is a detailed Tutorial on how to post on a Facebook page using Angular/nodeJS with Facebook Graph Api.

I AM USING: angular 10 / npm 6

Part One: Create an app in Facebook Developer

Go to https://developers.facebook.com/ , click on my apps and then create App

https://developers.facebook.com/

Then, when you go to Settings -> Basic you’ll find your app id and secret, remember these ! You’ll need them later.

Part Two: The Front-End with Angular

Installing angularx-social-login

npm install angularx-social-login

In app.module.ts

import { SocialLoginModule, SocialAuthServiceConfig, FacebookLoginProvider } from 'angularx-social-login';
...
providers: [
{
   provide: 'SocialAuthServiceConfig',
     useValue: {
        autoLogin: false,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(APP-ID),
          },
       ],
    } as SocialAuthServiceConfig,
}
],

In our post.component.ts :

First of all, we import what we’ll be needing:

import { SocialAuthService } from 'angularx-social-login';

import { FacebookLoginProvider } from 'angularx-social-login';

import { SocialUser } from 'angularx-social-login';

This is the function that’ll be called when clicking on the publish post button:

publishPost(): void {

  const fbLoginOptions = {

    scope: 'pages_manage_posts, publish_to_groups, pages_read_engagement, pages_messaging,pages_messaging_subscriptions,email,pages_show_list'

  };

  this.authService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);

}

the scopes are the permission you’ll be asking for, in order to publish in a page, you’ll need pages_manage_posts and pages_read_engagement permissions.

When you’re in development mode, you get all the permissions you need, but once you’re in production you’ll have to verify your app in Facebook developers in order to get them.

Next step, you’ll be subscribing to authState:

this.authService.authState.subscribe((user) => {

  this.user = user;

  this.httpClient.post('http://localhost:3000/social-media', {token: this.user.authToken, userId: this.user.id})

    .subscribe(response => {});

  console.log(this.user);

  this.loggedIn = (user != null);

});

And now, direction back end, to the third and last part.

Part Three: Back-End with NodeJs/Express

First, we install fb package in order to link to the Facebook Graph Api

npm install fb

And this is how you call Facebook Graph Api

const express = require('express');

const router = express.Router();

var Facebook = require('fb').Facebook;

var FB = new Facebook({

  appID: APP-ID,

  secret: APP-SECRET

});

router.post('', (req, res, next) => {

  let token = req.body.token;

  let userId = req.body.userId;

  FB.setAccessToken(token);

  FB.api('/me/accounts', function (res) {

    if(!res || res.error) {

      console.log('there is an error');

      console.log(!res ? 'error occurred' : res.error);

      return;

    }

    console.log('this is the result ' + JSON.stringify(res));

    FB.api('/' + res.data[0].id + '/feed', 'post', { message: 'hello world !' }, function (res) {

      if(!res || res.error) {

        console.log('there is an error');

        console.log(!res ? 'error occurred' : res.error);

        return;

      }

    });

  });

});



module.exports = router;

CONCLUSION

This is basically it; I hope I did not forget any detail and deeply wish that this will help someone someday.

Please correct me if I did something wrong and I am happy to hear your feedback.