Google plus sign in button not rendered when online
google-plus, javascript, web
Solution
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!
Problem
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!