Speeding up the Facebook WordPress Plugin

Speeding up the Facebook WordPress Plugin

Following the guide to Optimize Social Plugins on Developers.Facebook.com, I’ve found there are two common ways to speed up calls to the Facebook API.

1. Using Asynchronous loading which will speed up loading and not block rendering of other elements on the page. The Facebook plugin already implements this, so not much we can do there.
2. By creating a custom channel which is said to improve speeds with older browsers, however I noticed a decrease in page loading speed after making the changes and I’m using the latest version of Chrome (32.0.1700.102).

There are two steps to modify the Facebook plugin to use a custom channel.

1. Create a channel.html file in the root folder of the plugin (“wp-content/plugin/facebook”) with the following code (Note the long cache time):

<?php
    $cache_expire = 60*60*24*365;
    header("Pragma: public");
    header("Cache-Control: maxage=".$cache_expire);
    header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>

<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

2. We then need to modify the source of the Facebook plugin so when calling the FB.init it will pass the url of the channel file we have create.
Look for the FB.init within the facebook.php file in the root folder of the plugin, it should be inside the function register_js_sdk.
Modify the $args parameter as per below:

...
$args = array(
    'xfbml' => true
);

if ( is_admin() ) {
    $args['status'] = true;
    $args['cookie'] = true;
} else if ( $this->kid_directed ) {
    $args['kidDirectedSite'] = true;
}

// appId optional
if ( ! empty( $this->credentials['app_id'] ) )
    $args['appId'] = $this->credentials['app_id'];

if ( !array_key_exists( 'channelUrl', $args ) ) {
    $args['channelUrl'] = plugin_dir_url( __FILE__ ) . "channel.html";
}
...

Lines 17-19 are our new code to include the channelUrl parameter and pass it to the FB.init function.