السلام عليكم ورحمة الله وبركاته

مقدمة:

"تسجيل الدخول" أو "Login" عن طريق حساب الفيسبوك هو شيء بسيط جدا من خلال SDK Javascript المبرمجة مسبقا من طرف شركة الفايسبوك. الامر لايستغرق سوى بضع دقائق وجافا سكريبت قليلة لتنفيذ هذه المهمة. لنبدأ على بركة الله.

إنشاء تطبيق في موقع الفايسبوك:




قبل تمكين زوارك من "تسجيل الدخول" أو "Login" عبر حسابهم في الفايسبوك، سوف تحتاج أولا إلى إنشاء تطبيق على موقع الفيسبوك.

للقيام بذلك، انتقل إلى هذه الصفحة، ثم انقر فوق الزر "إنشاء تطبيق جديد" أو "Create New App" في الاعلى على اليمين.

حالما يتم إنشاء التطبيق الخاص بك، يمكنك إكمال بعض المعلومات الإضافية عن طريق الذهاب إلى "الإعدادات" أو"Setting" الخاص بالتطبيق.



ضع صورة خاصة بالتطبيق الذي أنشأته مع قليل من الشرح حول ماهية التطبيق لاضفاء نعو من الاحترافية وتنظيم لائحة تطبيقاتك.
على العموم إنتقل إلى علامة التبويب "موقع ويب" أو"Website, سوف تجد مفتاحين وحقلين, ضع على الأقل في الحقل الأول (Site URL)، عنوان موقعك والذي سيضم كود"تسجيل الدخول" أو "Login" حتى يتسنى للتطبيق الذي أنشأته الولوج اليه وإرسال معلومات المستخدم, بالنسبة إن كنت تستخدم "السيرفر المحلي" أو"Localhost" ضع كلمة localhost في خانة "App domains".

مايهمنا الساعة هو "رمزالتطبيق" أو"App Id" الذي يمكن الكود من معرفة أي تطبيق سيستعمل في الفايسبوك.


تثبيت الملفات الضرورية للتواصل مع تطبيق الفيسبوك :


إفتح بواسطة "DreamWeaver","NotePad" أو أي برنامج آخر, الصفحة التي تريد فيها من المستخدمين "تسجيل الدخول" أو "Login" على سبيل المثال "home page" الخاص بموقعك, وأضف الكود التالي في الصفحة الخاصة بك.

رمز Code:





:

تستخدمه الفيسبوك من أجل ربط صفحتك مع المكتبة DOM وتعني :
Document Object Mode الخاصة بالجفا سكريبت،لن نضع فيها أي شيئ لكن وجب أن تكون في أول السطر حتى تشتغل باقي الاكواد في السطور التالية.
بعد ذلك نقوم بإستدعاء Facebook SDK, نلاحظ في الرابط رمز en_US.
يتم استخدامه لتحديد اللغة التي يعرض الفيسبوك بها نافذة "تسجيل الدخول" أو "Login" ، زر الدخول،....الخ. يمكنك تغير اللغة بوضع الرمز المناسب كــ fr_FR, ar_AR.


في الشق الثاني من الكود قمنا بكتابة كود جافا سكريبت لتشغيل التطبيق على الصفحة, لاحظ أن الكود الخاص بنا يحتوي على دالة واحدة "Function" وهي () FB.init. هذه الاخيرة تُعنى بتهيئة SDK، وتأخد أربعة من الــ Parameters.

• appId : رمز ID الخاص بالتطبيق الذي نشأته على الفايسبوك.
• status : التحقق من إتصال المستخدم أم لا.
• cookie : إستخدام الكوكيز من عدمه.
• xfbml : تحويل XFBML الى HTML.
  

أنصح أن تترك الــ Parameters الثلاثة الاخيرة true .الآن بعد أن يتم تحميل SDK وتهييئها ضع هذا الكود التالي :

رمز Code:


























الان بعد تركيب هدا الكود سيظهر زر "تسجيل الدخول" أو "Login" على هذا النحو :




هذا الكود السابق هو مثال فقط ليس إلا, يمكن أن تضع الكود كيفما تشاء ليس بالضرورة على هذه الشاكلة لكن حافظ على id , class الخاص بالوسوم div.

تستطيع أن تركب كود زر الفايسبوك مباشرة بدون الكود السابق :

رمز Code:

يمكنك التعديل على زرالفيسبوك على هذه الصفحة . نأتي لشرح الكود HTML .



