‏المكونات الإضافية للتواصل الاجتماعي‏

مشغل فيديو البث المباشر والفيديو المضمن

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

أداة تكوين مشغل الفيديو المضمّنمثال على الرمزالإعداداتإضافة الرمز يدويًا

الخطوات التفصيلية

1. اختيار عنوان URL أو صفحة

اختر عنوان URL لمقطع فيديو فيسبوك الذي تريد تضمينه.

2. أداة تكوين الرموز

الصق عنوان URL في أداة تكوين الرموز ثم انقر على الزر "الحصول على الرمز" لإنشاء رمز مشغل الفيديو المضمن.

3. نسخ جزء رمز HTML البرمجي ولصقه

انسخ جزء الرمز البرمجي والصقه داخل HTML بموقع الويب المقصود.

أداة تكوين مشغل الفيديو المضمّن

عنوان URL للفيديو
عرض بيكسل الفيديو
الحصول على الرمز

مثال على الرمز بالكامل

انسخ نموذج الرمز والصقه بموقعك على الويب. واضبط القيمة data-href في عنوان URL للفيديو لديك. كما يمكنك التحكم في حجم المشغل باستخدام السمة data-width.

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

الإعدادات

لا تشتمل أداة التكوين الموضحة أعلاه على كل الإعدادات الممكنة لمشغل الفيديو المضمن. ويمكنك أيضًا تغيير الإعدادات التالية:

الإعداد الوصف القيمة الافتراضية

data-href

يمثل عنوان URL المطلق الخاص بالفيديو.

n/a

data-allowfullscreen

يتيح تشغيل الفيديو في وضع ملء الشاشة. ويمكن أن يكون بالقيمة false أو true.

false

data-autoplay

يبدأ تشغيل الفيديو تلقائيًا عند تحميل الصفحة. وسيتم عرض الفيديو دون صوت (كتم الصوت). يمكن للأشخاص تشغيل الصوت من خلال عناصر التحكم في مشغل الفيديو. علمًا بأن هذا الإعداد لا ينطبق على الأجهزة المحمولة. ويمكن أن يكون بالقيمة false أو true.

false

data-lazy

تشير القيمة true إلى استخدام آلية التحميل البطيء في المتصفح من خلال تعيين السمة loading="lazy" لإطار iframe. ويتمثل التأثير في عدم قدرة المتصفح على عرض المكون الإضافي إذا لم يكن بالقرب من منطقة العرض وربما لا يمكن عرضه أبدًا. ويمكن أن يكون بالقيمة true أو false (افتراضي).

false

data-width

يمثل عرض حاوية الفيديو. علمًا بأن الحد الأدنى هو 220px.

auto

data-show-text

يتم تعيين القيمة إلى true لتضمين النص من منشور فيسبوك المرتبط بالفيديو، إن وُجد. ولا يتوفر إلا لمواقع الكمبيوتر.

false

data-show-captions

يتم تعيين القيمة إلى true لعرض الشروحات التوضيحية (إذا كانت متوفرة) بشكل افتراضي. ولا تتوفر الشروحات التوضيحية إلا على الكمبيوتر.

false

مثال على التكوين

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

الحصول على الرمز من منشور فيديو

1. الانتقال إلى منشور الفيديو

في حالة نشر فيديو عام (راجع الأسئلة المتكررة)، يمكنك الحصول على رمز التضمين مباشرةً من منشور الفيديو نفسه.

اختر Embed Video من قائمة الخيارات:

أو عند مشاهدة الفيديو بطريقة عرض ملء الصفحة، حدّد الزر Embed Video الموجود في الزاوية السفلية اليسرى:

للصفحات فقط

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

اختر Embed Video من القائمة المنسدلة: (للصفحات فقط)

2. نسخ الرمز ولصقه

سيظهر مربع حوار به رمز تضمين منشور الفيديو. وانسخ هذا الرمز والصقه في صفحة الويب لديك في المكان الذي تريد عرضه فيه.

للحصول على التفاصيل الفنية، يرجى الرجوع إلى القسم إضافة الرمز يدويًا

إضافة الرمز يدويًا

إلى جانب استخدام أداة إنشاء الرموز، يمكنك أيضًا تضمين الرمز يدويًا.

1. الحصول على عنوان URL خاص بمنشور الفيديو

يجب أولاً الحصول على عنوان URL خاص بمنشور الفيديو الذي تريد مشاركته. ويجب أن يكون منشور الفيديو عامًا (راجع الأسئلة المتكررة)، والذي يكون محددًا بأيقونة الكرة الأرضية رمادية اللون الموجودة بجانب وقت نشر المنشور:

لأغراض الاختبار، يمكنك استخدام هذا المثال على عنوان URL:

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. تحميل مجموعة JavaScript SDK

لاستخدام المكون الإضافي لمشغل الفيديو المضمن أو أي مكون إضافي للتواصل الاجتماعي، ستحتاج إلى إضافة مجموعة Facebook SDK للغة JavaScript إلى موقعك على الويب. ويجب تحميل مجموعة SDK مرة واحدة فقط بأي صفحة، ومن الأفضل إجراء ذلك بعد الإشارة <body> الافتتاحية مباشرة:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

يمكنك العثور على مساعدة إضافية بشأن تنفيذ مجموعة JavaScript SDK في مجموعةJavaScript SDK - البدء السريع.

3. وضع إشارة مشغل الفيديو المضمن

