How to use wordpress facebook plugin comments box with lazy loading

WordPress facebook plugin lets you embed facebook comment box in your posts and pages along with many other features. One biggest benefit of facebook comment box is that users who are logged on to facebook can just write comment without needing to grant any permission to the app. This reduces the barrier to write comments for the user. Here is how it looks below a post.

Now it seems like facebook plugin fetches a css file facebook.css, and a javascript. It also does a dns-prefetch. This automatically shows the comment written by other users on the post. If you want to improve performance of the post, you can load this css and javascript using a lazy loading approach. In fact css can be inline as it is very small (thanks to page speed for suggeting this). The facebook comment box (and javascript) can be loaded when user clicks on a link or button. This has a downside that visitors will have to do one extra click which is somewhat a small barrier to writing comment. If you don’t have too many users writing comments, then its a small price to pay for the extra performance you get.

Here is how this can be done:

First dequeue the facebook style using this code:
```
function my_facebook_style_dequeue () {
  wp_dequeue_style('facebook');
}
add_action('wp_enqueue_scripts', 'my_facebook_style_dequeue', 1001);
```
This is assuming that you have facebook plugin installed which enqueues the loading of facebook.css.

Since the css is not much, this can be included in the page as inline css. That will save one round trip. Here is the code to do this:

function my_facebook_style_inline() {
  $content = file_get_contents(ABSPATH . 'wp-content/plugins/facebook/static/css/style.min.css');
  echo '<style type="text/css">';
  echo $content;
  echo "</style>\n";
}
add_action('wp_head', 'my_facebook_style_inline', 999);

Now you need to add some div or button with call to action to load comments. Find some action hook in your theme which lets you add html after the post. For the theme I’m using here is the code:

function my_facebook_comment_code() {
  if (is_single()) {
    echo "<div style='background:green; color:#eee;' id='ih_fbc_div'>Click here to write/view comments</div>";
  }
}
add_action('shell-master_after_entry', 'my_facebook_comment_code');

Now add some javascript to the end of the page. I used wp_footer action hook for this.

function my_inline_footer_js() {
  if (is_single()) {
    echo '<script type="text/javascript">';
    echo "jQuery('#ih_fbc_div').click(function() {jQuery('#ih_fbc_div').html('Comments'); jQuery('#ih_fbc_div').off('click'); ih_fbc(document);});";
    echo "\n";
    echo '</script>';
  }
}
add_action('wp_footer', 'my_inline_footer_js');

Above function calls the function ih_fbc() to load facebook comments. You can change it to some other name. Now we need to make a small edit to fcebook.php in the plugin directory. Look for function “async_script_loader_src” and the javascript function which loads the script. Instead of calling the function assign it to some variable (e.g. ih_fbc as per our click handler code). This way the code can be called when user clicks on the comment div or button. Please note that this change will get overridden when facebook plugin us updated. So you may want to automate it using some script.
Facebook plugin (facebook.php in plugins/facebook/) also does dns-prefetching for connect.facebook.net using this code.
```
echo '<link rel="dns-prefetch" href="//connect.facebook.net" />' . "\n";
```
If you want to save one DNS lookup, either comment out this code or using wordpress “wp_enqueue_scripts” action hook, dequeue it. It better to dequeue it as with that approach when plugin is updated, you don’t have to worry about changing facebook.php again.

How to use wordpress facebook plugin comments box with lazy loading

Suggested posts: