Facebook SDK للغة Javascript مع jQuery
في هذا العرض التوضيحي، ستتعلم كيفية دمج Facebook SDK للغة Javascript في تطبيق الويب الذي يستند إلى jQuery. توفر كلا من jQuery وJavaScript SDK حلولهما الخاصة لتأجيل تنفيذ الرمز إلى أن يتم تحميل المكتبات، ويساعدك هذا العرض التوضيحي على الجمع بين الأداتين وضمان جاهزيتهما للاستخدام قبل استدعاء مجموعة SDK.
يستخدم هذا المثال jQuery 2.0.0 المقدمة من شبكة توفير محتوى مكتبات Google المستضافة. لمعرفة المزيد حول jQuery، ألق نظرة على وثائق jQuery
التنفيذ
أضف jQuery لرأس المستند، وقم بتنفيذ طريقة $(document).ready()، والتي يتم تنفيذها عند اكتمال نموذج كائن المستند "DOM" وإنشاء مثيل jQuery. ستبدو صفحتك على نحو مشابه لهذا:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>jQuery Example</title>
<script>
$(document).ready(function() {
// Execute some code here
});
</script>
</head>بدلاً من استيراد JavaScript SDK لفيسبوك مع البرنامج النصي الافتراضي غير المتزامن، استخدم طريقة getScript() لـ jQuery لاستيراد مجموعة SDK من عنوان URL الصحيح للغة المستخدم. يمكنك ترك البروتوكول الموجود في بداية عنوان URL، ويؤدي ذلك إلى تقديم بروتوكول مطابق لعنوان URL الحالي.
افتراضيًا، تضع jQuery الطابع الزمني على الطلبات غير المتزامنة لتجنب تخزينها مؤقتًا في المتصفح. سترغب في تعطيل هذه الوظيفة باستخدام طريقة ajaxSetup()، وبذلك يتم التخزين المؤقت لمجموعة SDK محليًا بين الصفحات.
إن طريقة getScript() هي طريقة غير متزامنة، ولذلك ستقوم بتمرير وظيفة استدعاء غير محددة للهوية يمكنك فيها بدء تشغيل رمز مجموعة SDK كالمعتاد. أضف معرف تطبيقك من لوحة تحكم التطبيق.
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '{your-app-id}',
version: 'v2.7' // or v2.1, v2.2, v2.3, ...
});
$('#loginbutton,#feedbutton').removeAttr('disabled');
FB.getLoginStatus(updateStatusCallback);
});
});فصل التبعية
يضمن وضع منطق استدعاء مجموعة SDK بالكامل في وظيفة استدعاء getScript وجود كائن FB، لكن ذلك لا يشكل نمط تصميم رائع لتطبيق معقد. ولأن كائن FB هو كائن عام، يمكنك وضع منطق مجموعة SDK خارج وظيفة استدعاء getScript طالما تحققت من وجوده قبل استدعائه. بدلاً من ذلك، يمكنك استخدام إطار تبعية وحدة مثل RequireJS لضمان تحميل كائن FB كجزء من إعداد التطبيق.