Storing facebook lead data in our database in real time using ReactJS, MeteorJS and fb’s Javascript SDK.

Hi Everyone,

For advertiser most scary thing with facebook ad’s leads is that the lead data is only available for two months. After that you cannot see your lead’s data on facebook dashboard. To handle this advertiser keep downloading csv file and merging them every month which is painful.

So here I am going to implement simple portal from where the Ad’s lead data is going to store in our database in real time. We implement this by following below steps:

  1. Create a facebook app from facebook’s developer account.
  2. Setup webhook product in your above created facebook app by creating a GET route on our server and subscribe leadgen.
  3. Setup client by integrating facebook’s javascripts SDK.
  4. Setup user login using Fb.login().
  5. Using graph api get page info of the loged in user’s account.
  6. Allowing user to subscribed the page and give permission to our app that it can access user’s pages.
  7. Creating POST route on server with same route path that we used for above GET route (In Step no 2). On this POST method we get real time facebook lead’s.
  8. Fetch data from lead’s and store it in the your database.

 1. Create a Facebook App.

  • Go to
  • Click on “My Apps” and choose “Add a New App”.
  • Enter “App Display Name” and your “Email” and click on “Create App ID”.
  • After passing security check you will see the App Dashboard.
  • Now Go to the “Settings” and Click on “+ Add Platform”.
  • Select “Website” and enter full site url for example: “”.

 2. Setup Webhook Product and Subscribe leadgen.

  • Click on “Add Product” in the side-bar of the dashboard.
  • Search for “Webhooks” and click on “Set Up”.
  • Now first we create a GET  route to verify the webhook.

On setting up the webhook it ask for the two things “Callback Url” and “Verify Token”. The webhook send a verification request by making a get request on callback_url with three params “hub.mode”, “hub.challenge” and “hub.verify_token”. To verify the callback and to enusre that the request we are getting is from our created webhook we have to check the responce “hub.verify_token” first and then responce back with “hub.challenge”. For make route in meteor I am using “meteorhacks:picker” Package.

