index.html

<!doctype html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div id="fb-root"></div>
    <script src="//connect.facebook.net/en_US/all.js"></script>
    <button id="fb-login">Login</button>

    <div class="dialog"></div>

    <script>
        window.fbAsyncInit = function() {
                FB.init({
                appId      : 'YOUR_APP_ID',
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
            });

                // Additional initialization code here
                FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    Friends();
                }
  
            });


            document.getElementById('fb-login').onclick = function() {
              FB.login(function(response) {
                
                if (response.status === 'connected') {
                    Friends();
                } 
              });
            };

            };
                    

            function Friends() {
                FB.api('/me/friends', function(response) {
                    if(response.data) {
                        $('.dialog').load('dialog.html', function() {
                            var $friends = $('#friends');
                            // Load all friends
                            $.each(response.data, function() {
                                var name = this.name.replace(/ /, '<br />');
                                $friends.append('<li data-id="'+this.id+'" data-name="'+this.name+'"><img src="http://graph.facebook.com/'+this.id+'/picture" alt="'+this.name+'"><p>'+this.name+'</p></li>');
                            });
                        });
                    } else {
                        alert("Error!");
                    }
                });
            }

            function process(id) {
                    alert(id);
                    $('.facebook-friends').fadeOut(200, function() { $(this).remove(); });
                }           
                    
            // Load the SDK Asynchronously
            (function(d){
                var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
                if (d.getElementById(id)) {return;}
                js = d.createElement('script'); js.id = id; js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                ref.parentNode.insertBefore(js, ref);
            }(document));
        </script>
</body>
</html>