 |
What if the website understand your name and greet us by saying your name. Then that would be more nice, right? This script includes a welcome message for face-book users for blog-spot. When visitors first visit the website by logging in with face book, the script will understand the user and greet the visitor like this, “Hello Joe”. This will give the visitor, more personal attraction to stay and explore the site. The visitor may visit the site again.
For using the script, You can add your app id below. You can change the word, “Hello” to whatever you want. Just replace, “Hello” with a word you wish. Then you just need to copy the entire script to HTML gadget. For that copy the entire code, then go to layout page. Click the “add to gadget link”. Select the HTML gadget button. Then paste/add the script to the box and save it. Reload your website by logging into Facebook. You will see the “hello, your name” will be appearing on the website.
You can use the fb login button provided by developers.facebook.com. But you should add (data-perms=”email,user_checkins”) without brackets in the HTML code of the fb login script. This is to ensure the permissions from the user. If you do not have an app id, you can use 630535786999761 as app id.
<!– code start here –> <div id=”welcomeMessage”></div>
<!– Load the Facebook JavaScript SDK –>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘your app id’, // App ID
status : true, // check login status
cookie : true
});
// Check if the current user is logged in
// and has authorized the app
FB.getLoginStatus(function(response) {
// Check the result of the user
if(response && response.status == ‘connected’) {
// The user is connected to Facebook
// and has authorized the app.
// Now personalize the user experience
FB.api(‘/me’, function(response) {
var message = document.getElementById(‘welcomeMessage’);
message.innerHTML = ‘Hello, ‘ + response.first_name;
});
} else {
// The user has not authenticated your app,
// proceed with your normal (anonymous) flow.
}
});
};
// 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>
<!– code end here –>
<!– copy the below code and paste it anywhere you want the button to appear –> <div class=”fb-login-button” data-perms=”email,user_checkins” data-max-rows=”1″ data-size=”large” data-show-faces=”false” data-auto-logout-link=”true”></div>
<!– code end here –>
If the user is connected with Facebook, the script will ensure that the user is connected with face book. If not connected then the normal log in script will flow.
The main script is
FB.api(‘/me’, function(response) {
var message = document.getElementById(‘welcomeMessage’);
message.innerHTML = ‘Hello, ‘ + response.first_name;
});
} else {
// The user has not authenticated your app,
// proceed with your normal (anonymous) flow.
}
});
};
The usual Asynchronous script is listed below. You can avoid that if you have already installed the script to your website template.
window.fbAsyncInit = function() {
FB.init({
appId : ‘your app id’, // App ID
status : true, // check login status
cookie : true
});
// 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’));
Hope you will like it, If the script is not working kindly share it on the forum.
Akhil S Kumar 20-04-2014