var getRoutes = Picker.filter(function(req, res) {
  return req.method == "GET";
getRoutes.route( '/fbwebhook/page', function( params, request, response) {
  var url = request.url;
  url = url.substr(url.indexOf('/page?') + 6).split('&');
  var queryData = {}
  for(var i = 0; i < url.length; i++) {
    var urlIndex = url[i];
    var key = urlIndex.substr(0, urlIndex.indexOf('='));
    var value = urlIndex.substr(urlIndex.indexOf('=') + 1);
    queryData[key] = value;
  let challenge = queryData['hub.challenge'];
  let verify_token = queryData['hub.verify_token'];
  if(verify_token === "your_verify_token") {
  • Now go to App Dashboard and in Webhooks choose “Page” and click on “Subscribe to this topic”.
  • Enter your Callback Url ex. “” and same “verify_token” you used in above code.
  • Now you can see a list of name that you can subscribe. Search for “leadgen” and subscribe it.

3. Integrate JavacriptSDK with your ReactJS Component.

Copy JavascriptSDK Code and paste it in “componentDidMount()” methods.

componentDidMount() {
  window.fbAsyncInit = function() {
      appId : 'your_app_ID',
      autoLogAppEvents : true,
      xfbml : true,
      version : 'v2.11'
  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); = id;
  js.src = "";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

4. Setup User Login using Fb.login().

Create a login and logout button and to perform Fb.login() and Fb.logout().

<div className="col-xs-12 col-md-12 text-center">
  { userID ? (
      <b>User ID - { userID } </b>
      <a className="btn btn-danger" onClick={(event) => {this.logoutFb(event)}}>Logout</a>
  ) : (
    <div className="btn btn-primary" onClick={(event) => {this.loginFb(event)}}>Facebook Login</div>
loginFb() {
  var self = this;
  FB.login((res) => {
    var userID = res.authResponse.userID;
    this.setState({userID: userID});
  }, {scope: 'manage_pages'});

logoutFb() {
  var self = this;
  FB.logout(function(res) {
      userID: null,

5. Use Graph API to get Pages info of the loged in User’s Account.

Basically Graph API is a way to read or write on facebook social’s graph. To know more about Graph API click here. Graph Api is consist of three parts “path”, “methods” and “access_token”. By default method is “GET” and access_token is user_access_token. So to get the page’s info we make Graph API call on “/me/accounts/”.
It will provide the Array of JSON of user’s pages data with there id, name, category and page_access_token.

loginFb() {
  var self = this;
  FB.login((res) => {
    var userID = res.authResponse.userID;
    FB.api('/me/accounts/', (resAccountData) => {
        userID: userID,
        pages : 
      }, () => {
  }, {scope: 'manage_pages'});

6. Subscribe the Page to Get Real Time Leads.

To get leads on our webhook we first have to subscribed the page on which the ad is running with our app to get real time leads. We can do this by making POST call on “/<Page-Id>/subscribed_apps” with page_access_token. You also need to store the “Page-Id” and “page_access_token” in your database to fetch field values from lead.

  '/' + + '/subscribed_apps',
  { access_token: subscribedPage.access_token },
(res) => {
  if(res.success) {
    var date = new Date();
    var obj = {
      userID: userID,
      access_token: subscribedPage.access_token,
      category: subscribedPage.category,
      date: date
    // Meteor call to insert the data of Subscribed Pages
  } else {
    console.log("error: ", res.error.message);

7. Create POST route on server to Get Real Time Leads.

Create POST route with the same path of the GET route we created earlier in second step i.e. “/fbwebhook/page”. On this route you will get the lead data in real time.

var postRoutes = Picker.filter(function(req, res) {
  return req.method == "POST";
postRoutes.route( '/fbwebhook/page', function(params, request, response) {
  var body = request.body;
  if(body && body.entry && body.entry[0] && body.entry[0].changes) {
    var changesArray = body.entry[0].changes;
    for(var i = 0; i < changesArray.length; i++) {
      var change = changesArray[i];
      var value = change.value;
      if(value.leadgen_id) {
        getLeadDetails(value); // to get lead's data
      } else {
        console.log("Value : fb/page : ", body);

8. Fetch Field Data from the Lead using Page Access Token.

In order to get field data from the lead we use Graph Api. We make a GET call on “<leadgen_id >?access_token=<page_access_token>”. This will return the lead data.

function getLeadDetails(lead) {
  var { page_id, leadgen_id, form_id } = lead;'pageSubscribed.getByPageId', page_id, (err, res) => {
    var pageData = res;
    var access_token = pageData.access_token;
      "" + leadgen_id + "?access_token=" + access_token, 
    (err, data) => {
      if(err) {
        throw new Meteor.Error(404, err);
      } else {
        var data = JSON.parse(data.content);
        var { field_data, created_time } = data;
        var leadObj = {
          'leadgen_id': leadgen_id,
          'page_id': page_id,
          'userID': pageData.userID,
          'form_id': form_id,
          'created_time': created_time,
          'field_data' : {}
        for(var i = 0; i < field_data.length; i++) {
          var key = field_data[i].name;
          var values = field_data[i].values;
          leadObj.field_data[key] = values[0];
        // Meteor call to insert the data of leadObj

Here, the page access token is valid only for two hours. We can extend the expiry token of “page_access_token”. I will write about extending Page Access Token in next blog.



  1. Hi Tanmay Verma,
    My name is Adir I`m the CEO of Interjet Ventures (an Israeli web development company),

    I`m writing you because we are adding a new feature to one of our products that is related to Extracting Facebook Leads ads to CRM, We are looking for a professional advise regarding dealing with Facebook leads of Business Accounts users.

    I will be happy if we can advise with you by email or by phone,
    We are willing to pay for your time if necessary,

    Thank you!

  2. Your comment is awaiting moderation.

    Не обращая внимания на то, что букмекерская контора 1xbet зеркало рабочее содержит официальную лицензию и оформлена на Кюрасао, Нидерландских Антильских островах, в РФ ее сайт систематически блокируется. Но абонентов конторы это не должно беспокоить, так как руководство фирмы предприняло надлежащие шаги в правильном направлении, обеспечив собственным посетителям реальность прохода на интернет-сайт в любой момент, пусть даже при обстоятельстве блокировки официального сайта 1xbet. Основания блокирования проекта В Российской федерации принят закон, ограничивающий или запрещающий деятельность букмекерских компаний, которые не выполняют следующие условия: Официальная регистрация на территории Российской Федерации, получение разрешения и уплата налоговых платежей в бюджет. Вход в состав СРО. Потому, что букмекерская контора уже имеет транснациональную лицензию, ее субъекты сочли условия государства повышенными, за это подвергалась блокировке. В последнее время активности 1xbet на территории России по решению суда было блокировано более 500 доменов. Однако это не мешает компании возобновлять деятельность, а ее клиентам использовать все сегменты ресурса, ставить и иметь выигрыш. Каким способом зайти на заблокированный интернет-сайт Чтобы обойти блокирование, работники компании предлагают своим посетителям доступ к рабочим зеркалам 1xbet. Зайти на функционирующую сборку вебсайта сможете посредством ссылки 1xbet зеркало. Это удобный и несложный метод использования БК. При использовании зеркала хранятся абсолютно все индивидуальные данные, включая счета и аккаунт, к тому же зеркало в точности повторяет официальный ресурс. Он в такой же мере качественно защищен и полностью не опасен для проведения игровых ставок, ввода и получения средств. Зеркало блокированного главного проекта – наиболее комфортный способ дальнейшего продолжения выполнения игровых ставок без малейшего риска и хлопот.

  3. Your comment is awaiting moderation.

    Не обращая внимания на тот факт, что контора букмекерская 1xbet официальный сайт содержит официальную лицензию и оформлена на Кюрасао, Нидерландских Антильских островах, в РФ ее web-сайт постоянно подвергается блокированию. Но абонентов конторы это сегодня не может волновать, так как управление фирмы предприняло надлежащие операции в верном направлении, обеспечив собственным клиентам способность входа на портал в любое время, даже при обстоятельстве блокировки официального ресурса 1xbet. Основания блокировки вебсайта В Российской федерации принят закон, ограничивающий или запрещающий активность БК, какие не исполняют последующие требования: Официальная регистрация на территории Российской Федерации, приобретение лицензии и оплата налоговых платежей в госбюджет. Вход в состав СРО. Так как контора букмекерская уже имеет в распоряжении транснациональную лицензию, ее субъекты посчитали нормативы страны завышенными, за это подвергалась блокированию. В последнее время функционирования 1xbet на территории России по решению суда оказалось заблокировано более 500 доменных имен. Только это не препятствует компании возобновлять деятельность, а ее посетителям пользоваться абсолютно всеми разделами проекта, ставить и иметь выигрыш. Каким образом зайти на блокированный интернет-сайт Для того, чтобы обойти блокирование, работники компании предлагают всем своим играющим доступ к рабочим зеркалам 1xbet. Зайти на действующую сборку сайта сможете при помощи гиперссылки 1xbet зеркало. Это комфортный и простой способ пользования букмекерской конторой. При использовании зеркала хранятся абсолютно все индивидуальные данные, включая счета и аккаунт, к тому же рабочее зеркало в точности воспроизводит официальный ресурс. Он столь же качественно предохранен и полностью безопасен для выполнения ставок, внесения и получения денежных средств. Рабочее зеркало блокированного главного проекта – один из самых удобных методов дальнейшего продолжения организации игровых ставок без мизерного риска и хлопот.

Leave a Reply

Your email address will not be published. Required fields are marked *