كما تلاحظ أن الوسوم كلها مجموعة في وسم رئيسي ذو "class="box بالنسبة للوسوم الفرعية فهي تظم face_button # وsocial_net_profile# و face_profile#.
face_button_box # يحتوي على زر الاتصال ويتم عرضها عند عدم اتصال المستخدم.
social_net_profile# يحتوي على معلومات حول المستخدمين ويتم عرضها فقط عندما يتم اتصال المستخدم.
عند الاتصال، يتم عكس الأدوار:

يختفي ( الوسم /tag ) ذو"id=" face_button والذي يحتوي على زر الاتصال ويتم عرض ( الوسم /tag ) ذو " id=" social_net_profile مع معلومات المستخدم القادمة من الفايسبوك.

لنرجع ونشرح زر ( تسجيل الدخول/ Login ), والكود خاصته هو كما ذكرنا آنفا :

رمز Code:

email : عرض الاميل الخاص بالمستخدم.
user_birthday : عرض تاريخ إزدياده.
read_stream : عرض منشوراته الاخيرة على حائطه (status).

هناك العديد من التراخيص المتاحة الأخرى كانشر الرسائل، الاعجاب بالصفحات، وما إلى ذلك، لكنها لا تعنينا .
نحن الآن نريد تمكين المستخدمين الولوج لموقعنا بحسابهم فايسبوك.

( تسجيل الدخول/ Login ) للاعضاء :

عند زيارة المستخدم لموقعك هناك أربع حالات ممكنة:

2. المستخدم لم يقم بتسجيل الدخول مسبقا في الفيسبوك ولم يسمح للتطبيق الذي انشأته بالموافقة على عرض معلوماته.
3. المستخدم لم يقم بتسجيل الدخول مسبقا في الفيسبوك وسمح للتطبيق الذي انشأته بالموافقة على عرض معلوماته.
4. المستخدم قام بتسجيل الدخول مسبقا في الفيسبوك ولم يسمح للتطبيق الذي انشأته بالموافقة على عرض معلوماته.
5. المستخدم قام بتسجيل الدخول مسبقا في الفيسبوك وسمح للتطبيق الذي انشأته بالموافقة على عرض معلوماته.

المستخدم ستظهر له النوافذ التالية عند الضغط على زر ( تسجيل الدخول/ Login ) الخاص بالفايسبوك :







سنقوم ببرمجة الحالة 1 و 2 بواسطة function رقم 1 والحالة 3 و 4 من خلال function أخرى رقم 2 كلن على حدا.

نبدأ بــfunction رقم 1 التي سوف تقوم بــ ( تسجيل الدخول/ Login ) للمستخدم الفيسبوك في حالة لم يكن متصلا مسبقا بالفايسبوك.

رمز Code:
$(document).ready(function() {
FB.Event.subscribe('auth.login', function(response) {
});
});
: $(document).ready()

كما تلاحظون فقد إستعملت مكتبة الجكويري نظرا لسهولة التعامل معها حيث سوف نضع الكود داخل الدالة أعلاه .
تشتغل هذه الدالة فقط عندما تصبح الصفحة جاهزة بعد (Reload/التحميل).


:FB.Event.subscribe()

يتم استخدام هذه الدالة كحلقة وصل بين موقعك وحساب المستخدم حيث تقوم بالتحكم في الــ Events كا Like,Notification ..الخ وعرضها على موقعك لمزيد من المعلومات عن هذه الــ Events شاهد هذه الصفحة، في مثالنا سنستعمل الــ Event التالية :

'auth.login':


يتم تشغيل هذه الـ Event عندما يتصل المستخدم.


:function(response)

وظيفتها جلب المعلومات الشخصية للمستخدم بعد الاتصال CallBack.
الآن بعد أن يتم اتصال المستخدم، يمكننا عرض المعلومات الأساسية للعضو عن طريق هذه الدالة .


: FB.api()

