Nút like fb iframe chuyển nó thành cửa sổ bật lên

Nếu muốn thay thế iframe đăng nhập mặc định của nút Thích trên Facebook bằng cửa sổ bật lên, bạn có thể thực hiện việc này bằng cách sử dụng Facebook JavaScript SDK và một số mã tùy chỉnh. Dưới đây là hướng dẫn từng bước về cách thực hiện điều này:

Bao gồm SDK JavaScript của Facebook:

Đảm bảo bạn đưa SDK JavaScript của Facebook vào phần HTML của mình. Bạn có thể lấy mã SDK từ trang web Nhà phát triển Facebook.

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

Khởi tạo SDK Facebook:

Khởi tạo SDK Facebook bằng ID ứng dụng của bạn. Đặt đoạn script sau ngay trước thẻ đóng.

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

Thêm mã nút Thích:

Thay thế mã nút Thích Facebook hiện tại của bạn bằng mã sau. Mã này bao gồm sự kiện onClick tùy chỉnh mở ra cửa sổ bật lên để đăng nhập.

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

Đảm bảo bạn thay thế “https://your-page-url” bằng URL mà bạn muốn người dùng thích.

Thêm chức năng JavaScript tùy chỉnh:

Thêm hàm JavaScript sau vào mã của bạn. Chức năng này sẽ mở một cửa sổ bật lên khi nhấp vào nút Thích.

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

Đây không phải là phiên bản mã được kiểm tra đầy đủ nhưng nó sẽ gần giống. Bạn có thể tùy chỉnh nó dựa trên nhu cầu của mình và bạn có thể thêm các hành động bổ sung sau khi người dùng đăng nhập.