How to render a google+ signin button for mobile and web view - google-plus

Question

I am building a website with a google+ login.
The site is responsive, so i have a different google+ button for web and mobile as follows:
signin button for mobile view -> hidden in web view
<div id="mobile" class="container visible-xs hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-xs-12 mobile-signup-form">
<form class="form-signin">
<h2 class="form-heading visible-xs hidden-lg hidden-sm hidden-md">Find great tour guides.</h2>
<input type="text" class="form-control" placeholder="Pick a Username" autofocus>
<input type="text" class="form-control" placeholder="Your email">
<input type="password" class="form-control" placeholder="Create a Password">
<button id="submit-btn" class="btn btn-lg btn-primary btn-block" type="submit">Sign up for Tourbly</button>
<div class="hr-with-words">
<span class="smallor">or</span>
</div>
<div id="gSignInWrapper">
<div id="customBtn_M" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
</form>
</div>
</div>
</div>
signin button for web view -> hidden in mobile view
<div id="gSignInWrapper" ng-show="immediateFailed">
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Sign up with Google</span>
</div>
</div>
I use the following JS code to render the button for web view
gapi.signin.render('customBtn', {
'callback': 's_up_c_bks_loc',
'clientid': '1066634592899.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
I can only pass one id to the render function, how can i get the right button rendered for the right view (mobile or web).
I have tried rendering both but the last one overrides the first.
I'm using angular js, so any suggestions/solutions which makes use of that will be appreciated.
Thanks

Answer 1

You can call the render function more than once, which might be the easiest way. You can move the second parameter to a var which you pass to both calls, or you might want to take advantage of thew new page level config: https://developers.google.com/+/web/signin/reference#page-config
This might be the easiest way, as it will trigger an immediate mode check (see whether the user has previously consented, and fire the callback) as soon as the page loads. This means you could choose which to render at that time, as part of the immediate failed (I notice you have a reference to an immediateFailed var in ng-show which is presumably only displaying if the immediate check failed, so you're doing the right sort of thing already).
If using page level config, you wouldn't even need to pass the parameters, just call:
gapi.signin.render('customBtn');
gapi.signin.render('customBtn_M');