افتح Graph Stories على الويب

يتناول هذا المستند الخطوات الأساسية لنشر أول حدث لك باستخدام Open Graph.

قبل بدء الاستخدام، تحتاج لما يلي:

عند الانتهاء من هذا الدليل، يمكنك أيضًا التعرف على الخطوات التالية التي يمكنك تنفيذها.

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

من الممكن أن يكون لديك بالفعل معرف تطبيق فيسبوك لمشروعك. ويمكنك استخدام معرف التطبيق نفسه عبر عدة منصات مثل iOS وAndroid ومواقع الويب.

إذا لم يكن لديك معرف تطبيق فيسبوك لمشروعك، يجب عليك البدء بإنشاء واحد:

إنشاء معرف تطبيق جديد

 
يؤدي ذلك إلى إنشاء مربع منبثق يطالبك بإدخال معلومتين:

  • اسم عرض. ويشير إلى اسم التطبيق المستخدم عند نشر الأحداث على فيسبوك وفي عدد من الأماكن الأخرى. استخدم دليل بدء استخدام Open Graph أو أي دليل مشابه.
  • مساحة اسم. غير مطلوبة لهذا الدليل ولذا اتركها خالية وحسب.
  • فئة. ستحدد الفئة نوع التطبيق الذي تقوم بإنشائه. حاليًا، فقط اختر التواصل.

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

أكمل الحقول التالية، على النحو الظاهر بلقطة الشاشة هذه:

  • البريد الإلكتروني لجهة الاتصال. عنوان بريدك الإلكتروني كمطور.
  • نطاقات التطبيق. النطاق الذي ستتم استضافة تطبيقك به (دون البادئة http:// أو https://.)

يتناول هذا المثال صفحة ويب أساسية، لذلك يتطلب الأمر إضافة الويب كمنصة. انقر على إضافة منصة أسفل الصفحة وحدد موقع ويب.

أدخل المسار الذي تريد تخزين ملفك فيه، والذي سيتم تقديمه لك فيما يلي.

بعد الانتهاء انقر على حفظ التغييرات من أسفل.

إعداد التطبيق

ضع الملف التالي في عنوان URI الذي حددته في الإعدادات أعلاه.

في الملف، يجب عليك تغيير عنصر واحد، وهو معرف التطبيق. ابحث عن 'fbAppId' في الملف واستبدل قيمته بمعرف التطبيق المدرج أعلى صفحة الإعدادات من لوحة التحكم في التطبيق.

<html>
<head>
<title>Open Graph Getting Started App - og.likes</title>
<style type="text/css">
div { padding: 10px; }
</style>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
  // You probably don't want to use globals, but this is just example code
  var fbAppId = 'replace me';
  var objectToLike = 'http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/';

  // This check is just here to make sure you set your app ID. You don't
  // need to use it in production. 
  if (fbAppId === 'replace me') {
    alert('Please set the fbAppId in the sample.');
  }

  /*
   * This is boilerplate code that is used to initialize
   * the Facebook JS SDK.  You would normally set your
   * App ID in this code.
   */

  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : fbAppId, // App ID
      status     : true,    // check login status
      cookie     : true,    // enable cookies to allow the
                            // server to access the session
      xfbml      : true,     // parse page for xfbml or html5
                            // social plugins like login button below
      version     : 'v2.7',  // Specify an API version
    });

    // Put additional init code here
  };

  // 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.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  /*
   * This function makes a call to the og.likes API.  The
   * object argument is the object you like.  Other types
   * of APIs may take other arguments. (i.e. the book.reads
   * API takes a book= argument.)
   *
   * Because it's a sample, it also sets the privacy
   * parameter so that it will create a story that only you
   * can see.  Remove the privacy parameter and the story
   * will be visible to whatever the default privacy was when
   * you added the app.
   *
   * Also note that you can view any story with the id, as
   * demonstrated with the code below.
   *
   * APIs used in postLike():
   * Call the Graph API from JS:
   *   https://developers.facebook.com/docs/reference/javascript/FB.api
   * The Open Graph og.likes API:
   *   https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
   * Privacy argument:
   *   https://developers.facebook.com/docs/reference/api/privacy-parameter
   */

  function postLike() {
    FB.api(
       'https://graph.facebook.com/me/og.likes',
       'post',
       { object: objectToLike,
         privacy: {'value': 'SELF'} },
       function(response) {
         if (!response) {
           alert('Error occurred.');
         } else if (response.error) {
           document.getElementById('result').innerHTML =
             'Error: ' + response.error.message;
         } else {
           document.getElementById('result').innerHTML =
             '<a href=\"https://www.facebook.com/me/activity/' +
             response.id + '\">' +
             'Story created.  ID is ' +
             response.id + '</a>';
         }
       }
    );
  }
</script>

<!--
  Login Button

  https://developers.facebook.com/docs/reference/plugins/login

  This example needs the 'publish_actions' permission in
  order to publish an action.  The scope parameter below
  is what prompts the user for that permission.
