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!

Google Drive: notify CRUD (created, updated, deleted) files in folders

Google Drive is a good place to store files and share them with your friends or within your company. Google also developed notification mechanism for spreadsheets when changes are made to them. However that isn't enough. Users don't have only spreadsheets , they also have many types of documents. So they very need a tool to notify when these documents are changes. Many users already asked for this feature here. While waiting Google develops this feature, there is a good guy (Marcello Scacchetti from Jelly Bend) contributed a Google Apps Scripts to monitor new or deleted files in folders of Google Drive. It works like Microsoft's SharePoint. You can read and copy his code here.

In this article, I will share my modification on his code to make some additional capacities as below:

1. Notify updated files
2. Able to configure list of emails to receive notifications instead of only owner
3. Able to configure subject and content of notification email for each of notification type (new, updated, deleted)
4. Able to configure excluded folders (don't send notification if changed files are in these folders).

Before starting, pls copy this spreadsheet - Monitor Changes of Google Drive Folders. It will have a new menu Drive Folder Monitor and content like the following picture:

All things which you can do are:
1. Go to menu Drive Folder Monitor >> Configuration, then add the folders which you want to monitor and select time for interval running at Run drive folder monitor each box. Currently it just supports top level folders. I'll add a new version to support sub folders when I have time. First running, Google may ask you to authorize the script, pls click Accept.
2. Change Email To Inform (cell A2) to emails (separated by commas) which you want to send notifications.
3. Change Email Title of New Documents (cell B2), Email Title of Updated Documents (cell C2), Email Title of New Documents (cell D2) for the subject of each type of notification email.
4. Change Email Body (cell B3, C3, D3) for the content of each type of notification email. Remember don't delete $$FILE$$ string. It will be replaced by folders and files which are changed.
5. Configure Excluded Folders (cell B4), the format of folder is TOP_FOLDER/SUB_FOLDER (slash between folders), folders are separated by commas (,).
6. This tool will run automatically with interval time you set in step 1. In the case of you want to run manually, let click menu Drive Folder Monitor >> Run monitor folder.

Hope you can use this script in your work. Any comment and contribution idea are welcome.
Best regards,
Hung