How can I make facebook like buttons faster? - facebook

in my website, for each blog entry I have a facebook like button. So on the index, there is multiple(more than 10 at the moment) like buttons.
These like buttons make my page a bit cumbersome to use. The total page time becomes several seconds and it's laggy/jumpy while loading(even though all the content is loaded) while it's loading. Is there anyway to fix this other than not showing the like button on the index? (a single like button on a page produces negligible lag)
For reference, my website is at http://lastyearswishes.com In firebug, you can see that the page load time is 20 seconds, of which about 200 milliseconds is tied back to my actual website. Each facebook like button appears to do three separate non-cacheable, unique requests.
Afterthought: Now (nearly 2 years later) I decided to give up on facebook. Even with asynchronous code it still enduced a noticable delay in page rendering time. It also uses some stange javascript that screws up my layout. When dropping in twitter buttons, my layout looked immediately the way it should (something with alignment and float that facebook did. I could never use margin or anything to get facebook to line up like I wanted)

Facebook Developers provides the javascript to create an asynchronous Like button
found here: Loading the SDK Asynchronously
c/p'd here:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Updated:
Try just this portion (and add #xfbml=1 at the end of the URL, should be the same result on your site but async loading):
<div id="fb-root"></div>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Put this script at the bottom of your page

Related

Image request blocking FB.getLoginStatus

Facebook's Javascript SDK has a method called getLoginStatus that stalls (and never fires the callback passed into it) while an image request on the page also stalls (i.e. the browser doesn't receive a 200 or 404 for a very long time.)
If you wait an extremely long time and the browser (?) finally closes out the attempt to fetch the image, the SDK continues on its merry way.
What might be going on, and is there a way to prevent it? It's awfully inconvenient when a user can't sign in or sign up just because of an image request.
Blocking (HTML):
<img src="..." />
Non-Blocking (with CSS):
#someDiv {
background-image: url(...) no-repeat;
width: xxx;
height: xxx;
}
Non-Blocking (with JS):
var img = new Image();
img.onload = function () {
document.getElementById('someDiv').appendChild(img);
};
img.src = "...";
Try with solution number 2 or 3 - there are also many preloader plugins for JavaScripts making it easier for you to load a lot of images asynchronously, for example: http://thinkpixellab.com/pxloader/
Another solution would be to load smaller images first and load the hires ones asynchronously.
When you use the initialization code from the Facebook SDK website, by default it wants to wait for the page to be fully loaded be for running certain events, like the fbAsyncInit function.
I'm not sure of an "officially supported" way to bypass this, but you could load the Javascript source yourself and call the routines outright (i.e. not in the async wrapper).
This is a barebones example that stalled like you mentioned using the Facebook SDK initialization procedure but works fine with this workaround.
<html>
<head>
<title>This is a test</title>
<script src="http://connect.facebook.net/fr_FR/sdk.js"></script>
<script language="javascript">
<!--
var loggedIn = false;
var authenticated = false;
FB.init({
appId : '{your app ID here}',
xfbml : true,
version : 'v2.0'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
loggedIn = true;
authenticated = true;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
loggedIn = true;
} else {
// the user isn't logged in to Facebook.
}
});
function testLogin()
{
alert("Logged in: " + loggedIn + "\nAuthenticated: " + authenticated);
}
// -->
</script>
</head>
<body>
Testing!
<button onclick="testLogin()">Test login?</button>
<img src="http://deelay.me/5000/ http://example.com/image.gif">
</body>
</html>
I'm not sure how this will affect integration with your site, but I can't imagine it would be a problem. If anything I suppose it's worth a shot!
Do you have any adblockers setup? I had a similar problem with a different API and Adblock Pro was causing some issues.

Google Analytics Realtime report shows no data for GWT Application

I've just created an account to use to track my GWT application and in the process of adding tracking code so I'm looking for some real time feedback on if any of my tracking code is working properly. My application is not public (deployed on my local machine with firewalls), and I haven't seen any javascripts error after adding the tracking code. However when I hit my website on my machine there's no indication in the realtime report that there's an active user, page viewed or any data at all. In my application html I have:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'Account number']);//I have real account number in my project
_gaq.push(['_setSiteSpeedSampleRate', 0]);
_gaq.push(['_trackPageView', 'name']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
which should at least set up page views tracking for me.
I'm assuming that Google Analytics don't need access to my website since I'm the one sending. However I'm new to both GWT and Google Analytics so I could be completely wrong. Please help!
Try replacing this line:
_gaq.push(['_trackPageView', 'name']);
by this one:
_gaq.push(['_trackPageview', 'name']);
Note the lowercase "v" in _trackPageview. Method names are case-sensitive (reference).

Facebook Like button does not work

I checked with the debugger and I have only one warning:
The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
And by the way, I cannot find ANYTHING about that property, nor does the Like Button documentation say it's required.
I have the 6 required tags and everything else looks fine. I am using the iframe version of the Like button.
The Like Button displays, can be clicked, then it briefly shows a 1 count and disappears. It does nothing from there. The response from the server is:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":true,"error_info":{"brief":"An error has occurred.","full":"There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https:\/\/developers.facebook.com\/tools\/lint\/) and fixing any errors.","errorUri":...
Try putting en_US as the locale meta value. I'm wondering if Facebook is having a hard time determining what language your page is in.
I switched to the HTML 5 Like button but I added it dynamically with jQuery instead before the script file is added.
var $likeButton = $('<div id="like-button" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="lucida grande"/>').addClass('fb-like').attr('data-href', window.location.protocol + '//' + window.location.hostname + '/');
$likeButton.insertBefore('.top-toolbar > .toolbar-links');
var js, id = 'facebook-jssdk';
if (document.getElementById(id)) {
return;
}
js = document.createElement('script');
js.id = id;
js.async = true;
js.src = '//connect.facebook.net/en_US/all.js';
document.getElementsByTagName('head')[0].appendChild(js);