بعد ذلك، ضع علامة مشغل الفيديو المضمن في أي مكان بموقعك على الويب. واستبدل عنوان {your-video-post-url} بعنوان URL الخاص بمنشوراتك.

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. الاختبار

بعد إكمال هذه الخطوات، ستتمكن من اختبار مشغل الفيديو المضمن. وسيبدو الدمج المكتمل على نحو مشابه لما يلي:

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

يتم عرض نتيجة مثال الاختبار في لقطة الشاشة أدناه.

5. التخصيص

اتبع الإرشادات الواردة أسفل هذه الصفحة لضبط الحجم واللغة والإعدادات الأخرى.

الحصول على عنوان URL لمنشور الفيديو

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

  1. نسخ عنوان URL للرابط الثابت من شريط عنوان المتصفح.
  2. النقر بزر الماوس الأيمن على وقت نشر المنشور ونسخ عنوان الرابط.

يتم تمييز الطريقتين باللون الأحمر في لقطة الشاشة التالية.

عبر واجهة Graph API

إذا كنت تريد دمج مشغلات الفيديو المضمنة تلقائيًا في موقعك على الويب، فعلى الأرجح يمكنك استخدام واجهة Graph API لجمع مقاطع الفيديو. فعلى سبيل المثال، يمكنك استخدام نقطة نهاية API مقاطع فيديو الصفحة والتي سترسل بدورها استجابة لطلبك إلى /{page-id}/videos بالتنسيق التالي (مختصر):

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

للحصول على عنوان URL للفيديو:

استخدم القيمة id لإنشاء عنوان URL وفقًا للبنية التالية:

"https://www.facebook.com/video.php?v={id}"

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

التخطيط على الكمبيوتر

يمكنك ضبط عرض مشغل الفيديو المضمّن على الكمبيوتر عبر السمة data-width في علامة مشغل الفيديو المضمّن كما هو موضح في المثال التالي. ويجب أن يكون بالقيمة 220 على الأقل. لا يوجد حد أقصى للقيمة، ورغم ذلك لن يزيد حجم المشغل عن حجم العنصر الأصل المرتبط به.

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

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

ملء الشاشة

يمكنك إضافة الخاصية data-allowfullscreen="true" للسماح بتشغيل الفيديو في وضع ملء الشاشة.

التخطيط على ويب الهواتف المحمولة

في ويب الهاتف المحمول، يتم ضبط حجم مشغل الفيديو المضمن تلقائيًا حسب العرض الداخلي للعنصر الأصل.

تغيير اللغة

يمكنك تغيير لغة المكون الإضافي لمشغل الفيديو المضمن من خلال تحميل الإصدار المحلي لمجموعة Facebook SDK بلغة JavaScript. وعند تحميل مجموعة SDK، يمكنك تغيير قيمة src لاستخدام لغتك المحلية. واستبدل رمز اللغة en_US بلغتك المحلية، فعلى سبيل المثال الرمز fr_FR مخصص للغة الفرنسية (فرنسا):

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v3.2"

وقد يتطلب الأمر ضبط عرض المكون الإضافي للتواصل الاجتماعي بحيث يتوافق مع اللغات المختلفة. يمكنك العثور على المزيد من المعلومات في صفحة التطويع المحلي والترجمة.

Wordpress

إذا كنت تستخدم مجموعة Facebook SDK للغة JavaScript بالفعل في موقع Wordpress لديك، فيمكنك استخدام المكون الإضافي لمشغل الفيديو المضمن من خلال إضافة الإشارة fb-video ببساطة إلى منشورك:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

إذا كنت لا تستخدم مجموعة Facebook SDK للغة JavaScript وحاولت تضمين فيديو عبر نسخ جزء من الرمز ولصقه، والذي يمكنك الحصول عليه من منشور الفيديو، فلن يتم على الأرجح عرض المكون الإضافي لمشغل الفيديو المضمّن نظرًا لأن Wordpress سيحول كل حروف & إلى #038; مما يؤدي إلى تعطيل المشغل.

وبدلاً من ذلك، يمكنك استخدام الرمز التالي لإضافة المكون الإضافي:

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v3.2'
  });
  }; (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 = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

سيتم قريبًا طرح ميزة دمج جديدة وسهلة في Wordpress.

الأسئلة المتكررة

هل يمكنني استخدام embed_html للخاصية video في واجهة Graph API؟

لا، لا يجب استخدام الخاصية embed_html. ويجب استخدم المكون الإضافي لمشغل الفيديو المضمن بدلاً من ذلك!

حول الخاصية embed_html:

ستعرض نقطة نهاية واجهة Graph API video خاصية تحمل الاسم embed_html. وتحتوي قيمة هذه الخاصية على عنصر HTML يمكن تضمينه في صفحة الويب لتشغيل الفيديو المطلوب.

يجب عدم الخلط بين هذه القيمة وبين المكون الإضافي لمشغل الفيديو المضمن. ونوصي بعدم استخدام هذه الخاصية بعد الآن، حيث يمكن استخدام المكون الإضافي لمشغل الفيديو المضمن بدلاً من ذلك!

إذا كنت تستخدم قيمة الخاصية embed_html، فإن مشغّل الفيديو:

  • لن يعمل على الأجهزة المحمولة والأجهزة اللوحية
  • لن يحتوي على أي معلومات إضافية، مثل المشاهدات، عنوان الفيديو، وغير ذلك

مثال على الخاصية embed_html (تم إيقاف استخدامها):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}