المكون الإضافي للصفحة

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

الموضوعات ذات الصلة: الأسئلة المتكررة للمكونات الإضافية للتواصل الاجتماعي | المكونات الإضافية للتواصل الاجتماعي الأخرى

عنوان URL لصفحة فيسبوك

علامات التبويب

العرض

الارتفاع

استخدام عنوان قصير

احتواء ضمن عرض حاوية المكون الإضافي

إخفاء صورة الغلاف

إظهار وجوه الأصدقاء

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

الإعدادات

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

الإعداد	سمة HTML5	الوصف	القيمة الافتراضية
`href`	`data-href`	يمثل عنوان URL لصفحة فيسبوك	لا شيء
`width`	`data-width`	يمثل عرض المكون الإضافي بالبيكسل. ويكون الحد الأدنى `180` والحد الأقصى `500`	`340`
`height`	`data-height`	يمثل ارتفاع المكون الإضافي بالبيكسل. الحد الأدنى `70`	`500`
`tabs`	`data-tabs`	يمثل علامات التبويب التي يتم عرضها، أي `timeline` و`events` و`messages`. استخدم قائمة مفصولة بفاصلة لإضافة علامات تبويب متعددة، أي `timeline, events`.	`timeline`
`hide_cover`	`data-hide-cover`	إخفاء صورة الغلاف في العنوان	`false`
`show_facepile`	`data-show-facepile`	عرض صور الملفات الشخصية في حالة إعجاب الأصدقاء بهذه الصور	`true`
`hide_cta`	`data-hide-cta`	إخفاء زر الدعوة لاتخاذ إجراء المخصص (إن وجد)	`false`
`small_header`	`data-small-header`	استخدام العنوان الصغير بدلاً من ذلك	`false`
`adapt_container_width`	`data-adapt-container-width`	محاولة الاستيعاب بما يتناسب مع عرض الحاوية	`true`
`lazy`	`data-lazy`	تشير القيمة `true` إلى استخدام آلية التحميل البطيء في المتصفح من خلال تعيين السمة `loading="lazy"` لإطار iframe. ويتمثل التأثير في عدم قدرة المتصفح على عرض المكون الإضافي إذا لم يكن بالقرب من منطقة العرض وربما لا يمكن عرضه أبدًا. ويمكن أن يكون بالقيمة `true` أو `false` (افتراضي).	`false`

السمات التي تم إيقاف استخدامها

تم إيقاف استخدام السمة data-show-posts. يرجى استخدام السمة tabs/data-tabs واستخدام القيمة timeline لعرض المنشورات من يوميات الصفحة.

إضافة المكون الإضافي للصفحة إلى موقع على الويب

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

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

الدعوة لاتخاذ إجراء

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

إذا كان عرض الزر أقل من 280 بيكسل، فسيتم عرض الزر "مشاركة" الافتراضي لتجنب المحاذاة الخاطئة للتصميم في الترجمات المختلفة.

علامات تبويب الصفحة: اليوميات والمناسبات والرسائل

يمكنك الآن تضمين علامات تبويب اليوميات والمناسبات والرسائل في المكون الإضافي:

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

تمكين المراسلة بصفحتك

لتمكين المراسلة في صفحة فيسبوك، انتقل إلى قسم Settings بصفحتك. في الصف Messages، حدّد السماح للأشخاص بالتواصل مع صفحتي بشكل خاص بإظهار الزر "رسالة" (رابط مباشر: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

إضافة علامات تبويب متعددة

استخدم قائمة مفصولة بفواصل ضمن السمة data-tabs لإضافة علامات تبويب متعددة:

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

علامة تبويب واحدة

يمكنك أيضًا إضافة علامة تبويب واحدة فقط تعرض timeline أو events أو messages:

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

العرض التوافقي

سيتم ضبط المكون الإضافي افتراضيًا حسب قيمة width للحاوية الأصلية عند تحميل الصفحة (الحد الأدنى هو 180px / الحد الأقصى هو 500px) وهي ميزة مفيدة عند تغيير التخطيط:

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

إذا كانت قيمة width للعنصر الأصلي أكبر من قيمة width للمكون الإضافي للصفحة، فسيتم الاحتفاظ بالقيمة المحددة في data-width:

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

لن يقل عرض المكون الإضافي عن 180px:

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

يمكن إيقاف العرض التوافقي من خلال إلغاء تحديد التوافق مع عرض حاوية المكون الإضافي، وسيتم عرض المكون الإضافي بالعرض المحدد بغض النظر عن الحاوية الأصلية.

عدم ضبط الحجم ديناميكيًا

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

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

إذا كنت تريد ضبط قيمة width للمكون الإضافي عند تغيير حجم النافذة، فقد يتطلب الأمر إعادة عرض المكون الإضافي يدويًا.

عرض أوجه الأصدقاء

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

يمكن تنشيط هذا الخيار من خلال تحديد Show Friend's Faces في أداة التكوين.

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

الصفحات الخاضعة لتقييدات الخصوصية

لا يمكن تضمين صفحات فيسبوك التي تحتوي على تقييدات خصوصية.

تغيير اللغة

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

المثال

js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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