Back to oneall.com

Modal box configuration

Michael_SmithMichael_Smith
edited March 2016 in Social Login
Hi there,

I am having some real difficulty setting up social login with a modal box. I am using WordPress, have the plugin installed, and can login from the wp-admin login screen using Facebook. So I am assuming the Facebook app is configured correctly.

I would like to use the model box feature to trigger a social login. I can't seem to get it working. The social login icons appear correctly (although there is a weird grey box underneath them). When the modal is launched, it appears then disappears and the user is not logged in.

I am hoping that someone could have a quick look at the code below and steer me in the right direction.

I believe the code has at least a couple of issues:

1. Well, it isn't loggin in ;-)
2. I am not sure the redirect is set-up correctly

Any suggestions you might be able to provide would be GREATLY appreciated.

Mike

<!-- Social Login will be embedded into the following element --> <div id="social_login_demo"></div> <script type="text/javascript"> /* Replace the subdomain with your own subdomain from a Site in your OneAll account */ var oneall_subdomain = 'slideheroes'; /* Asynchronously load the library */ var oa = document.createElement('script'); oa.type = 'text/javascript'; oa.async = true; oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js' var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oa, s) /* This is an event */ var my_on_login_redirect = function(args) { alert("You have logged in with " + args.provider.name); /* As this is a demo return false to cancel the redirection to the callback_uri */ return false; } /* Initialise the asynchronous queue */ var _oneall = _oneall || []; /* Social Login Example */ _oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'twitter']]); _oneall.push(['social_login', 'set_grid_sizes', [3,1]]); _oneall.push(['social_login', 'set_event', 'on_login_redirect', 'https://www.slideheroes.com/dashboard' ]); _oneall.push(['social_login', 'do_render_ui', 'social_login_demo']); </script>

Best Answer

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    edited March 2016 Answer ✓
    I do not have the grey box.
    I have however had a look at the code, and at the location of the box I can see this code:

    <code class="tve_js_placeholder">

    I'm not sure what the code is for, but I think it would be safe to remove it and check if that removes the box too. It's not from us or related to our services anyway ;)

Answers

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    edited March 2016
    Hi Michael,

    the event that you are using prevents the redirection:

    /* This is an event */ var my_on_login_redirect = function(args) { alert("You have logged in with " + args.provider.name); /* As this is a demo return false to cancel the redirection to the callback_uri */ return false; }
    You also do not need to include the library.js as it's already included by WordPress.

    Could you please replace your code by the following code and try again?

    <a href="#" id="social_login_link">Login</a> var _oneall = _oneall || []; _oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'twitter']]); _oneall.push(['social_login', 'set_callback_uri', 'https://www.slideheroes.com/dashboard']); _oneall.push(['social_login', 'attach_onclick_popup_ui', 'social_login_link']);

    This should open a modal box when you click on the Login link

  • Michael_SmithMichael_SmithMember
    edited March 2016
    Hi Claude,

    That is fantastic. Looks to be working.

    One small question. There is a strange grey box that appears. Anyway to get rid of this?
    screencast.com/t/wEDiG9Yr

    Here is the code I am using:

    <!-- Social Login will be embedded into the following element --> <div id="social_login_demo"></div> <script type="text/javascript"> /* Replace the subdomain with your own subdomain from a Site in your OneAll account */ var oneall_subdomain = 'slideheroes'; /* Initialise the asynchronous queue */ var _oneall = _oneall || []; /* Social Login Example */ _oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'twitter']]); _oneall.push(['social_login', 'set_grid_sizes', [3,1]]); _oneall.push(['social_login', 'set_callback_uri', 'https://www.slideheroes.com/dashboard' ]); _oneall.push(['social_login', 'do_render_ui', 'social_login_demo']); </script>

  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    Hi Michael,

    where exactly can I see the box? Could you post a link and a description where I can see it?
  • Michael_SmithMichael_SmithMember
    Hi Claude,

    Sorry, the link to a screenshot of the issue is:

    http://screencast.com/t/wEDiG9Yr


  • Claude_SchlesserClaude_SchlesserAdministratorOneAll Team
    Hi Michael, if possible I would like to see the real page ;)
  • Michael_SmithMichael_SmithMember
    :-)

    That would be better.

    https://slideheroes.com/test-social-login-modal/

  • Michael_SmithMichael_SmithMember
    Thanks Claude!
Login to your OneAll account to add a new comment

Welcome!

Please sign in to your OneAll account to ask a new question or to contribute to the discussions.

Please click on the link below to connect to the forum with your OneAll account.

Ask a question

Information

Products & Services

Categories