Advice needed about Facebook's dialog feed, sharer and like buttons

I'm totally confused about Facebook's dialog feed, sharer and like buttons (I'm a noob to Facebook and its jargon)
On my website, I would like the following
to have a button at the top of the page where people can share my site to their wall
to have a button on the the page where users can share their main homepage on my site to their wall
to have a button where users can share individual items of theirs (events) to their wall
I've read the sharer button is being phased out in preference to the Like button but I see a problem with the Like button. I think something can only be liked once. A user's event might want to be shared several times (to remind their Fb users of the event)
I've seen the BBC use the dialog feed button to post items to a wall and that looks okay but I couldn't get the popup to work.
my requirements are to have different links for each of the three scenarios I've mentioned, with a different description for each scenario but sharing my site's logo.
I've read so much that I'm now totally confused plus all the APIs that Fb has. It's just crazy (or that's how it seems to me)
If someone could help clear the fog with sound recommendations and some sample code for each button, I would be very grateful.
Thank you.
.
For what your talking about you would want to use the feed dialog. It's flexible enough that you just need to setup your links and pass in some variables. I don't see the feed dialog being phased out as you mentioned they serve different purposes. I think they push the like as it's easier to use and not as likely to be abused.
You'll need to register an application and make sure to initialize the Facebook javascript SDK before you call the below function. If you're having issues with your popup it's probably due to the fact your FB init process is having issues. I've added a second function I use to init Facebook. Both functions use jQuery so you might have to modify if you don't use it.
You can create a pretty generic function like this:
$.shareMe = function(myName, myLink, myPicture, myCaption ) {
FB.ui(
{
method: 'feed',
name: myName,
link: myLink,
picture: myPicture,
caption: myCaption
},
function(response) {
if (response && response.post_id) {
alert('Thanks for Sharing.');
} else {
alert('Post was not published.');
}
}
);
}
and for Facebook initialization:
$.initFacebook = function(options){
$('#fb-root').remove();
$('body').append('<div id="fb-root"></div>');
var settings = {
'appId' : null,
'callback' : null,
'channelUrl' : null,
'status' : true,
'cookie' : true,
'xfbml' : true
};
if ( options ) {
$.extend( settings, options );
}
if( typeof( xc_app_id ) == 'undefined' ) { window.xc_app_id = settings.appId; }
window.fbAsyncInit = function() {
if(settings.channelUrl==null) {
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true });
} else {
settings.channelUrl=location.protocol+'//'+settings.channelUrl;
FB.init({appId: settings.appId, status: settings.status, cookie: settings.cookie, xfbml: settings.xfbml, oauth: true, authResponse: true, channelUrl: settings.channelUrl });
}
if(typeof settings.callback == 'function'){ settings.callback.call(this); }
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
}
and to call it you just use $.initFacebook({appId,'yourAppId'}); There are other options there you can lookup in the docs if you need them.

Reveal website-content when facebook-page liked

I'm trying to reveal content on my website only to people who like my facebook page. I've tried severall tutorials but none of them work. The closest I got was following this:
http://www.dejanlevec.com/2011/05/11/how-to-display-certain-page-content-only-to-users-who-have-liked-our-page-on-facebook/
I can get it to work if I first dislike the page and then like it on the facebook_test.php . Thus it doesn't detect if I already like the page.
I have done this with javascript before using FB.Event.subscribe and edge.create as described below:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID_HERE', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create',
function (response) {
window.location = "http://redirectexamplehere.com";
});
FB.Event.subscribe('edge.create',
function (response) {
window.location = "http://redirectexamplehere.com";
});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
This way a user will be redirected to wherever you specify upon them liking the page. Remember to load the SDK first or it won't work.
Detecting if a user likes you on a website is a bit trickier than in a Facebook page. You'll need to setup a Facebook application and use that on your website and have the user authenticate using the app in addition to liking your page. Once you have that connection with the user you can test to see if they are logged in and have liked your page. At that point you can display different types of content.
The extra step of having to authenticate the user is probably why you don't see this implemented on too many websites.