【解決方法】Fbのようなボタンiframeをポップアップウィンドウに変換します

[ad_1]

「いいね！」ボタンをクリックしたときにFBの「いいね！」ボタンを追加しましたログインIframeが開いていますが、「いいね！」ボタンを押したときにログイン用のポップアップウィンドウが必要ですが、Iframeは必要ありません。これに対する解決策はありますか?

私が試したこと:

私はFB開発者サイトからFBのようなプラグインを使用しました。

解決策 2

Facebook の「いいね！」ボタンのデフォルトのログイン iframe をポップアップウィンドウに置き換えたい場合は、Facebook JavaScript SDK とカスタムコードを使用してこれを実現できます。以下は、これを実装する方法に関するステップバイステップのガイドです。

Facebook JavaScript SDK を含めます。

HTML のセクションに Facebook JavaScript SDK を必ず含めてください。 SDK コードは Facebook 開発者サイトから入手できます。

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

Facebook SDK を初期化します。

アプリ ID を使用して 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 の「いいね！」ボタンのコードを次のコードに置き換えます。このコードには、ログイン用のポップアップウィンドウを開くカスタムの 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>