تأخد هذه الدالة إثنين من الــ parametre الاول يضم ( مسار/ url ) الخاص بـ ( API (application programming interface للتعامل مع الواجهة الرسومية للفايسبوك والثانية هي دالة callBack تأخد المعلومات يمكنك البحث على مزيد من المعلومات حول API في هذه هذه الصفحة.
بالنسبة للمسار الخاص بــ API سيكون http://graph.facebook.com.
سوف نستخدم في البداية عنوان me/ للحصول على المعلومات الأساسية للمستخدم المتصل، وهي:
رمز Code:
FB.Event.subscribe('auth.login', function(response) {
FB.api('/me', function(response) {
// هنا سيتم عرض المعلومات الاساسية الخاصة بالمستخدم
});


});
صورة المستخدم غير متوفر في المعلومات الأساسية، ولكن يمكننا إظهارها من خلال الـ ID.
بعد إستدعاء المعلومات من حساب المستدخم سوف ندمجها داخل الموقع الخاص بك عن طريق () html الخاصة بـ jQuery :

رمز Code:
FB.Event.subscribe('auth.login', function(response) {

FB.api('/me', function(response) { var url = 'http://graph.facebook.com/' + response.id + '/picture';

$('#facebook_profile_image').html('');
$('#facebook_profile_text').html('
' + response.name + '
Deconnexion');
});
});
أيضا عند الاتصال, برمجنا طلب لإستدعاء العنوان البريد الإلكتروني وتاريخ الميلاد من المستخدم. وبالتالي سوف يظهر هذين العنصرين أيضا في الموقع الخاص بك :

رمز Code:
FB.Event.subscribe('auth.login', function(response) {

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

var url = 'http://graph.facebook.com/' + response.id + '/picture';

$('#facebook_profile_image').html('');
$('#facebook_profile_text').html('
' + response.name + '
Deconnexion');var user_data = '<ul>Votre date de naissance : ' + response.birthday + '
Votre adresse email : ' + response.email + '
Votre bio : ' + response.bio + '
';
$('#facebook_user_data').html(user_data);

});

});
هذه المعلومات سوف تظهر في (الوسم/Tag) الذي هو face_usr_data #.
بالتالي كما أسلفنا فقد تم عرض بواسطت هذا الكود أعلاه عرض المعلومات الاساسية للمستخدم زد على ذالك صورته الشخصية.
بواسطة الدالة () FB.api والــ URL التالي /me/posts/ سنقوم بعرض آخر ثلاث تحديثاث للمنشورات التي قام بها على حسابه بالفايسبوك :

رمز Code:
FB.Event.subscribe('auth.login', function(response) { FB.api('/me', function(response) {

var url = 'http://graph.facebook.com/' + response.id + '/picture';

$('#facebook_profile_image').html('');
$('#facebook_profile_text').html('
' + response.name + '
Deconnexion');

var user_data = '

• Votre date de naissance : ' + response.birthday + '
• Votre adresse email : ' + response.email + '
• Votre bio : ' + response.bio + '';
  $('#facebook_user_data').html(user_data);
  
  FB.api('/me/posts', function(response) {
  
  var messages = '
• Vos 3 derniers statuts :
  • ';
    
    $.each(response.data, function(key, value) {
    
    messages += '
  • ' + value.message + '';
    return (key != 2);
    
    });
    
    messages += '

';

$('#facebook_user_data').append(messages);

})

});

});

بالنسبة للــ response الموجودة داخل الدالة (FB.api('/me/posts' function(response فهي عبارة عن object يحتوي على SubObject عديدة لعرضها كلها نحتاج الى loop من نوع ()each.$ الخاصة بالجكويري لاحظ تركيبة الـ Object :

رمز Code:
response
data
0
id
likes
...
message (status 1)
1
id
likes
...
message ( status 2)
2
...
...
24
paging
سنذهب مباشرة إلى الـ SubObject الذي هو data حيث يحتوي على قائمة من المنشورات Status الخاصة بالمستخدم وبالضبط خاصية الرسائل message التي تضم بداخلها المنشورات.

رمز Code:
return (key != 2);

هذا الكود يوقف الــ Loop التي هي ()each.$ بعد عرض ثلاثة منشورات خاصة بالمستخدم.
سندرج هذا الكود فقط قبل نهاية الدالة () FB.Event.subscribe.

رمز Code:
$('#facebook_button_box').hide();
$('#facebook_profile').show();
سطرين من هذا الكود يمكننا من إخفاء زر تسجيل الدخول بعد إتصال المستخدم, وإظهار الـ Tag التي تحتوي على معلومات المستخدم.
وأخيرا وليس آخرا حصلنا على المعلومات التي تهمنا للحالة 1 و2.

الآن يمكننا برمجة الحالات (3 و 4) حيث يكون فيه المستخدم متصلا مسبقا بحسابه على الفايسبوك. للقيام بذلك، قم بإضافة الدالة التالية بعد أولى:

رمز Code:
FB.getLoginStatus(function(response) {if(response.session) {
// الكود هنا
}

});
وظيفة () FB.getLoginStatus معرفة ما اذا كان المستخدم متصلا مسبقا وأعطى موافقته ليقوم التطبيق بإستراد معلوماته من حسابه.
وظيفة الـ object كما ذكرنا response هو جلب تلك المعلومات من الحساب callback والتي تحتوي على خاصية session. هذه الخاصية سوف تخبرنا إذا كان المستخدم متصلا أم لا.
إذا كان متصلا بالفعل، يمكنك أن تنسخ نفس الكود الموجود في الدالة السابقة رقم 1.
بالضبط داخل هذه الدالــة ()FB.Event.subscribe ولصقه في الـ condition التالية ()if.

بقي لنا شيئ أخير سهل وهو برمجة تسجيل الخروج log out في حالة ما إذا ضغط المستخدم عل زر الخروج. للقيام بذلك، وسوف نستخدم FB.logout كالتالي:

رمز Code:
$('#facebook_logout').live('click', function() {
FB.logout(function(response) {
$('#facebook_button_box').show();
$('#facebook_profile').hide();
});
return false;
});
وأخيرا، الكود النهائي الذي يضم الدوال الثلاثة المذكورة سابقا:

رمز Code:
$(document).ready(function() {

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

FB.api('/me',*function(response) {*var*url*=*'http://graph.facebook.com/'*+response.id*+*'/picture';

$('#face_profile_img').html('[IMG]http://www.vb.mjawshy.net/'*+*url*+*'[/IMG]');
$('#face_profile_txt').html('
'*+*response.name*+*'
Deconnexion');var*user_data*=*'

• Votre date de naissance : '*+*response.birthday*+*'
• Votre adresse email : '*+response.email*+*'
• Votre bio : '*+*response.bio*+*'';
  $('#face_usr_data').html(user_data);
  
  FB.api('/me/posts',*function(response) {var*messages*=*'
• Vos 3 derniers statuts :
  • ';
    
    $.each(response.data,*function(key, value) {
    
    messages*+=*'
  • '*+*value.message*+*'';*return*(key*!=*2);
    
    });*
    
    messages*+=*'

';

$('#facebook_user_data').append(messages);

});

});

$('#face_btn_box').hide();
$('#face_profile').show();

});




FB.getLoginStatus(function(response) {if*(response.session) {

FB.api('/me',*function(response) {*var*url*=*'http://graph.facebook.com/'*+response.id*+*'/picture';

$('#face_profile_img').html('[IMG]http://www.vb.mjawshy.net/'*+*url*+*'[/IMG]');
$('#face_profile_txt').html('
'*+*response.name*+*'
Deconnexion');var*user_data*=*'Votre date de naissance : '*+*response.birthday*+*'
Votre adresse email : '*+response.email*+*'
Votre bio : '*+*response.bio*+*'
';
$('#face_usr_data').html(user_data);

FB.api('/me/posts',*function(response) {var*messages*=*'Vos 3 derniers statuts :

• ';
  
  $.each(response.data,*function(key, value) {
  
  messages*+=*'
• '*+*value.message*+*'';*return*(key*!=*2);
  
  });*
  
  messages*+=*'

';

$('#face_usr_data').append(messages);

});

});

$('#face_btn_box').hide();
$('#face_profile').show();

}
});

$('#face_logout').live('click',*function() {

FB.logout(function(response) {

$('#face_btn_box').show();
$('#face_profile').hide();

});return*false;

});
});
خلاصة ما تعلمته وما يمكنك القيام به الآن:

أنت الآن لديك صفحة قادرة على تسجيل الدخول للمستخدمين عبر حسابهم الفيسبوك. الطريقة ليست معقدة وحاولنا تبسيطها حتى يسهل فهمها لانه ليس من السهل على الجميع أن يفهم كيف يعمل API الخاص بالفايسبوك.
المرجوا إحترم خصوصية المستخدمين إدا كنت بصدد إستخدام هدا النظام. لا تفعل أي شيء دون موافقتهم الصريحة. حاول قدر الإمكانية لتسجيل الخروج من موقع الويب الخاص بك وقتما يريدون.

يمكنك تحميل الملف كامل بالكود هــــــنـــا على الميديافير.