Facebook SDK للغة Javascript مع RequireJS

في هذا العرض التوضيحي، تتعلم كيفية دمج Facebook SDK للغة Javascript مع وحدات JavaScript الأخرى باستخدام RequireJS. عادة، لا تتوافق JavaScript SDK مع نمط تصميم تعريف الوحدة غير المتزامن (AMD)، ولذلك يتناول هذا العرض التوضيحي كتابة مكتبة صغيرة لتوفير كائن FB الذي تم إنشاؤه بواسطة مجموعة SDK.

يفترض هذا العرض التوضيحي أنك على دراية بوحدات RequireJS وJavaScript. اكتشف المزيد حول RequireJS.

التكوين

قم بتكوين برامج RequireJS النصية الأخرى كالمعتاد، وأضف ملف .js جديد للتفاعل مع مجموعة Facebook SDK. يفترض هذا المشروع وجود بنية دليل تشبه التالي:

- project/
   - index.html
   - scripts/
      - main.js
      - require.js

أضف ملفًا جديدًا لتكوين مجموعة SDK والتفاعل معها، على النحو التالي:

- project/
    - index.html
    - scripts/
       - main.js
       - require.js
       - fb.js

من المفترض أن تستورد برنامج requirejs النصي وتعلن main.js كأساس بياناتك على النحو التالي:

<script data-main="scripts/main" src="scripts/require.js"></script>

إضافة مكتبة صغيرة إلى مجموعة Facebook SDK

في البرنامج النصي الرئيسي لمشروعك، أضف إعلان مكتبة صغيرة إلى require.config، على النحو الموضح:

require.config({
  shim: {
    'facebook' : {
      exports: 'FB'
    }
  },
  paths: {
    'facebook': 'https://connect.facebook.net/en_US/sdk.js'
  }
})
require(['fb']);

يؤدي ذلك إلى إنشاء وحدة facebook، باستخدام عنوان URL لمجموعة JavaScript SDK، ووضع علامة على كائن FB كتصدير لتلك الوحدة.

في fb.js الذي تم إنشاؤه مؤخرًا، يمكنك إنشاء مثيل كائن FB واستخدامه كالمعتاد. أضف معرف تطبيقك من لوحة تحكم التطبيق.

تحتاج فقط لإحاطة الرمز بكتلة define، وتمرير وحدة مكتبة facebook كتبعية مطلوبة.

define(['facebook'], function(){
  FB.init({
    appId      : '{your-app-id}',
    version    : 'v21.0'
  });
  FB.getLoginStatus(function(response) {
    console.log(response);
  });
});

راجع أيضًا

• بدء استخدام Facebook SDK للغة Javascript
• مرجع JavaScript SDK