Monday, January 15, 2018

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_idfb: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 Explorerhttps://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!

59 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. I would like to thank you on writing about this. I have been all over the net finding information on how to name my business and products. I am glad to have found your post. I also want your opinion on brand naming agencies out there, should I go with conventional naming? I recently found EMW and they caught my attention with their portfolio. They named a yogurt store “Spoon Me”, how ingenious is that! Should I go with their services? website

    ReplyDelete
  3. I came across EMW, Novanym, Namebase, to name a few. I found their websites very informative. But when it came to ingenuity and creativeness, I will definitely go with the first site mentioned.EMW

    ReplyDelete
  4. Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards, website design company los angeles

    ReplyDelete
  5. My friend mentioned to me your blog, so I thought I’d read it for myself. Very interesting insights, will be back for more!
    yurtdışında üniversite

    ReplyDelete
  6. you have got an amazing blog here! would you wish to make some invite posts on my weblog? wordpress security plugin

    ReplyDelete
  7. This is a great post. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again. website templates

    ReplyDelete
  8. Your blog is too much amazing. I have found with ease what I was looking. Moreover, the content quality is awesome. Thanks for the nudge! facebook page likes

    ReplyDelete
  9. You agreement for your tasks stand out of the crowd. there is something unique kind of them. It appears to me each certainly one of of them are deadened. Buy Email List

    ReplyDelete
  10. I truly welcome this superb post that you have accommodated us. I guarantee this would be valuable for the vast majority of the general population. Website Security

    ReplyDelete
  11. You completed certain reliable points there. I did a search on the subject and found nearly all persons will agree with your blog. สีทาบ้าน โคราช

    ReplyDelete
  12. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck. pname com facebook orca

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck. usamaladla

    ReplyDelete
  16. I got too much interesting stuff on your blog. I guess I am not the only one having all the enjoyment here! Keep up the good work. κατασκευη ιστοσελίδας με wordpress

    ReplyDelete
  17. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. Digital marketing company

    ReplyDelete
  18. This is my first time visit here. From the tons of comments on your articles,I guess I am not only one having all the enjoyment right here! Buy Facebook Ads Accounts

    ReplyDelete
  19. Great post i must say and thanks for the information. Education is definitely a sticky subject. However, is still among the leading topics of our time. I appreciate your post and look forward to more. isomaru suisan

    ReplyDelete
  20. I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work purchase likes

    ReplyDelete
  21. I really impressed after read this because of some quality work and informative thoughts . I just wanna say thanks for the writer and wish you all the best for coming!. ปั้มไลค์2019

    ReplyDelete
  22. This comment has been removed by a blog administrator.

    ReplyDelete
  23. Great post i must say and thanks for the information. Education is definitely a sticky subject. However, is still among the leading topics of our time. I appreciate your post and look forward to more. Buy Facebook Accounts With Friend

    ReplyDelete
  24. This is realy a Nice blog post read on of my blogs It is really helpful article please read it too my blog Facebook keep crashing you can visits our websites or toll free no +1-866-558-4555. solve your problem fastly.

    ReplyDelete
  25. hi was just seeing if you minded a comment. i like your website and the thme you picked is super. I will be back. website erstellen

    ReplyDelete

  26. are you looking for web development company then click

    web development company in USA

    either you are looking for mobile app development then click

    Mobile app development company in USA

    either you are looking for cloud services then click

    cloud services provider company in USA

    either you are looking for Artificial Intelligence services then click

    Artificial Intelligence services provider company in USA

    ReplyDelete
  27. Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck! website design

    ReplyDelete
  28. Hello! Nice post! Please do keep us posted when we can see a follow up! website design agency

    ReplyDelete
  29. Thank you for making the honest attempt to discuss this. I feel very strong about it and would like to learn more. If it’s OK, as you gain extra in depth knowledge, might you mind adding more articles very similar to this one with more information? It would be extraordinarily useful and useful for me and my friends. development companies

    ReplyDelete
  30. This design is spectacular! You obviously know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool! development companies

    ReplyDelete
  31. I really enjoyed reading this site, this is great blog. branding

    ReplyDelete
  32. A powerful share, I just given this onto a colleague who was doing somewhat evaluation on this. And he in actual fact purchased me breakfast because I found it for him.. smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading extra on this topic. If possible, as you turn into expertise, would you thoughts updating your weblog with extra particulars? It’s highly helpful for me. Big thumb up for this weblog put up! development companies

    ReplyDelete
  33. Hello there! Good post! Please inform us when I will see a follow up! mobile phone mockup

    ReplyDelete
  34. I think this web site has very superb composed subject material articles . ipad template

    ReplyDelete
  35. I had been honored to obtain a call from a friend as he found the important guidelines shared on the site. Browsing your blog post is a real wonderful experience. Thanks again for thinking of readers like me, and I hope for you the best of achievements as being a professional discipline. macbook device template

    ReplyDelete
  36. This comment has been removed by a blog administrator.

    ReplyDelete
  37. Thanks for the post. I like your writing style – I’m trying to start a blog myself, I think I might read thru all your posts for some suggestions! Thanks once more. webflow experts

    ReplyDelete
  38. Hello there! Good post! Please inform us when I will see a follow up! webflow agency

    ReplyDelete
  39. I have been exploring for a little for any high quality articles or blog posts in this kind of area . Exploring in Yahoo I ultimately stumbled upon this web site. Reading this information So i¡¦m glad to show that I have an incredibly good uncanny feeling I came upon exactly what I needed. I such a lot indubitably will make certain to don¡¦t forget this web site and give it a look a relentless basis. webflow developer

    ReplyDelete
  40. Wanted posting. Loads of excellent writing here. I wish I saw it found the site sooner. Congrats! web development agency

    ReplyDelete
  41. Excellently written article, doubts all bloggers offered the same content because you, the internet is a greater place. Please keep it up! website development agencies

    ReplyDelete
  42. Some times its a pain in the ass to read what people wrote but this web site is very user friendly ! . app store screenshots

    ReplyDelete
  43. Some truly nice stuff on this site, I love it. apple watch psd

    ReplyDelete
  44. I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks for posting it.. interface designer

    ReplyDelete
  45. Well blog and liked image of students standing in snow fall specially. I need more blogs of such kind. The way you are using to convey your message is great and impressive
    Buy Facebook Views

    ReplyDelete
  46. Amazing things here. I am very glad to peer your post. Thanks a lot and I am looking forward to contact you. Will you kindly drop me a e-mail?
    Buy Facebook Group members

    ReplyDelete
  47. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. Looking forward to read more of your post and updates in the future...
    buy YouTube USA subscribers

    ReplyDelete
  48. I’ve been thinking the similar point personally lately. Delighted to see a person on the same wavelength! Nice article.
    buy TikTok views

    ReplyDelete
  49. Thanks for sharing this great information, i would appreciate if you share this type of information regularly.I have written a beautiful post you can check here
    how long does zoloft stay in your system

    ReplyDelete
  50. I just found this blog and have high hopes for it to continue. AT&T Software is one of the leading web and mobile app development companies in the world.

    Hire Shopify web Developer

    ReplyDelete
  51. you shared such a important information with us i can't tell you in words because I was searching the particular info in various site even on you tube kindlecheap Thanks for sharing for all above given information.

    ReplyDelete
  52. This comment has been removed by the author.

    ReplyDelete
  53. This will be very helpful in the long run. Thank you for this significant contribution from your side. Shopify web designer cost

    ReplyDelete
  54. Blown away by this conventional approach. I would definitely like to work with you on future projects. Cisco Distributor KSA

    ReplyDelete
  55. This comment has been removed by the author.

    ReplyDelete
  56. Our Custom Software Development Dubai service is a way to design and build software solutions that address unique needs of a specific organization.

    ReplyDelete

Subscribe to RSS Feed Follow me on Twitter!