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

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

الإعدادات

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

الإعداد سمة 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


السمات التي تم إيقاف العمل بها

  • تم إيقاف العمل بالسمة 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 JavaScript SDK. عند تحميل مجموعة SDK، قم بتغيير قيمة js.src لاستخدام اللغة التي تريدها. ضع اللغة التي تريدها محل en_US، على سبيل المثال ru_RU للغة الروسية (روسيا):

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

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