الزر تسجيل الدخول

الزر تسجيل الدخول هو طريقة بسيطة لبدء عملية تسجيل دخول فيسبوك على موقع الويب أو تطبيق الويب لديك.

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

إذا أظهرت زر تسجيل الخروج، فسيتم تسجيل خروج الأشخاص من تطبيقك وفيسبوك، عندما يستخدمونه لتسجيل الخروج.

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

يحل الزر متابعة باستخدام فيسبوك محل الإصدارات السابقة للزر تسجيل الدخول. لمزيد من المعلومات، راجع الترحيل.

أداة تكوين المكون الإضافي

Width
حجم الزر
نص الزر
شكل تخطيط الزر
[?]

زر المتابعة باسم {Name}

يحتوي زر المتابعة باسم {Name} على النص "المتابعة باسم {persons' name}" ويتضمن بشكل اختياري صورة الملف الشخصي على فيسبوك إذا كنت قد سجلت الدخول إلى فيسبوك في المتصفح ذاته. لاستخدام زر المتابعة باسم {Name}، يجب أولاً تحميل مجموعة JavaScript SDK. للحصول على إرشادات حول إعداد مجموعة JavaScript SDK، راجع البدء السريع لمجموعة JavaScript SDK. يمكن تمكين المتابعة باسم {Name} عن طريق إضافة data-use-continue-as="true" إلى إعدادات الزر.

لا يمكن تخصيص ارتفاع زر المتابعة باسم {Name}.

حجم الزرالارتفاعالعرضهل تريد تخصيص العرض؟

صغير

20 بكسل

200 بكسل

لا

متوسط

28 بكسل

200 - 320 بكسل

نعم

كبير

40 بكسل

240 - 400 بكسل

نعم

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

أفضل الممارسات حول زر المتابعة باسم {Name}

يمكن أن يكون زر المتابعة باسم {Name} طريقة رائعة لزيادة النقرات والتفاعل. يعرض اسم المستخدم وصورة الملف الشخصي على زر تسجيل الدخول ويمكن أن يساعد في جعل تطبيقك يبدو ذا طابع شخصي أكثر.

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

حتى لو لم يكن زر المتابعة باسم {Name} مناسبًا لتطبيقك، لا يزال بإمكانك تجربة أزرار مجموعة JavaScript SDK الجديدة التي تعرض عبارة "المتابعة باستخدام فيسبوك".

حالات الاستخدام المقترحة

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

يُعد خيارًا مناسبًا عندما
  • يكون تطبيقك مخصصًا للتواصل الاجتماعي:
    عندما يستخدم الأشخاص تطبيقات التواصل الاجتماعي، فإنهم يتوقعون التواصل مع الآخرين. وقد لاحظنا أن زر المتابعة باسم {Name} يُظهر أداءً جيدًا في هذه الحالات.

  • يستخدم الأشخاص في السوق المستهدف الهواتف نفسها
    عندما يستخدم عدة أشخاص الهاتف نفسه، يمكن لزر المتابعة باسم {Name} أن يطمئنهم أنهم يستخدمون الحساب الصحيح.

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

  • يهتم الأشخاص في السوق المستهدف بالخصوصية:
    في الكثير من البلدان، تُعد صور الملفات الشخصية شديدة الخصوصية. لذلك من الأفضل تجنب استخدام زر المتابعة باسم {Name} في هذه الحالة، لأنه سيعرض صورة الملف الشخصي للشخص الذي يقوم بتسجيل الدخول.

أفضل الممارسات حول زر تسجيل الدخول

يُرجى اتباع أفضل الممارسات العامة لاستخدام تسجيل دخول فيسبوك. من المهم اتباع عنصري أفضل الممارسات هذين عند استخدام زر المتابعة باسم {Name}:

  • توفير طريقة لتسجيل الخروج (مطلوبة بموجب السياسة)
  • الاختبار والقياس — تحديد تأثير استخدام الزر على تصورات المستخدم والتحويل

بعض أفضل الممارسات الأخرى المحتملة:

  • كن واضحًا بشأن الغرض من تسجيل الدخول
  • استخدم عنصرًا نائبًا/مؤشر تقدم دائري أثناء تحميل زر تسجيل الدخول وقم بإزالته بمجرد اكتمال تحميل الزر. مثال على هذا الرمز:
<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

الإعدادات

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

الإعداد سمة HTML5 الوصف الخيارات

auto_logout_link

data-auto-logout-link

