Like what you read? Share for your friends!

Now a days everybody uses Facebook as a way to share, interact and spend time. Then why webmasters cannot use face-book as a way to interact with visitors. Today I am going to share a script where webmasters can interact with visitors in a more personal way. When we visit a website for the first time, we love if the somebody greet us and welcome us to the website.

profile picture
facebook

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.
   
      


Comments || >

Subscribe via Email

Don't Miss Any Updates, Stay Connected!.

We respect your privacy and will never share your email address with any person or organisation.