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

المنشورات المضمنة

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

أداة إنشاء الرموز

عنوان URL للمنشور
عرض بيكسل المنشور (ما بين 350 و750)
الحصول على الرمز

الإعدادات

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

data-href

يمثل عنوان URL المطلق الخاص بالمنشور.

n/a

data-lazy

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

false

data-width

يمثل عرض المنشور. علمًا بأن الحد الأدنى هو 350 بيكسل؛ والحد الأقصى هو 750 بيكسل. اترك الحقل فارغًا لاستخدام العرض المرن.

العرض المرن

data-show-text

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

false

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

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

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

اختر Embed Post من القائمة المنسدلة:

بالنسبة لمنشورات الصور، حدّد الزر Embed Post الموجود في أسفل اليسار:

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

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

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

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

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

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

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

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

"https://www.facebook.com/20531316728/posts/10154009990506729/"

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-post-url} بعنوان URL الخاص بمنشوراتك.

<div class="fb-post" data-href="{your-post-url}"></div>

4. الاختبار

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

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

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

5. التخصيص

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

الحصول على عنوان URL الخاص بالمنشور

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

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

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

عبر واجهة Graph API

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

وستؤدي الاستجابة لطلبك في /{page-id}/feed?fields=permalink_url إلى إرسال استجابة بالتنسيق التالي:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

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

يمكنك ضبط عرض المنشورات المضمنة على الكمبيوتر عبر السمة data-width في إشارة المنشور المضمن كما هو موضح في المثال التالي. واختر قيمة تتراوح بين 350 و750 بيكسل.

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

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

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

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

في ويب الهواتف المحمولة، يتم تغيير حجم المنشورات المضمنة تلقائيًا وفقًا لعرض الحاوية.

WordPress

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

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

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

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v19.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

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

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

إذا كنت تستخدم إصدارات HTML5 أو XFBML، فيجب تضمين رمز اللغة عند إنشاء مثيل المكتبة.

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

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

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

تتم الإشارة إلى اللغات المدعومة في ملف لغات فيسبوك بتنسيق XML.

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

الرابط الثابت

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

الرابط الثابت

ستظهر الرسالة التالية في مكان المنشور المضمن:

الرابط الثابت