Google plus sign in button not rendered when online

Question

I'm developing a community site for my new mobile game and I'm trying to add the google plus sign in flow to it.

---

Steps taken during implementation:

-> Followed this google developers tutorial

HTML button code:

     <span id="signinButton">
        <span
            class="g-signin"
            data-callback="onSignInCompleted"
            data-clientid="<myID>.apps.googleusercontent.com"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://schemas.google.com/AddActivity"
            data-scope="https://www.googleapis.com/auth/plus.login">
        </span>
    </span>

Javascript load code: (just before body closure)

    <script type="text/javascript">
      (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client:plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
</script>

---

The problem:

-> The implementation works fine in localhost

-> The implementation doesn't work online (i.e. uploaded on the server)

---

Online page strange behavior:

-> The button doesn't get rendered

-> The signed callback doesn't get called

---

My web application OAuth 2.0 javascript origins:

https://fcouceiro.com
https://www.fcouceiro.com
http://www.fcouceiro.com
http://fcouceiro.com
http://meatify:8888

I'm currently using fcouceiro.com as origin, but the idea is to use meatify.fcouceiro.com subdomain after this problem is solved.

---

UPDATE: after some experiments i've found that sometimes (like the first time you're visiting the page) it does get rendered (the button). So I'm thinking the problem clould be the script being loaded after the html for instance. As I'm using the jQuery load function to load an html page that contains the sign in button. And than the onload gets called and the script tries to find my button but it isn't available. What do you think?

You can find my page here: http://fcouceiro.com

APPy coding!

Answer 1

Ok guys. Problem solved! Thanks for your help. Here is the solution (complex one...):

Just make sure that the javascript for the google + sign in button is loaded after the button is "loaded" (if you use the html render method). My problem was that my sign in button was loaded by jQuery load function into a div and sometimes this function takes some time to execute. Fortunately there is a callback argument in that function that I've set up to load my g+ js!

Thank you again!

Answer 2

To clarify the chosen answer:

The platform.js must be loaded before you render the sign-in button, for example in angularjs, you could simply use $timeout to wait for 1 sec.

Answer 3

For anyone else who might get tangled with this,data-cookiepolicy="single_host_origin" might be the cause of your problems.

Just try clearing your cookies or setting data-cookiepolicy="none" while developing.

A more in depth description of date-cookiepolicy can be found here: https://developers.google.com/+/web/signin/reference