codesanook.com - ดึงข้อมูลเพื่อนของเราทุกคนมาแสดงบนหน้าเว็บด้วย Facebook Query Language (FQL)

ดึงข้อมูลเพื่อนของเราทุกคนมาแสดงบนหน้าเว็บด้วย Facebook Query Language (FQL)

เมื่อ : 28-Jan-12 10:00 อ่าน : 39 ความเห็น : 0
Tag : javascript jquery facebooksdk

Facebook Query Language เรียกย่อๆ ว่า FQL เป็น query language ที่เปิดโอกาสให้เราสามารถ query ข้อมูลผู้ใช้ ด้วยคำสั่งในรูปแบบเดียวกับ SQL Statement ดังนั้นการจะใช้งาน FQL ผู้พัฒนาจำเป็นต้องมีความรู้พื้นฐานของ SQL , select statement

คำสั่งที่เราจะเขียนกันในบทความนี้ ใช้ FQL ดึงข้อมูลชื่อ รูป profile , profile, url เพื่อนทุกคนของผู้ใช้ที่ log in App ของเราด้วย Facebook

รูป design ผลลัพธ์ที่เราต้องการ

เริ่มเขียนคำสั่งกันเลยนะครับ นำความรู้ในบทความที่ผ่านมาในหมวดหมู่ facebooksdk มาประยุกต์ใช้

เขียนคำสั่งต่อไปนี้ ต่อจาก FB.init เมธอด

               //check if user already logged in
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                          
                        //query all friends info of log in user
                        FB.api(
                        {
                            method: 'fql.query',
                            query: "SELECT name, pic_square, profile_url FROM user WHERE uid in " +
                                "(SELECT uid2 FROM friend WHERE uid1 = me() limit 0,5)"
                        },
                        function(response) {
                            
                            //iterate all friends
                            $(response).each(function(index,item){
                                
                                //item is friend (user object)
                                //append name , profile picture with link to profile page
                                $("#friendList").append(item.name + '<br />' +
                                '<a href="' + item.profile_url + '" target="_blank">' +
                                '<img src="' + item.pic_square + '" alt="" />' +
                                '</a>' +
                                "<br />");
                                
                            });
                         
                        }
                    );//end FB.api

คำอธิบาย

หลังจากตรวจสอบสถานะการ log in ของผู้ใช้ หากผู้ใช้ log in อยู่ให้ทำการ query ดึงข้อมูลเพื่อนของผู้ใช้ โดยเมธอด FB.api ที่มี อาร์กิวเมนต์ดังนี้

1. พารามิเตอร์ที่เป็น JSON Ojbect มีพร็อพเพอร์ตี้ชื่อ method ที่กำหนดค่าเป็น 'fql.query' เพื่อบอกว่านี่จะเป็นการใช้ FQL
และพร็อพเพอร์ตี้ชื่อ query โดยกำหนดค่าเป็นคำสั่ง FQL ในการดึงข้อมูลชื่อ, รูป profile, ลิงค์ไปยัง profile ของเพื่อน
Facebook ได้เตรียมตาราง (table) หลายตารางให้เราสามารถดึงข้อมูลผ่าน FQL ได้ อ่านเพิ่มเติม http://developers.facebook.com/docs/reference/fql/ ใน Table section

{
   method: 'fql.query', 
   query: "SELECT name, pic_square, profile_url FROM user WHERE uid in " +
   "(SELECT uid2 FROM friend WHERE uid1 = me())"
}

2. callback function รับข้อมูลที่ได้จากการ query และวน loop แสดงข้อมูลเพื่อนใน div id friendList

 function(response) {
                            
   //iterate all friends
   $(response).each(function(index,item){
                                
       //item is friend (user object)
       //append name , profile picture with link to profile page
       $("#friendList").append(item.name + '<br />' +
       '<a href="' + item.profile_url + '" target="_blank">' +
       '<img src="' + item.pic_square + '" alt="" />' +
       '</a>' +
       "<br />");
                                
    });
                         
 }

คำสั่งทั้งหมด facebook-query.html

<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>Facebook Query Language</title>
        <style type="text/css">
            #fb-root{
                font-size: 16px;
            }
        </style>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- include jQuery JavaScript library -->
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

    </head>
    <body>
        <div id="fb-root">
            <div id="friendList"></div>
        </div>
        <script>
            
            //fbAsyncInit is executed as soon as the JavaScript SDK is loaded asynchronously
            window.fbAsyncInit = function() {
               
                //initialize SDK
                FB.init({
                    appId      : 'appId', // App ID
                    channelUrl : 'channel.html', // Channel File
                    status     : true, // check login status
                    cookie     : true, // enable cookies to allow the server to access the session
                    xfbml      : true,  // parse XFBML
                    oauth      : true
                });
                
                //additional code                       
                    
                //check if user already logged in
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                          
                        //query all friends info of log in user
                        FB.api(
                        {
                            method: 'fql.query',
                            query: "SELECT name, pic_square, profile_url FROM user WHERE uid in " +
                                "(SELECT uid2 FROM friend WHERE uid1 = me())"
                        },
                        function(response) {
                            
                            //iterate all friends
                            $(response).each(function(index,item){
                                
                                //item is friend (user object)
                                //append name , profile picture with link to profile page
                                $("#friendList").append(item.name + '<br />' +
                                '<a href="' + item.profile_url + '" target="_blank">' +
                                '<img src="' + item.pic_square + '" alt="" />' +
                                '</a>' +
                                "<br /><br/>");
                                
                            });
                         
                        }
                    );//end FB.api
                        
                    }else{
                        
                        //the user hasn't even logged in to Facebook
                        //show pop up window for user to log in
                        //or not logged in this app with facebook
                        alert("User is not logged in facebook or not logged in this app with facebook.")
                        FB.login(function(response) {
                            if (response.status === 'connected') {
                                alert("User is logged in this app with facebook."); 
                            }
                            else {
                                alert("User is not logged in this app with facebook.");
                            }
                        },{perms: 'read_stream, publish_stream, offline_access'});
                    }
                });//end  FB.getLoginStatus
                
  

            };//end window.fbAsyncInit

            // load the SDK asynchronously
            (function(d){
                var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
                js = d.createElement('script'); js.id = id; js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                d.getElementsByTagName('head')[0].appendChild(js);
            }(document));
            
        </script>

    </body>
</html>

ทดลองเปิด facebook-query.html ผ่าน web browser ตัวอย่าง url http://localhost/FacebookJavascriptSdk/facebook-query.html

note: หากผู้ใช้ยังได้ log in App ด้วย Facebook แนะนำให้ทำการ log in ออกจาก Facebook ก่อน เพื่อทำการ log in ใหม่และอนุญาตให้ App เข้าถึงข้อมูลของผู้ใช้ได้

รูปผลลัพธ์การทำงาน

ลองนำคำสั่งเหล่านี้ไปประยุกต์ใช้งานกันดูนะครับ ^^

download souce code ตัวอย่าง (NetBeanProject)

FacebookJavascriptSdk.zip

ความเห็น

แสดงความเห็น

ชื่อ*
อีเมล์*	ไม่เผยแพร่
ความเห็น*

อักษรในรูปภาพ*	พิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้

ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...

ดึงข้อมูลเพื่อนของเราทุกคนมาแสดงบนหน้าเว็บด้วย Facebook Query Language (FQL)

ความเห็น