Shares

A few days ago, I found my self replying to an enormous amount of comments left by my fans on Mr. Geek. Why? Because Facebook doesn’t itself provide a functionality to allow moderators to be notified when a new comment is posted on the site.

The only official way of seeing if you have missed a comment left by a fan on the comments plugin is through the Facebook Moderation Tool. You can access it here. But that still doesn’t notify you via Facebook Notifications or email. So how about getting email notifications each time someone comments on your website via the comments plugin? Good stuff. Yes, it’s possible with a bit of trickery using Facebook API.

Facebook’s API is vast and we aren’t going to talk about it in detail. However, one interesting feature is the FB.Event.subscribe feature found in Facebook’s Javascript SDK. The Facebook.Event.subscribe attaches an handler to an event and invokes your callback when the event fires. You can find out more by clicking here.

We are particularly interested in the comment.create event, which gets fired when the user adds a comment (fb:comments). Now we can use the response from this event to obtain the URL of the webpage that the user commented on using a comments plugin. Once we have the URL, we can use Javascript to easily pass the data back to a small PHP script which sends you an email notification. Let’s talk code now.

Assuming you already have a comments plugin on your site, a Facebook Application to work with and know little coding, you are ready.

Step 1: Adding the Data Notify attribute to your <div> .

<div class="fb-comments" data-notify="true" data-href="http://example.com" data-num-posts="5" data-width="670" ></div>

Step 2: The Javascript

Just below the line you edited before, you need to add the following Javascript code.


<script>

window.fbAsyncInit = function(){ 
FB.Event.subscribe('comment.create', function(response) {
                
	var dummyImage = new Image;
	dummyImage.src = 'http://example.com/fb_email_notify.php?path='+response.href.replace('http://','');
	//alert(response.href);	
	});

};

</script>

Step 3: The PHP

Save the following PHP code with a file named fb_email_notify.php. Don’t forget to replace youremail@example.com with your real email address.

<?php
// to whom
$to  = 'youremail@example.com';

// subject
$subject = 'A new Facebook comment on Your Site';

// message
$message = '
<html>
<body>
  <h4>There is a new comment on the following article.</h4>
  </br>
  </hr>'.
  $_GET['path'].'
  
</body>
</html>
';

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'From: Notifications Module <noreply@example.com>' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);
?>

 Step 4: Stitching it together.

Now, you must make sure you have added the required information in the Javascript and PHP code to allow this to work properly. For example, you must change your email address in the PHP code, change the HTML content if you wish and make sure the Javascript code points to the correct PHP script. With this said, you should be ready to receive Facebook comment notifications left on the comments plugin direct into the email inbox.

Full Javascript code. This is how it should be placed within your HTML markup.

//you must already have this loaded with Facebook's Javascript SDK
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=[your_app_id]";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

//you must add data-notify true attribute to this div element
<div class="fb-comments" data-notify="true" data-href="[your_page_link]" data-num-posts="5" data-width="670" ></div>

//this is the Javscript that fires the event
<script>
window.fbAsyncInit = function(){ 
FB.Event.subscribe('comment.create', function(response){
                
  var dummyImage = new Image;
  dummyImage.src = 'http://example.com/fb_email_notify.php?path='+response.href.replace('http://','');
  //alert(response.href); 
  });

};
</script>

About Ali Gajani

Hi. I am Ali Gajani. I started Mr. Geek in early 2012 as a result of my growing enthusiasm and passion for technology. I love sharing my knowledge and helping out the community by creating useful, engaging and compelling content. If you want to write for Mr. Geek, just PM me on my Facebook profile.