חיבור האתר לפייסבוק

לאחר החיבור האתר לפייס נוכל לקבל פרטים של המשתמש: ID בפייס, תמונה, כינוי, שם פרטי. 
רוצים לנסות?
כנסו לAPI של פייסבוק ותקבלו את התשובות בJSON
תוכלו לרשום שם לדו' את מספר משתמש: 851080087
נקבל את כל הפרטים שהמשתמש הזה אישר שיהיו ציבוריים. לדו':

{
  "id": "851080087",
  "first_name": "Swapnil",
  "last_name": "Patil",
  "link": "https://www.facebook.com/app_scoped_user_id/10154995541255088/",
  "name": "Swapnil Patil",
  "updated_time": "2014-08-24T03:53:08+0000"
}

בשביל לבצע הטמעה של התמונה של המשתמש הזה, נוכל בקלות לקבל את התמונה שלו, על ידי המחרוזת הבאה:

http://graph.facebook.com/851080087/picture?type=small

נוכל לבקש את התמונה, בגדלים שונים: small, normal, large, square.

החיבור לאתר לפייסבוק יכול להתבצע על ידי שתי אפשרויות:

ראשית, בשביל לבצע חיבור לאחר שנבצע הרשמה באתר של פייסבוק של האפליקציה שלנו (פשוט ללכת אחרי ההוראות בכתובת הזו), נבחר את הכתובת שבה אנחנו מתחברים באתר שלנו לפייסבוק (במידה וכרגע אנחנו עובדים בלוקל הוסט - פשוט נכתוב זאת כך), כי הפייס מבצע התאמה מלאה בין הכתובת שנשלחת בעת ההתחברות באתר לבין ההגדרות של בעל האתר.

1. ניתן להעתיק את הקוד שאתר של הפייסבוק מציג
בממשק ניתן לשנות את הכפתור: גודל, שורות, חיבור של החברים שאהבו את זה.

הבעיה הרצינית בסיפור הזה, שמחד זה מאוד פשוט להטמיע ולהשתמש. אבל! החיבור מבצע POSTBACK, ואם ביצענו שינויים ברמת הקליינט הם יעלמו לאחר החיבור. אפשר לבצע פתיחת חלון חדש להתחברות, ואז ממש לא משנה הPOSTBACK.

2. אפשר לכתוב קוד שיבקש אישור מהמשתמש לקבל את הפרטים שלו. לשם כך צריך לבקש מהמשתמש  במידה והוא מאשר את הפרטים שאותם אנחנו רוצים לקבל ממנו. נקבל Access Token שהוא אישור כניסה שניתן לאחר התחברות בפקודת JS הבאה:

var accessToken = response.authResponse.accessToken;

בשביל לחוש את הדברים שוב נכנס לAPI של הפייסבוק, והפעם נעשה get access token ונקבל המון מידע.

דוגמא לקוד זה נמצא פה. או גירסא דומה:

<div class="fb-login-button" autologoutlink="true" scope="user_birthday,email">

                        התחבר עם פייסבוק

</div>

בשביל להבין את הדברים היטב, צריך להבין שלאחר האישור הראשוני, כל כניסה אל האתר מאושרת אוטומטית.לכן בעת הכניסה בפעם הבאה מיד נקבל את כל הפרטים שנדרוש מהפייסבוק על סמך האישור שניתן פעם.  אם נרצה לבטל את האישור לאתר נצטרך בהגדרות של פייסבוק האישי לבטל את החיבור. ביצוע LOGOUT ינתק את המשתמש מהאתר, וגם מהפרופיל שלו! הוא יצטרך בכניסתו לפייסבוק לבצע כניסה מחדש.

קוד באתר שמבצע הכנסה של תמונה אוטומטית. המחשב מזהה שהמשתמש מחובר לפרופיל שלו לפייסבוק לוקח את הID ומציג את התמונה באתר.
ראשית, נוסיף לאתר DIVfb-root שעליו בונה הפייס את ההגדרות שלו, במידה ולא נוסיף פקודות הJS של הפייס יעשו זאת בעצמם, ואת הDIV  toolBar שבו תופיע התמונה

<!---Facebook--->

   <div id="fb-root"></div>

  <div id="toolBar"></div>

<!---end Facebook--->

<script>

 window.fbAsyncInit = function () {

            FB.init({

                appId: '****************', // App ID

                scope: 'id,name,gender,email,user_birthday',

                status: true, // check login status

                cookie: true, // enable cookies to allow the server to access the session

                frictionlessRequests: true,

                version: 'v2.2', // use version 2.1

                xfbml: true  // parse XFBML

            });

            FB.Event.subscribe('auth.statusChange', function (response) {

                //alert(response.status + " Event");

                if (response.status == 'connected') {

                    // user has auth'd your app and is logged into Facebook

                    FB.api('/me', function (me) {

                        if (me.name) {

                            LoadImgUser(me);

                        }

                    })

                } else if (response.status === 'not_authorized') {

                    // The person is logged into Facebook, but not your app. 

                    // user has not auth'd your app, or is not logged into Facebook

                } else {

                    // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.

                }

            });

        };

        // 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.async = true;

            js.src = "//connect.facebook.net/en_US/sdk.js";

            fjs.parentNode.insertBefore(js, fjs);

        }(document, 'script', 'facebook-jssdk'));

        function LoadImgUser(me) {

            ////add to client

            var toolBar = document.getElementById("toolBar");

                img = document.createElement('img');

                img.src = "http://graph.facebook.com/" + me.id + "/picture?type=small";

                img.id = "profileImg";

                toolBar.appendChild(img);

        }

<script/>

דוגמא לLOGOUT, שתי הדוגמאות מבצעות את אותה פעולה, ניתוק המשתמש אפילו מהפרופיל שלו:

function logoutFB() {

           window.location = "https://www.facebook.com/logout.php?next=" + url + "&access_token=" + accessRes.accessToken;

            FB.logout(function (response) {//log out olso user

                // user is now logged out

            });        }

את הנתון accessToken שמרנו בעת ההתחברות אל הדף