Integrate Facebook comment plugin into your website and notify via email

Facebook comments plugin allows Facebooker comment on a content on your website. The comments of customers or users (guests) are very important for almost website owners. To encourage guests leave their comments, beside the content must be attractive, the responds for comments also should be quickly.

In this article, I'll show you how to integrate Facebook comment plugin into your website and receive the notification via email when a comment is dropped on your website. Let go through below steps.

1. Create a Facebook page

If you still don't have a Facebook page, let create one soon. Facebook page is representative for your website or your business on Facebook. Increasing number of Facebookers who likes or follows your Facebook page will increase the chance to broadcast your website / business on Facebook. Facebook page also is used as an official account to response to comments. Especially when you have many administrators or moderators for your Facebook page.
To create a Facebook page, let go to: https://www.facebook.com/pages/create

2. Create a Facebook app

Facebook app is a gateway to interact with Facebook's assets. If you want to do any things with Facebook, you should have a Facebook app.
If you still don't have a Facebook app, let create one via: https://developers.facebook.com/docs/apps/register

3. Embed Facebook comments plugin into your website

Link your website with your Facebook app & page. To do this, let add meta tags fb:app_id & fb:pages into all pages of your website, for example:

<meta property="fb:app_id" content="645919975544702" />
<meta property="fb:pages" content="174460585975791" />

To get your Facebook app id, go to the Dashboard of your app, see the following sample:

To get your Facebook page id, go to Page >> About and find Page ID at the bottom:

Next, let add Facebook's JavaScript SDK and comment box into each page on your website where you want to guests leave comments. To get the code and comment box, you can go to https://developers.facebook.com/docs/plugins/comments, find Comments Plugin Code Generator section and put your parameters into boxes then click Get Code button. See below picture for example:

You can change the settings of comment box based on your need, for example I want to show 10 newest comments, I do:

<div class="fb-comments" data-href="https://baby.shopqua.com/ba-lo-tui-cap-xach/ba-lo-cho-be" data-numposts="10" data-order-by="reverse_time" data-width="100%"></div>

For counting number of comments of an URL, let use fb-comments-count:

<span class="fb-comments-count" data-href="https://baby.shopqua.com/ba-lo-tui-cap-xach/ba-lo-cho-be"></span>comments

The above are important settings that I think you should do, for other settings & how to monitor comments, please see more on: https://developers.facebook.com/docs/plugins/comments

4. Set up your Facebook app

If you need a page profile for your app, let go to your app >> Settings >> Advanced >> App Page and click Create New Page button.

Or you can select an existing page there if the page has same name with the app and categorized as App Page. To change Category or Name of the existing page, click About menu of the page and click Edit link of Category or Name:

The guide on https://developers.facebook.com/docs/plugins/comments has a section to enable comment mirroring which allows comments from your webpage will also appear as comments on your Facebook Page post and vice-versa. Using comment mirroring, you can receive a notification on Facebook Pages Manager mobile app when you got a comment on your web page. However it will be deprecated soon according to the post https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings. So you won't receive the notification on Facebook Pages Manager mobile app more.

Don't worry, I'll show you a way to get this notification via email. For beginning, let setup a webhook when a new comment is posted. See Webhooks section on https://developers.facebook.com/docs/plugins/comments for how to. More than thousands of words, I post here my pictures:

In the Webhooks section, Facebook also gives a sample mywebhook.php in PHP. Let rename it to commentwebhook.php and modify it in next step to do what we want.

5. Modify commentwebhook.php

The message sent to this webhook file has the format of JSON, however it lacks some important info. So we need to get this info via Facebook API.

To access Facebook API, you need an access_token. You can get it via Facebook Graph API Explorer: https://developers.facebook.com/tools/explorer

You can test APIs in this tool to get experience on data returned. If you want to have a sample code, let scroll down and click Get Code button at the bottom. The sample code is one among of kinds: Android SDK, iOS SDK, JavaScript SDK, PHP SDK, cURL.
Below is the source code of my commentwebhook.php file:

if ($_GET['hub_verify_token'] === 'XXXXXXXXX-123456789-ABCdef') {
  echo $_GET['hub_challenge'];
}
$entry = file_get_contents('php://input');
file_put_contents('commentwebhook.log', "\n" . $entry, FILE_APPEND);
//get input message
$input = json_decode($entry, true);
$message = $input['entry'][0]['changes'][0]['value']['message'];
$fb_comment_id = $input['entry'][0]['changes'][0]['value']['id'];
$created_time = $input['entry'][0]['changes'][0]['value']['created_time'];
$from_name = $input['entry'][0]['changes'][0]['value']['from']['name'];
$from_id = $input['entry'][0]['changes'][0]['value']['from']['id'];
//get more details
$access_token = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$url = "https://graph.facebook.com/v2.6/$fb_comment_id?access_token=$access_token&fields=permalink_url";//fields=permalink_url,message,from,created_time
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$resp = curl_exec($ch);
curl_close($ch);
$output = json_decode($resp, true);
$permalink_url = $output['permalink_url'];
//send email
$bodyHtml =
"<h1><a href='https://www.facebook.com/$from_id'>$from_name</a></h1>
<h2>$message</h2>
<h3>On: <a href='$permalink_url'>$permalink_url</a></h3>";
$bodyText = "$from_name:\n  $message\n  On: $permalink_url";
$url = 'https://api.elasticemail.com/v2/email/send';
try {
 $post = array('from' => 'youremail@yourdomain.com',
 'fromName' => 'Your Website Name',
 'apikey' => '00000000-0000-0000-0000-000000000000',
 'subject' => 'You have a comment',
 'to' => 'recipient1@gmail.com;recipient2@gmail.com',
 'bodyHtml' => $bodyHtml,
 'bodyText' => $bodyText,
 'isTransactional' => true);

 $ch = curl_init();
 curl_setopt_array($ch, array(
  CURLOPT_URL => $url,
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $post,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HEADER => false,
  CURLOPT_SSL_VERIFYPEER => false
 ));

 $result=curl_exec ($ch);
 curl_close ($ch);

 file_put_contents('commentwebhook.log', "\n" . $result, FILE_APPEND);
}
catch(Exception $ex){
 file_put_contents('commentwebhook.log', "\n" . $ex->getMessage(), FILE_APPEND);
}

You can also get the source code from my GitHub: https://github.com/vnheros/facebookcomment

In the code, I use ElasticEmail for sending notification email without worrying about email server and inbox. If you like, you can register here for an ElasticEmail free account (can send up to 5000 emails free per day).

OK, now you have a power tool for notifying you immediately when getting a comment on your webpage. Happy?
That's all for today. Any comment is welcome!