I'm using the Recommendations plug on my site and it's really slow to load, mostly with Firefox.
I find most FB plugins seem to have this problem. Is it due to the iFrame they create, there seems to be a lot of data being created by the plugin.
Would it be better to make my own JS verson?
If so, does anyone have any pointers to access the same data via an FQL/AJAX call?
Following comments below, I thought I'd explain exactly what I'm doing, I'm loading the plugins dynamically using the script below. Currently only displaying the recommendations plugin, but eventually all those mentioned will be included.
HOWEVER... I've noticed this problem even when directly injecting the plugin to a page.
$(document).ready(function () { addFBelements(); });
//==== THIS GENERATES SOCIAL ELEMENTS ====
function addFBelements() {
window.fbAsyncInit = function () { // sets up asynchronous loading of FB elements
FB.init({ // initialise FB
appId: 'MYAPPID',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true
});
};
(function () {
if ($("#fb-root").length <= 0) {
$('body').prepend('<div id="fb-root"></div>'); // add FB div to top of page if not already there
};
var e = document.createElement('script'); // load the Facebook Javascript file
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
$.getScript(document.location.protocol + '//apis.google.com/js/plusone.js'); // Load Google Plus files
$.getScript(document.location.protocol + '//platform.twitter.com/widgets.js'); // load Twitter files
renderButtons(); // render the buttons in the page
} ());
};
// ends setting up of FB/Twitter etc links and JS files
// add Social elements to the pages where required with correct sharing URLs
function renderButtons() {
var linkUrl = window.location.href;
if ($('.googlePlus').length > 0) {
$('.googlePlus').html('<g:plusone href="' + linkUrl + '" size="medium" style="float:right"></g:plusone>');
};
if ($('.fbLike').length > 0) {
$('.fbLike').html('<fb:like send="false" href="' + linkUrl + '" layout="button_count" width="80" show_faces="false" font="arial"></fb:like>');
};
if ($('.fbSend').length > 0) {
$('.fbSend').html('<fb:like send="false" href="' + linkUrl + '" layout="button_count" width="80" show_faces="false" font="arial"></fb:like>');
};
if ($('.tweet').length > 0) {
$('.tweet').html('<a href="http://twitter.com/share" data-url="' + linkUrl + '" class="twitter-share-button" data-count="none" data-via="hartnollguitars">Tweet</a></span>')
};
if ($('.fbComments').length > 0) {
$('.fbComments').html('<fb:comments href="' + linkUrl + '" num_posts="3" width="640"></fb:comments>');
};
if ($('.fbRecommend').length > 0) {
$('.fbRecommend').html('<img style="border: none" alt="" src="images/like_us_home.png"><fb:activity recommendations="true" border_color="#000000" font="arial" colorscheme="dark" header="false" height="400" width="220" site="www.hartnollguitars.co.uk"><span>');
};
};
// == END OF SETTING UP SOCIAL NETWORKING ELEMENTS. ====
You can see that script sets up all my FB/Twitter etc elements and inserts them into elements with the respective classes where present.
The appId element is not required for the purposes in question, but I also have an Events secton which shows my FB events and FB login, for both I need the appId for validation.
(just trying to explain that whilst it's bulky for just displaying recommendations, it is intended to do a lot more!)
Please don't put window.fbAsyncInit = function () { inside of jQuery's $(document).ready(function () { as it will cause mixed results in different browsers under different conditions. See my recent answer here:
I've also seen issues with $('.googlePlus').html('<g:plusone in IE8. See: Adding a Google +1 Button after page load in IE 8