Tombol suka Fb iframe mengubahnya menjadi jendela popup

Jika Anda ingin mengganti iframe login default tombol Suka Facebook dengan jendela popup, Anda dapat melakukannya menggunakan Facebook JavaScript SDK dan beberapa kode khusus. Di bawah ini adalah panduan langkah demi langkah tentang cara menerapkannya:

Sertakan SDK JavaScript Facebook:

Pastikan Anda menyertakan Facebook JavaScript SDK di bagian HTML Anda. Anda bisa mendapatkan kode SDK dari situs Pengembang Facebook.

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

Inisialisasi SDK Facebook:

Inisialisasi SDK Facebook dengan ID Aplikasi Anda. Tempatkan skrip berikut tepat sebelum tag penutup.

<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>

Tambahkan kode tombol Suka:

Ganti kode tombol Like Facebook Anda yang ada dengan kode berikut. Kode ini menyertakan acara onClick khusus yang membuka jendela popup untuk login.

<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>

Pastikan Anda mengganti “https://url-halaman-Anda” dengan URL yang Anda ingin agar disukai pengguna.

Tambahkan fungsi JavaScript khusus:

Tambahkan fungsi JavaScript berikut ke kode Anda. Fungsi ini membuka jendela popup ketika tombol Suka diklik.

<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>

Ini bukan versi kode yang sepenuhnya teruji, tetapi harusnya sudah mendekati. Anda dapat menyesuaikannya berdasarkan kebutuhan Anda, dan Anda dapat menambahkan tindakan tambahan setelah pengguna masuk.