फेसबुक जैसे बटन आईफ्रेम इसे पॉपअप विंडो में परिवर्तित करता है

यदि आप फेसबुक लाइक बटन के डिफ़ॉल्ट लॉगिन आईफ्रेम को पॉपअप विंडो से बदलना चाहते हैं, तो आप फेसबुक जावास्क्रिप्ट एसडीके और कुछ कस्टम कोड का उपयोग करके इसे प्राप्त कर सकते हैं। इसे लागू करने के तरीके के बारे में चरण-दर-चरण मार्गदर्शिका नीचे दी गई है:

फेसबुक जावास्क्रिप्ट एसडीके शामिल करें:

सुनिश्चित करें कि आपने अपने HTML के अनुभाग में Facebook JavaScript SDK शामिल किया है। आप एसडीके कोड फेसबुक डेवलपर साइट से प्राप्त कर सकते हैं।

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

फेसबुक 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>

लाइक बटन कोड जोड़ें:

अपने मौजूदा फेसबुक लाइक बटन कोड को निम्नलिखित कोड से बदलें। इस कोड में एक कस्टम ऑनक्लिक इवेंट शामिल है जो लॉगिन के लिए एक पॉपअप विंडो खोलता है।

<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” को उस यूआरएल से बदल दें जिसे आप चाहते हैं कि उपयोगकर्ता पसंद करें।

कस्टम जावास्क्रिप्ट फ़ंक्शन जोड़ें:

अपने कोड में निम्नलिखित जावास्क्रिप्ट फ़ंक्शन जोड़ें। लाइक बटन पर क्लिक करने पर यह फ़ंक्शन एक पॉपअप विंडो खोलता है।

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

यह कोड का पूरी तरह से परीक्षण किया गया संस्करण नहीं है, लेकिन इसे करीब होना चाहिए। आप इसे अपनी आवश्यकताओं के आधार पर अनुकूलित कर सकते हैं, और उपयोगकर्ता के लॉग इन करने के बाद आप अतिरिक्त क्रियाएं जोड़ सकते हैं।