الفيسبوك مثل زر iframe تحويله إلى نافذة منبثقة

إذا كنت تريد استبدال إطار iframe الافتراضي لتسجيل الدخول لزر Facebook Like بنافذة منبثقة، فيمكنك تحقيق ذلك باستخدام Facebook JavaScript SDK وبعض التعليمات البرمجية المخصصة. فيما يلي دليل خطوة بخطوة حول كيفية تنفيذ ذلك:

تضمين Facebook JavaScript SDK:

تأكد من تضمين Facebook JavaScript SDK في قسم HTML الخاص بك. يمكنك الحصول على كود SDK من موقع Facebook Developer.

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

تهيئة Facebook SDK:

قم بتهيئة Facebook SDK باستخدام معرف التطبيق الخاص بك. ضع البرنامج النصي التالي قبل علامة الإغلاق مباشرةً.

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'your-app-id', // Replace with your Facebook App ID
            cookie     : true,
            xfbml      : true,
            version    : 'v10.0'
        });
    };

    (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/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

أضف رمز الزر “أعجبني”:

استبدل رمز زر Facebook Like الموجود لديك بالرمز التالي. يتضمن هذا الرمز حدث onClick مخصصًا يفتح نافذة منبثقة لتسجيل الدخول.

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div class="fb-like" data-href="https://your-page-url" data-width="" data-layout="button_count" data-action="like" data-size="large" data-share="false" onclick="openPopupForLogin();"></div>

تأكد من استبدال “https://your-page-url” بعنوان URL الذي تريد أن ينال إعجاب المستخدمين.

أضف وظيفة JavaScript المخصصة:

أضف وظيفة JavaScript التالية إلى التعليمات البرمجية الخاصة بك. تفتح هذه الوظيفة نافذة منبثقة عند النقر فوق الزر “أعجبني”.

<script>
    function openPopupForLogin() {
        FB.login(function(response) {
            // Handle the login response as needed
            if (response.authResponse) {
                // User is logged in, you can perform additional actions here
                console.log('User is logged in');
            } else {
                // User cancelled login or did not fully authorize
                console.log('User cancelled login or did not fully authorize');
            }
        }, { scope: 'public_profile,email' });
    }
</script>

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