How to prevent Nextend Social Login load default css at homepage

  • I using Nextend Social Login in my website, it’s working perfect.

    But today I need optimize my site, I see this style CSS code:

    <style>
    div.nsl-container[data-align="left"] {
        text-align: left;
    }

    div.nsl-container[data-align="center"] {
        text-align: center;
    }

    div.nsl-container[data-align="right"] {
        text-align: right;
    }


    div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"] {
        text-decoration: none;
        box-shadow: none;
        border: 0;
    }

    div.nsl-container .nsl-container-buttons {
        display: flex;
        padding: 5px 0;
    }

    div.nsl-container.nsl-container-block .nsl-container-buttons {
        display: inline-grid;
        grid-template-columns: minmax(145px, auto);
    }

    div.nsl-container-block-fullwidth .nsl-container-buttons {
        flex-flow: column;
        align-items: center;
    }

    div.nsl-container-block-fullwidth .nsl-container-buttons a,
    div.nsl-container-block .nsl-container-buttons a {
        flex: 1 1 auto;
        display: block;
        margin: 5px 0;
        width: 100%;
    }

    div.nsl-container-inline {
        margin: -5px;
        text-align: left;
    }

    div.nsl-container-inline .nsl-container-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    div.nsl-container-inline .nsl-container-buttons a {
        margin: 5px;
        display: inline-block;
    }

    div.nsl-container-grid .nsl-container-buttons {
        flex-flow: row;
        align-items: center;
        flex-wrap: wrap;
    }

    div.nsl-container-grid .nsl-container-buttons a {
        flex: 1 1 auto;
        display: block;
        margin: 5px;
        max-width: 280px;
        width: 100%;
    }

    @media only screen and (min-width: 650px) {
        div.nsl-container-grid .nsl-container-buttons a {
            width: auto;
        }
    }

    div.nsl-container .nsl-button {
        cursor: pointer;
        vertical-align: top;
        border-radius: 4px;
    }

    div.nsl-container .nsl-button-default {
        color: #fff;
        display: flex;
    }

    div.nsl-container .nsl-button-icon {
        display: inline-block;
    }

    div.nsl-container .nsl-button-svg-container {
        flex: 0 0 auto;
        padding: 8px;
        display: flex;
        align-items: center;
    }

    div.nsl-container svg {
        height: 24px;
        width: 24px;
        vertical-align: top;
    }

    div.nsl-container .nsl-button-default div.nsl-button-label-container {
        margin: 0 24px 0 12px;
        padding: 10px 0;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: .25px;
        overflow: hidden;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
        flex: 1 1 auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-transform: none;
        display: inline-block;
    }

    div.nsl-container .nsl-button-google[data-skin="dark"] .nsl-button-svg-container {
        margin: 1px;
        padding: 7px;
        border-radius: 3px;
        background: #fff;
    }

    div.nsl-container .nsl-button-google[data-skin="light"] {
        border-radius: 1px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .25);
        color: RGBA(0, 0, 0, 0.54);
    }

    div.nsl-container .nsl-button-apple .nsl-button-svg-container {
        padding: 0 6px;
    }

    div.nsl-container .nsl-button-apple .nsl-button-svg-container svg {
        height: 40px;
        width: auto;
    }

    div.nsl-container .nsl-button-apple[data-skin="light"] {
        color: #000;
        box-shadow: 0 0 0 1px #000;
    }

    div.nsl-container .nsl-button-facebook[data-skin="white"] {
        color: #000;
        box-shadow: inset 0 0 0 1px #000;
    }

    div.nsl-container .nsl-button-facebook[data-skin="light"] {
        color: #1877F2;
        box-shadow: inset 0 0 0 1px #1877F2;
    }

    div.nsl-container .nsl-button-spotify[data-skin="white"] {
        color: #191414;
        box-shadow: inset 0 0 0 1px #191414;
    }

    div.nsl-container .nsl-button-apple div.nsl-button-label-container {
        font-size: 17px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    div.nsl-container .nsl-button-slack div.nsl-button-label-container {
        font-size: 17px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    div.nsl-container .nsl-button-slack[data-skin="light"] {
        color: #000000;
        box-shadow: inset 0 0 0 1px #DDDDDD;
    }

    div.nsl-container .nsl-button-tiktok[data-skin="light"] {
        color: #161823;
        box-shadow: 0 0 0 1px rgba(22, 24, 35, 0.12);
    }


    div.nsl-container .nsl-button-kakao {
        color: rgba(0, 0, 0, 0.85);
    }

    .nsl-clear {
        clear: both;
    }

    .nsl-container {
        clear: both;
    }

    .nsl-disabled-provider .nsl-button {
        filter: grayscale(1);
        opacity: 0.8;
    }

    /*Button align start*/

    div.nsl-container-inline[data-align="left"] .nsl-container-buttons {
        justify-content: flex-start;
    }

    div.nsl-container-inline[data-align="center"] .nsl-container-buttons {
        justify-content: center;
    }

    div.nsl-container-inline[data-align="right"] .nsl-container-buttons {
        justify-content: flex-end;
    }


    div.nsl-container-grid[data-align="left"] .nsl-container-buttons {
        justify-content: flex-start;
    }

    div.nsl-container-grid[data-align="center"] .nsl-container-buttons {
        justify-content: center;
    }

    div.nsl-container-grid[data-align="right"] .nsl-container-buttons {
        justify-content: flex-end;
    }

    div.nsl-container-grid[data-align="space-around"] .nsl-container-buttons {
        justify-content: space-around;
    }

    div.nsl-container-grid[data-align="space-between"] .nsl-container-buttons {
        justify-content: space-between;
    }

    /* Button align end*/

    /* Redirect */

    #nsl-redirect-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 1000000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(1px);
        background-color: RGBA(0, 0, 0, .32);;
    }

    #nsl-redirect-overlay-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
        padding: 30px;
        border-radius: 10px;
    }

    #nsl-redirect-overlay-spinner {
        content: '';
        display: block;
        margin: 20px;
        border: 9px solid RGBA(0, 0, 0, .6);
        border-top: 9px solid #fff;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px RGBA(0, 0, 0, .6), 0 0 0 1px RGBA(0, 0, 0, .6);
        width: 40px;
        height: 40px;
        animation: nsl-loader-spin 2s linear infinite;
    }

    @keyframes nsl-loader-spin {
        0% {
            transform: rotate(0deg)
        }
        to {
            transform: rotate(360deg)
        }
    }

    #nsl-redirect-overlay-title {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        font-size: 18px;
        font-weight: bold;
        color: #3C434A;
    }

    #nsl-redirect-overlay-text {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        text-align: center;
        font-size: 14px;
        color: #3C434A;
    }

    /* Redirect END*/
    </style>

    It’s alway load at homepage or product page, I think this only need load at /my-account page. Have any method to prevent this style to optimize.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Robert

    (@robertnextendweb)

    Hi @locha9066

    We need to load our CSS and JavaScript to other pages too, as the social buttons can be published not only with shortcode but with normal HTML as well.
    So we can not know in advance the pages where the social buttons will appear and for that reason, we need to load our scripts and styles. If you do know that you will not have any buttons elsewhere besides the /my-account page, then with some custom code you can remove our styles and scripts, but I personally do not think you actually need to do it, as the impact of those are so minimal. Anyway, if you really want to remove them, you can do it with a code like this:

    add_action('wp', function () {
        if (class_exists('NextendSocialLogin', false)) {
            global $pagenow;
            $whiteListedPageIDs=array(10,15);
            
            if('wp-login.php' !== $pagenow && !is_page($whiteListedPageIDs)){
                NextendSocialLogin::removeLoginFormAssets();
                remove_action('wp_head', 'NextendSocialLogin::styles', 100);
                remove_action('wp_print_scripts', 'NextendSocialLogin::checkJqueryLoaded');
            }
        }
    });

    This code will remove our styles and scripts from everywhere, except:

    • the /wp-login.php where we display the social buttons by default
    • and from the pages with the IDs: 10 and 15

    Of course, you can modify the condition according to your needs, however please note that we are unable to provide any kind of support for custom coding.

    Thread Starter locha9066

    (@locha9066)

    Hi @robertnextendweb , thank you for your reply.

    In my case, my button Sign in with Google only need show at page:

    mysite.com/my-account
    mysite.com/wp-login

    Have any method to load JS/CSS at two page?

    Plugin Support Robert

    (@robertnextendweb)

    I am sorry, but no. As I mentioned we load our files on all pages, because we do not know where they might be needed. What you can do is remove the actions on those pages, and like that we will not render our scripts and styles on those. So all you need to do is just modify the code I mentioned above, so it includes the wp-login.php (this is already done in the code example) and my-account pages.

    Additionally, I took a look at the linked page, and your wp-login.php page is not available. When the WordPress default login page is not accessible, you should force Nextend Social Login to handle the OAuth flow and the Register flow over other publicly available pages that you don’t use for anything else and excluded from all kind of caching. This is because by default we handle our flows over that page. If it isn’t available, that will break our flow, and you won’t be able to use the social login.

    For this you need to use our “OAuth redirect uri proxy page” and “Page for register flow” settings. Both of these can be found in our Global settings > General tab:

    and you should configure them in the following way:

    • For the Page for register flow:?You should create a new page and add the shortcode into it: [nextend_social_login_register_flow] then select that page for this setting. Extra information before the registration with social login – like Terms and Conditions, Username, Password, Email – would be asked on this page. (?Make sure you don’t use this page for anything else!?)
    • For the OAuth redirect uri proxy page:?You should create?another?new and completely empty page (?that you won’t use for anything else either?) and select it as OAuth redirect uri proxy page. Once it is done, the redirect URL of each configured provider will change, as the OAuth flow will be handled over this new page instead of the /wp-login.php page. So, you will need to add the new redirect URLs into each of your configured Apps again. ( Nextend Social Login will also warn you about this with a message, where you can see all the steps, but actually, you can find the redirect URLs in the Getting Started section of the providers, too. – The redirect URLs are the URLs that usually contain this query string: “?loginSocial=” )
    Thread Starter locha9066

    (@locha9066)

    Thank you so much for your incredibly thorough and clear explanation. You are truly one of those developers who treat all users with respect, regardless of whether they are on a free or paid plan. I would be buy Nextend Social Login in the future if there’s a discount code available. For now, I’ve understood the issue.

    Wishing you a pleasant evening. Message sent from GMT+7.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.