我在我的网站上使用 Recommendations 插件,加载速度非常慢,主要是使用 Firefox。
我发现大多数 FB 插件似乎都有这个问题。是不是因为他们创建的 iFrame,插件似乎创建了很多数据。
制作自己的JS版本会更好吗?
如果是这样,是否有人有任何指针可以通过 FQL/AJAX 调用访问相同的数据?
在下面的评论之后,我想我会准确地解释我在做什么,我正在使用下面的脚本动态加载插件。目前仅显示推荐插件,但最终将包含所有提到的插件。
但是......即使直接将插件注入页面,我也注意到了这个问题。
$(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. ====
您可以看到该脚本设置了我所有的 FB/Twitter 等元素,并将它们插入到具有相应类的元素中。
所讨论的目的不需要 appId 元素,但我还有一个显示我的 FB 事件和 FB 登录的事件部分,因为我需要 appId 进行验证。
(只是想解释一下,虽然它仅用于显示推荐就很笨重,但它的目的是做更多的事情!)