The old Facebook like boxes have been replaced with the new and sleek Facebook page plugin. The thing is, when we add Facebook page plugin, the default Facebook code is synchronous. Lets see how to replace the code, to make the Facebook page plugin load asynchronously.
Unblock any international website, browse anonymously, and download movies and Mp3 with complete safety with CyberGhost, just for $2.75 per month:
Why is Asynchronous better than synchronous loading
Every JavaScript code we add to a website, slows the website down. There's just no way around it. But, there are two ways to load JavaScript code.
When we load it synchronously, the rest of the page will wait for the JavaScript to load. This includes the essential parts of the page, the text and the images, and it is definitely not good for our visitors. They came to read an article, not wait for our Facebook page plugin to load.
Asynchronous code, on the other fact, works smart. It waits for all the essential parts of the page to load, and then it loads the JavaScript.
Sure, that might mean that the Facebook page plugin might load a second later than the rest of the page, but the visitor will not notice any slowdown on what they came to our page for.
So, it's always better to use asynchronous loading on JavaScript, if we have the chance.
How to add Facebook page plugin asynchronously
The first part to add Facebook page plugin is the usual: we go to
https://developers.facebook.com/docs/plugins/page-plugin
and enter our page URL and other preferences.
We won't talk much about the available preferences, since Facebook has a pretty detailed presentation for each of them, with detailed examples.
After we click on "Get Code", this is where the magic happens.
We completely ignore the JavaScript SDK part of the code, apart from the App ID, a 15 digit number unique to our page.
The second part of the code, we fully copy it.
Then, we take our App ID and we add it to the following code:
<!--Facebook code -->
OUR APP ID NUMBER', // App ID status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); // Additional initialization code here }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document));
Now, the only thing left is to paste the above code within our website's html code.
Most great themes, such as the Genesis Framework for WordPress, have a proper field to add code inside the <head></head> or at the footer of our website. The footer is the better choice to add Facebook page plugin code.
If your theme doesn't have such fields, you have to manually add the code to the website's code.
On a CMS, such as WordPress, Joomla, Drupal etc, this largely depends on the Theme you have chosen, so you should contact the Theme's author is you have trouble with it.
Finally, to add Facebook page plugin to our website, we get the second part of the code, making sure it has our Facebook page URL...
<div class="fb-page" data-href="https://www.facebook.com/pcsteps" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
https://www.facebook.com/pcsteps"><a href="https://www.facebook.com/pcsteps">PCsteps.com</a></blockquote></div></div>
Then, on WordPress, we can add Facebook page plugin through Appearance -> Widgets...
...drag a text widget on any available space - the sidebar is usually a prime location...
...paste the code and save.
The method should be similar for Joomla, Drupal, or other content management systems.
On the next page load, we get the Facebook page plugin, login asynchronously.
Maybe one day Facebook will provide the code themselves. Until then, this is a great workaround.
Did the Facebook page plugin work well for you?
If you had any problems when you tried to add Facebook page plugin on your website with the asynchronous code, leave us a comment.
Support PCsteps
Do you want to support PCsteps, so we can post high quality articles throughout the week?
You can like our Facebook page, share this post with your friends, and select our affiliate links for your purchases on Amazon.com or Newegg.
If you prefer your purchases from China, we are affiliated with the largest international e-shops:
Vojta Svoboda says
Or you can insert JS code by Google Tag Manager and dont need to generate App ID number.
Άγγελος Κυρίτσης says
That's a good idea too, thanks. I will add it to the guide next time I update it.