في حالة التمكين، سيتغير الزر إلى زر تسجيل الخروج إذا كان المستخدم قد سجل الدخول.

false, true

onlogin

data-onlogin

وظيفة JavaScript يتم تشغيلها عند اكتمال عملية تسجيل الدخول.

Function

scope

data-scope

قائمة بالأذونات التي يمكن طلبها أثناء تسجيل الدخول.

public_profile (افتراضي) أو قائمة أذونات مفصولة بفاصلة

size

data-size

يختار أحد خيارات الحجم للزر.

small، medium، large

default_audience

data-default-audience

يحدد الجمهور الذي سيتم تحديده افتراضيًا، عند طلب أذونات الكتابة.

everyone، friends، only_me

الترحيل

سيتم ترحيل الأزرار القديمة إلى الأزرار الجديدة. يعرض الجدول التالي عملية التعيين.

الزر القديمالارتفاع القديمالزر الجديدالارتفاع الجديد

الأيقونة

18 بكسل

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

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

صغير

18 بكسل

صغير

20 بكسل

متوسط

22 بكسل

صغير

20 بكسل

كبير

25 بكسل

صغير

20 بكسل

كبير جدًا

39 بكسل

صغير

20 بكسل

تتضمن أزرار المتابعة باسم {Name} الجديدة معلمة تُسمى button_type، والتي لا تتطلبها الأزرار القديمة. هذه هي الطريقة التي تحدد بها ما إذا كنت ستستخدم زر المتابعة باستخدام فيسبوك أم زر تسجيل الدخول باستخدام فيسبوك. إذا لم تحدد نوع الزر، فسيتم عرض الزر بالحجم الصغير الجديد. ويُعد هذا الحجم متوسطًا مقارنة بالأزرار القديمة. بالنسبة للحالة x-large، سيتقلص الحجم قليلًا. إذا حددت المعلمة button_type، فستظهر الأزرار كما هو محدد.

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

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

التطويع المحلي:

يتطلب تحميل زر بلغة محلية مختلفة تحميل مجموعة JavaScript SDK المخصصة لتلك اللغة. لمزيد من المعلومات حول تطويع مجموعة JavaScript SDK محليًا، يمكنك الرجوع إلى التطويع المحلي باستخدام المكونات الإضافية للتواصل الاجتماعي ومجموعة JavaScript SDK.

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

كيف يمكنني استخدام هذا لتسجيل دخول المستخدمين؟

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

لا يلزم تنفيذ إعداد إضافي هنا، ولكن يمكنك استخدام الإعداد onlogin في الزر لتشغيل وظيفة JavaScript لديك والتي سيتم تشغيلها عند تسجيل الدخول.

هل يمكنني استخدام زر تسجيل الدخول مع رمز التسجيل من جانب الخادم؟

يمكنك ذلك، ولكن لا تزال تحتاج إلى استخدام مجموعة JavaScript SDK جزئيًا. بمجرد اكتمال عملية تسجيل الدخول التي بدأت عند النقر على الزر، سيتوفر لدى مجموعة SDK إمكانية الوصول إلى كائن authResponse باستخدام FB.getLoginStatus(). ويمكنك استخدام هذه الوظيفة لإدخال كائن الاستجابة في الرمز من جانب الخادم لإكمال أي تسجيل موجود هناك.

هل يمكنني استخدام زر تسجيل الدخول لإعادة طلب الإذن الذي رفضه شخص ما؟

لا يدعم زر تسجيل الدخول إعادة إرسال الطلبات، نظرًا لأن طلب الأذونات المرفوضة لا يتناسب مع العبارة الموجودة على الزر. إذا كنت تحتاج إلى إعادة طلب الإذن، فيمكنك إعداد زر مخصص واستخدم FB.login() كما هو موضَّح في وثائق تسجيل دخول فيسبوك للويب.

لا يتم عرض الزر.

يتم تحويل إشارات <div> إلى أزرار معروضة باستخدام تقنية تدعى XFBML، والتي تعتمد على رمز JavaScript المتوفر داخل مجموعة SDK لتحليل الصفحة وإجراء عمليات الاستبدال. إذا كنت تقوم بتعديل محتوى الصفحة ديناميكيًا لإضافة عناصر div هذه بعد تشغيل الأسلوب init لدى مجموعة SDK (على سبيل المثال في مربع حوار تم إنشاؤه ديناميكيًا)، فستحتاج إلى استدعاء FB.XFBML.parse() مرة أخرى حتى يتم إجراء التحويل.