Previously we have discussed how to use FB.getLoginStatus from Facebook. Sometimes, if you do not to apply jquery in your program, after logging in, users do not see the output of your program (such as users photos, photos of the user's friends). To be able to display the program output, your blog should make the process re-loading after login, in this case we suggest you to apply FB.EventSubscribe function. In this step, users can only login to your blog, but can not logout. When the user wants to logout, then the user must open the facebook site and then logout from the site. This method is not effective, users are always eager to logout from facebook on your blog. Therefore our advice is to use FB.logout. I am pleased if users visit the homepage after logout. This way you can apply like the following code
<body>
<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.init({
appId : 'Your-App-Id',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
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;
getUserPicture(accessToken); //function to retrieving data of your user, will discussed later
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
FB.Event.subscribe('auth.login', function(resp) {
window.location = window.location.href;
});
function getLogout(){
FB.logout(function(response){
window.location = 'http://www.threelas.com/';
});
}
};
// Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id ";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="user_checkins,email,publish_actions"></div>
<button id=”logoutfb” onclick=”getLogout()”>Logout</button>
</body>
FB.EventSubscribe function is to attach an event handling. In the example code above, when someone login from your blog, FB.EventSubscribe will attach auth.login event. The contents of the event login is to reload the current page (window.location = window.location.href). For example, if you open http://www.threelas.com/2012/07/introduction-to-integrate-blogger-with.html, then you login on that page, FB.EventSubscribe will reloading that page. When the user clicks the logout button, the user will be logout from facebook and will reload to the main page http://www.threelas.com. Caution: do not ever put FB.getLoginStatus with window.location, because the current page will reload without stopping. Basically, you can get the access token from EventSubscribe function, because the output from EventSubscribe is
{
status: "", /* Current status of the session */
authResponse: { /* Information about the current session */
userID: "" /* String representing the current user's ID */
signedRequest: "", /* String with the current signedRequest */
expiresIn: "", /* UNIX time when the session expires */
accessToken: "", /* Access token of the user */
}
Post a Comment