-->

<div
  class="fb-login-button"
  data-show-faces="true"
  data-width="200"
  data-max-rows="1"
  data-scope="publish_actions">
</div>

<div>
This example creates a story on Facebook using the
<a href="https://developers.facebook.com/docs/reference/ogaction/og.likes">
<code>og.likes</code></a> API.  That story will just say
that you like an
<a href="http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/">
article on TechCrunch</a>.  The story should only
be visible to you.
</div>

<div>
<input
  type="button"
  value="Create a story with an og.likes action"
  onclick="postLike();">
</div>

<div id="result"></div>

</body>
</html>

نشر حدث

إذا قمت بتحميل التطبيق، يجب أن يظهر لك ما يلي:

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

ستلاحظ أن النتائج مدرجة تحت الزر. إذا نقرت عليها، فستنقلك إلى النشاط الذي تم إنشاؤه على فيسبوك. يجب أن يكون الشكل كالتالي:

يجب عليك ملاحظة بعض الأمور عن النشاط على فيسبوك:

الخصوصية

يشير الإطار الخارجي المخطط باللون الأزرق الفاتح إلى أن المنشور لا يظهر لأحد سواك. لا تتم إحاطة المنشورات المرئية للأصدقاء أو المنشورات العامة بأي أُطر، ومع ذلك فهي تحتوي على رمز يحل محل القفل للإشارة إلى نطاق مشاركتها. يمكنك تعيين خصوصية المنشور باستخدام معلمة خصوصية، مضمنة في الرمز التوضيحي. عادة لا يقوم المطورون بتضمين معلمة خصوصية، ويسمحون بدلاً من ذلك بأن تحدد الخصوصية الافتراضية للتطبيق نطاق مشاركة المحتوى.

الإجراءات والكائنات

يشكل منتصف الحدث أهمية كبيرة. حيث يشير إلى أن "[الشخص] سجل إعجابه بمقال على [التطبيق]". تأتي "تسجيلات الإعجاب" من واجهة API التي استخدمتها. وتقوم og.likes بإنشاء أحداث تسجيل الإعجاب. إذا كنت قد استخدمت API book.reads بدلاً منها، يكون الحدث على الأرجح مشابهًا لـ "..يقرأ..." أو "...قرأ...". تكون واجهة API تسجيل الإعجاب، التي نعتبرها إجراءً، مشابهة للأفعال تقريبًا.

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

<meta property="og:type" content="article" />

تلك هي الطريقة التي يعرف بها فيسبوك أن ذلك مقالاً وليس كتابًا على سبيل المثال.

<meta property="og:type" content="book" />

هذه العلامات هي ما نستخدمه لوصف الكائنات. وتكون الكائنات معادلة للأسماء تقريبًا. ترتبط الكائنات ارتباطًا وثيقًا بالإجراءات التي تستخدمها. على سبيل المثال، يمكن أن يأخذ الإجراء books.reads الوسيطة book. ويتطلب الإجراء fitness.runs كائن course. ويتميز الإجراء og.likes بأنه يقبل أي كائن.

قدّم إجراءاتك للمراجعة

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

انقر على بدء تقديم وسيظهر لك شاشة تشبه الشاشة التالية:

في الخطوة 3، أشرنا إلى أن الأحداث تتألف من إجراءات وكائنات. في هذه الحالة، قام الحدث الخاص بك باستخدام الإجراء like، وهو ما يحتاج إلى الموافقة. (تتوفر موافقة مركز التطبيقات إذا كنت تريد تقديم تطبيقك إلى مركز تطبيقات فيسبوك. مركز التطبيقات هو المكان الذي يعثر من خلاله الأشخاص على التطبيقات الرائعة، وهو شيء يجدر بك التفكير فيه لزيادة انتشار تطبيقك عندما تكون مستعدًا.)

لإكمال عملية التقديم، يجب توفير شعار للتطبيق (صورة بحجم 75x75 بيكسل) ورمز للتطبيق (صورة بحجم 16x16 بيكسل)، وتعليمات حول كيفية اختبار التطبيق مع لقطات شاشة وحساب اختباري تم إنشاؤه تلقائيًا. يجب ألا تعيق عملية التقديم القدرة على اختبار تغييراتك، حيث يمكن دائمًا لك ولأي شخص تضيفه كمطور نشر أحداثك واختبارها.

إذا كنت تريد معرفة المزيد عن عملية التقديم، راجع مستند فهم عملية تقديم Open Graph. يوفر هذا المستند إرشادات عامة حول ما يبحث عنه فيسبوك عند الموافقة على الأحداث التي يتم إنشاؤها بواسطة التطبيقات. كمثال بسيط، وفر إرشادات محددة حول كيفية استخدام الإجراء like في تطبيقك. ننتهي عادة من إكمال المراجعات في غضون ثلاثة أيام عمل.

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