The following methods and classes are useful when working with the Google+ plugins, Google+ Sign-In button and the HTTP APIs. The full Google JavaScript Client Library reference contains additional methods and classes.
Loading the JavaScript API
For most of the plugins, your site only needs to include the Google+
JavaScript API (platform.js). The Google+ JavaScript API can be loaded with the
following script tag:
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
If you are building an app that uses interactive posts or uses REST web services, you should also load the client in your script tag:
<script src="https://apis.google.com/js/client:platform.js" async defer>
</script>
Deferred execution with onLoad and script tag parameters
Use the onload callback to execute widget code after all dependencies have loaded.
To specify script tag parameters, use the following syntax:
<script >
window.___gcfg = {
lang: 'zh-CN',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
Specifying an onload callback
You can define an onload callback that will execute when the script has
successfully loaded. This callback can be helpful to ensure that your scripts
run at the appropriate time.
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer>
</script>
When you load the script synchronously, your onload callback function must be
defined prior to loading the script above.
Specifying the publisher ID
When you use the mobile web recommendations, you must
pass your Google+ Page ID to the JavaScript API by using the publisherid query
parameter:
<script src="https://apis.google.com/js/platform.js?publisherid={{PAGE_ID}}" async defer>
</script>
You would replace {{PAGE_ID}} with the numeric
ID that can be found in the URL to your Google+ Page. For example:
https://apis.google.com/js/platform.js?publisherid=110967630299632321627
If your Google+ Page uses a custom URL, you can find the Google+ Page ID by
inspecting one of the Google+ Page's posts. You can copy the link from the time
stamp on the post to extract the numeric ID:
Configuration options
You can specify options for how to handle the loading of plugins and the language to use for the plugins. These options must be defined within a <script /> element prior to loading the JavaScript API or be defined within the same <script /> element that loads the JavaScript API, for example:
<script>
// Defines the configuration options, these must be set before you load
// the platform.js file.
window.___gcfg = {
lang: 'en-US',
parsetags: 'explicit' // DS?: can the onload param be removed from the line below and added here?
// E.g., 'explicit','onload'
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
lang- type: string- Sets the language to use for all of the plugins on the page. See the full list of supported languages.
parsetags- type: string-
Sets the loading mechanism to use.
-
onload: All plugins on the page are automatically rendered after the page loads. -
explicit: Plugins are rendered only with explicit calls to their respectivegoorrendermethods. When you use the explicit load in conjunction withgoandrendercalls that point to specific containers in your page, you prevent the script from traversing the entire DOM, which can improve button rendering time.
-
Other Google JavaScript APIs also use this object to define configuration options, such asGoogle Analytics's social analytics.
Methods
These methods listed below are a subset of the Google JavaScript Client Library that are useful when working with Google+ features.
Authentication and authorization
See the Google Sign-In JavaScript client reference.
gapi.client.load(name, version, callback)
Loads the client library interface to a particular API. The new API interface
will be in the form gapi.client.api.collection.method. For example, the
Moderator API would create methods like gapi.client.moderator.series.list.
Arguments:
name- type: string- The name of the API to load.
version- type: string- The version of the API to load.
callback- type: function- Optional function that is called once the API interface is loaded.
gapi.client.request(args)
Creates a HTTP request for making RESTful requests.
Arguments:
args- type: object-
An object encapsulating the various arguments for this method. The path is
required, the rest are optional. The values are described in detail below.
path- type: string- The URL to handle the request.
method- type: string-
The HTTP request method to use. Default is
GET. params- type: Object- URL params in key-value pair form.
headers- type: Object- Additional HTTP request headers.
body- type: string- The HTTP request body (applies to PUT or POST).
callback- type: Function-
If supplied, the request is executed immediately and no
gapi.client.HttpRequestobject is returned.
Returns: type: gapi.client.HttpRequest|undefined. If no callback is
supplied, a request object is returned. The request can then be executed via
gapi.client.HttpRequest.execute(callback).
gapi.client.setApiKey(apiKey)
Sets the API key for the app, which can be found in the Google API Console. Some APIs require this key to be set in order to work.
Arguments:
apiKey: type: string- The API key to set.
Classes
OAuth 2.0 Token Object
The OAuth 2.0 token object represents the OAuth 2.0 token and any associated data. The properties of this object include:
access_token- type: string- The OAuth 2.0 token. Only present in successful responses.
error- type: string- Details about the error. Only present in error responses.
expires_in- type: string- The duration, in seconds, the token is valid for. Only present in successful responses.
state- type: string- The Google API scopes related to this token.
gapi.client.HttpRequest
An object encapsulating an HTTP request. This object is not instantiated directly, rather it is returned by gapi.client.request. It defines one method:
gapi.client.HttpRequest.execute(callback)
Executes the request and runs the supplied callback on response.
Arguments:
callback(jsonResp, rawResp)- type: Function-
The callback function which will execute when the request succeeds or fails.
jsonRespcontains the response parsed as JSON. If the response is not JSON, this field will befalse.rawRespis the HTTP response. It is JSON, and can be parsed to an object which includesbody,headers,status, andstatusTextfields.
The full Google JavaScript Client Library reference contains additional methods and classes.
Plugin methods
The following methods are used to control the rendering and loading of the Google+ plugins, including the +1 button, badges, follow button, interactive share, share button, and sign-in button.
gapi.community.* (Community badge)
Renders all community badge tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a community badge.
Arguments: The following table lists the parameters that are applicable to the
Sets the orientation of the badge The pixel width of the badge to render. The following ranges are valid:gapi.community.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
community badge tags on the page are rendered.
gapi.community.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.community.render() method:
Attribute
Value
Default
Description
hrefURL to the Google+ page or user profile
The URL of the Google+ community that the user might
choose to visit and join.
layout
landscapeportraitportrait
showphoto
truefalsetrue
Displays the community profile photo if set to true and the
photo exists.
showowners
truefalsefalse
Displays a list of community owners if set to true.
showtagline
truefalsetrue
Displays the community's tag line if set to true.
theme
light
dark
light
The color theme of the badge. Use
dark when
placing the badge on a page with a dark background.
widthint
300
gapi.follow.* (Follow button)
Renders all follow button tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a follow button.
Arguments: The following table lists the parameters that are applicable to the
Sets the annotation to display next to the button.
Display the number of users who are following this page or
person in a graphic above to the button.
The pixel height of the button to render. This height controls only the height of the button. If you use the
vertical annotation, the actual height of the full widget will be
larger.gapi.follow.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
follow button tags on the page are rendered.
gapi.follow.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.follow.render() method:
Attribute
Value
Default
Description
hrefURL to the Google+ page or user profile
The URL of the Google+ page or user profile that the user might
choose to follow. The following URL formats are supported:
https://plus.google.com/110967630299632321627https://plus.google.com/+LarryPage
annotation
nonebubblevertical-bubblebubble
height
15202420
rel
authorpublisher—
Describes the relationship of the entity defined at the
href location to the page the
badge is embedded.
gapi.interactivepost.* (Interactive posts)
Renders all interactive post tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a interactive post.
Arguments: The following table lists the parameters that are applicable to the
The content URL points to the page that you want to render in the
preview snippet in the share post. This URL can differ from the
call-to-action button's URL, for example, you might link to an
overview with the content URL and to a form with the call-to-action
button.
If you specify the
The protocol (http/https), host name, and port (if specified) for the
content URL and the
call-to-action URL must
match. Because these must match, you should avoid using URL shorteners
and redirects for either URL.
Specify a URI path as a deep link ID for the content link in the
shared post. The value must be 512 characters or fewer in length.
To take advantage of deep linking, your mobile app should be
configured to handle incoming deep links. For more information, see
handling incoming deep links for Android or iOS.
Directs the interactive share button to store user and session
information in a session cookie and HTML5 session storage on the
user's client for the purpose of minimizing HTTP traffic and
distinguishing between multiple Google accounts a user might be signed
into. We call these two means of storage the client storage.
When a page containing a interactive share button is loaded, the
user's sign-in state can quickly be accessed from this client storage
rather than from Google servers, reducing the latency for button
loading. In addition, the cookie can allow a user who is signed in to
multiple Google accounts (say, work and personal) to select which
account to use with your website. The cookie and session storage are
deleted once the user ends their browsing session.
The value of the
Available values -
Three values of
For help with choosing a value, see
Determining a
value for cookie policy.
uri
The uri includes the scheme,
site-domain and possibly port to be set for
your site. The value you provide determines the scope of the
cookie. The more general the uri, the broader the scope
of the cookie. The first five use
cases are examples. Specify uri in one of the
following three URI formats:
Note: Sites with distinct domain suffixes
(such as http://example.com and http://example.co.uk)
must have different site_domain values, and
therefore must be specified with different
Use this value if your website has only a single host name and no
subdomains (for example, host http://example.com but not
http://www.example.com). This string is shorthand for the scheme
and host name (and port number if it's not the default for the
scheme) of the current page, which then is equivalent to the
uri value above.
The
Note: You can identify client storage entries written
by the interactive share button by checking their prefixes:
The label that renders in the stream post that prompts the reader
to act. This field should be a verb that accurately describe the
action that will be taken.
The
The call-to-action label is automatically translated in the Google+
stream to the viewer's language.
The URL that the user will be taken to when the call-to-action button
is clicked from a web browser. If the button is clicked on a mobile
device, the Google+ app launches your app and passes the
The protocol (http/https), host name, and port (if specified) for the
call-to-action URL and the contenturl must
match. Because these must match, you should avoid using URL shorteners
and redirects for either URL.
Specify a URI path as a deep link ID for the call to action button.
The value must be 512 characters or fewer in length.
To take advantage of deep linking, your mobile app should be
configured to handle incoming deep links. For more information, see
handling incoming deep links for Android or iOS.
Text that is prefilled in the comment area of the share box on behalf
of the user. The user can edit or remove the prefilled text.
The maximum length of the prefilled text is 1042 characters.
A comma-separated list of user IDs and email addresses that you want
to prefill the share settings with. You can get these IDs by calling
the people.list method on
behalf of an authenticated user. A
maximum of ten recipients are allowed.
A function, in the global namespace, which is called after a
successful sign-in occurs. This function must hide the sign-in button.
This function is passed a single parameter: a JSON object with the
following structure:
If your app will write moments, list the full URI of the types of moments that you intend to
write. For example:
The OAuth 2.0 scopes for the APIs that you would like to use as a
space-delimited list. You can list Google+ scopes and other Google OAuth
2.0 scopes that your application might require. Find more scopes in
the OAuth 2.0
Playground.
gapi.interactivepost.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
interactive post tags on the page are rendered.
gapi.interactivepost.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.interactivepost.render() method:
Key
Value
Default
Required
Description
clientidstring
—
Required
Your OAuth 2.0 client ID that you obtained from the Google API Console.
contenturlurl
—
Required
contentdeeplinkid attribute and the
link is clicked on a mobile device, the Google+ app launches your app
and passes the contentdeeplinkid for your app to use to
determine the location within your app to take the user.
contentdeeplinkid
string
—
—
cookiepolicy
single_host_originnone—
Required
cookiepolicy attribute
determines the scope of URIs that can access the cookie. Choose this
value based on the website's domain name to set the cookie's scope.
Then the cookie can be accessed by all interactive share buttons
within that scope. You should use a policy that is as broad as
necessary for your site because that reduces the number of cookies
that your site writes to the user's client. There should ideally be
only one cookie for each distinct domain suffix you are allowed to
write cookies for (for example, one cookie each for example.com and
example.co.uk).
cookiepolicy are allowed: a
uri, single_host_origin, and
none. The most versatile setting you can pass is the
uri value that most broadly matches the structure of your
website.
http://mail.example.com, would set a
more narrowly scoped cookie that further restricts its scope to
only that domain and its subdomains.
cookiepolicy markup.
single_host_origin
none
none value does not set cookies or session
storage for the interactive share button and uses a less efficient
fallback mechanism for determining user and session information.
Setting this value to none also prevents gapi.auth.signout from
working for the user and requires you to implement signout
appropriately. This value also can prevent a user who is signed in to
multiple Google accounts (say, work and personal) from being able to
select which account to use with your website.
GCSC prefix is used for session cookies and HTML5
session storage, and
G_AUTHUSER_ prefix is used for session cookies only.
calltoactionlabel
ACCEPT
ACCEPT_GIFT
ADD
ADD_FRIEND
ADD_ME
ADD_TO_CALENDAR
ADD_TO_CART
ADD_TO_FAVORITES
ADD_TO_QUEUE
ADD_TO_WISH_LIST
ANSWER
ANSWER_QUIZ
APPLY
ASK
ATTACK
BEAT
BID
BOOK
BOOKMARK
BROWSE
BUY
CAPTURE
CHALLENGE
CHANGE
CHAT
CHECKIN
COLLECT
COMMENT
COMPARE
COMPLAIN
CONFIRM
CONNECT
CONTRIBUTE
COOK
CREATE
DEFEND
DINE
DISCOVER
DISCUSS
DONATE
DOWNLOAD
EARN
EAT
EXPLAIN
FIND
FIND_A_TABLE
FOLLOW
GET
GIFT
GIVE
GO
HELP
IDENTIFY
INSTALL
INSTALL_APP
INTRODUCE
INVITE
JOIN
JOIN_ME
LEARN
LEARN_MORE
LISTEN
MAKE
MATCH
MESSAGE
OPEN
OPEN_APP
OWN
PAY
PIN
PIN_IT
PLAN
PLAY
PURCHASE
RATE
READ
READ_MORE
RECOMMEND
RECORD
REDEEM
REGISTER
REPLY
RESERVE
REVIEW
RSVP
SAVE
SAVE_OFFER
SEE_DEMO
SELL
SEND
SIGN_IN
SIGN_UP
START
STOP
SUBSCRIBE
TAKE_QUIZ
TAKE_TEST
TRY_IT
UPVOTE
USE
VIEW
VIEW_ITEM
VIEW_MENU
VIEW_PROFILE
VISIT
VOTE
WANT
WANT_TO_SEE
WANT_TO_SEE_IT
WATCH
WATCH_TRAILER
WISH
WRITE
Open
—
calltoactionurl must also be specified to render the
call-to-action button.
calltoactionurl
url
—
Required
calltoactiondeeplinkid for your app to use to determine
the location within your app to take the user.
calltoactiondeeplinkid
string
—
—
prefilltextstring
—
—
recipientsstring
—
—
Inherited attributes from sign in
NOTE: These attributes apply only to web, not to mobile web.
accesstype
onlineofflineonline
—
If using the server-side sign-in flow and you want to get a refresh
token that you can use to make offline requests, specify this attribute
and set the value to
offline.
approvalprompt
autoforceauto
—
Allows control over when the user is re-prompted for consent.
When set to
auto, the user only sees the OAuth consent
dialog if they have not authorized your application. When set to
force, the user is shown the OAuth consent dialog each
time that they click the sign-in button.
callbackfunction(authResult)
—
—
{
"id_token": A JSON web token (JWT) that contains identity information about the user that is digitally signed by Google,
"access_token": the access token,
"expires_in": the validity of the tokens, in seconds,
"code" : a one-time code that can be sent to your server and exchanged for an access token,
"error": The OAuth2 error type if problems occurred,
"error_description": an error message if problems occurred
}
requestvisibleactions
A space delimited list of moment type URIs.
—
—
http://schema.org/AddAction.
scopeA space-delimited list of scope URIs
https://—
gapi.page.* (Page badge)
Renders all badge tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a badge.
Arguments: The following table lists the parameters that are applicable to the
Sets the orientation of the badge The pixel width of the badge to render. The following ranges are valid:gapi.page.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
badge tags on the page are rendered.
gapi.page.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.page.render() method:
Attribute
Value
Default
Description
hrefURL to the Google+ page
The URL of the Google+ page that is associated with this brand.
layout
landscapeportraitportrait
theme
light
dark
light
The color theme of the badge. Use
dark when
placing the badge on a page with a dark background.
showcoverphoto
truefalsetrue
Displays the cover photo in the badge if set to true and the
photo exists.
showtagline
truefalsetrue
Displays the page's tag line if set to true.
widthint
300
gapi.person.* (Profile badge)
Renders all badge tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a badge.
Arguments: The following table lists the parameters that are applicable to the
Sets the orientation of the badge The pixel width of the badge to render. The following ranges are valid:gapi.person.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
badge tags on the page are rendered.
gapi.person.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.person.render() method:
Attribute
Value
Default
Description
hrefURL to the Google+ page
The URL of the Google+ profile.
layout
landscapeportraitportrait
showcoverphoto
truefalsetrue
Displays the cover photo in the badge if set to true and the
photo exists.
showtagline
truefalsetrue
Displays the user's tag line if set to true.
theme
light
dark
light
The color theme of the badge. Use
dark when
placing the badge on a page with a dark background.
widthint
300
gapi.plusone.* (+1 button)
Renders all +1 button tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a +1 button.
Arguments: The following table lists the parameters that are applicable to the
Display a count of users who have +1'd the page.
See Inline annotation
widths for examples of how the annotation is displayed for
various width settings.
Sets the preferred positions to display hover and confirmation
bubbles, which are relative to the button. Set this parameter when
your page contains certain elements, such as Flash objects, that
might interfere with rendering the bubbles.
For example,
If omitted, the rendering logic will guess the best position,
usually defaulting to below the button by using the
The
If specified, this function is called either when a hover bubble
displays, which is caused by the user hovering the mouse over the
+1 button, or when a confirmation bubble displays, which is caused
by the user +1'ing the page. You can use this callback function to
modify your page, such as pausing a video when the bubble appears.
This function must be in the global namespace and accept a single
parameter, which is a JSON object with the following structure:
If specified, this function is called when either a hover or
confirmation bubble disappears. You can use this callback function
to modify your page, such as resuming a video when the bubble
closes.
This function accepts a single parameter, which is identical in
structure to the parameter passed to
gapi.plusone.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
+1 button tags on the page are rendered.
gapi.plusone.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.plusone.render() method:
Attribute
Value
Default
Description
hrefURL to +1
current page URL
Sets the URL to +1. Set this attribute when you have a +1 button next
to an item description for another page and want the button to +1 the
referenced page and not the current page. If you set this attribute by
using
gapi.plusone.render,
you should not escape the URL.
size
smallmediumstandardtallstandard
Sets the +1 button size to render. See button sizes for more
information.
annotation
nonebubbleinlinebubble
Sets the annotation to display next to the button.
widthint
—
If
annotation is set to
"inline", this parameter sets the width in pixels to use
for the button and its inline annotation. If the width is omitted, a
button and its inline annotation use 450px.
align
leftrightleft
Sets the horizontal alignment of the button assets within its frame.
expandTo
comma-separated list of
toprightbottomleftempty list
top will display the hover and
confirmation bubbles above the button.
bottom value.
callbackfunction(jsonParam)
—
If specified, this function is called after the user clicks the +1
button. The callback function must be in the global namespace and
accept a single parameter, which is a JSON object with the following
structure:
{
"href": target URL,
"state": "on"|"off"
}
state property is set to "on" for a
+1, and "off" for the removal of a +1.
onstartinteraction
function(jsonParam)
—
{
"id": target URL,
"type": hover|confirm
}
onendinteraction
function(jsonParam)
—
onstartinteraction.
recommendations
true, falsetrueTo disable showing recommendations within the +1 hover bubble, set
recommendations
to false. This feature is currently in platform
preview.
counttrue, falsetrue
Deprecated: To disable the count display, use
annotation="none".
gapi.plus.* (Share button)
Renders all share button tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a share button.
Arguments: The following table lists the parameters that are applicable to the
The preferred positions in which to display hover and confirmation
bubbles, relative to the button. Set this parameter when your page
contains certain elements, such as Flash objects, that might
interfere with rendering the bubbles.
If omitted, the rendering logic will guess the best position,
usually defaulting to below the button (bottom).
If specified, this function is called when an interaction bubble
appears (such as when the user hovers over the button or starts the
sharing flow).
This function must be in the global namespace and may accept a
single parameter, which will be a JSON object with the following
structure:
If specified, this function is called when the interaction bubble
disappears. You can use this callback function to modify your page,
such as resuming a video, when the bubble closes.
This function accepts a single parameter, which is identical in structure to the
parameter passed to gapi.plus.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
share button tags on the page are rendered.
gapi.plus.render( container, parameters)
{"width":
"300", "theme": "light"}.
gapi.plus.render() method::
Attribute
Value
Default
Description
hrefURL to share
current page URL
The URL to share. If you set this attribute by using
gapi.plus.render, you
should not escape the URL.
annotation
inlinebubblevertical-bubblenonebubble
The annotation to display next to the button.
widthint
—
The maximum width to allocate to the entire share plugin. See Button Sizes for more information.
heightint
20
The height to assign the button. This may be 15, 20, 24 or 60. See Button Sizes for more information.
align
leftrightleft
Sets the alignment of the button assets within its frame.
expandTo
comma-separated list of
toprightbottomleftempty list
onstartinteractionfunction(jsonParam)
—
{
"id": target URL,
"type": hover|confirm
}
onendinteractionfunction(jsonParam)
—
onstartinteraction.
gapi.post.* (Embedded posts)
Renders all embedded post tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a embedded post.
Arguments: The following table lists the parameters that are applicable to the
gapi.post.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
embedded post tags on the page are rendered.
gapi.post.render( container, parameters)
{'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'}.
gapi.post.render() method:
Attribute
Value
Default
Description
hrefURL to the post
Sets the URL to the specific post that you want to embed in your page.
The URL must point to a publically shared post. If you set this
attribute by using
gapi.post.render,
you should not escape the URL.
gapi.signin.* (Sign in)
Renders all Google+ Sign-In tags and classes in the specified
container. This function should be used only if Arguments:
Renders the specified container as a Google+ Sign-In.
Arguments: The following table lists the parameters that are applicable to the
Directs the sign-in button to store user and session
information in a session cookie and HTML5 session storage on the
user's client for the purpose of minimizing HTTP traffic and
distinguishing between multiple Google accounts a user might be signed
into. We call these two means of storage the client storage.
When a page containing a sign-in button is loaded, the
user's sign-in state can quickly be accessed from this client storage
rather than from Google servers, reducing the latency for button
loading. In addition, the cookie can allow a user who is signed in to
multiple Google accounts (say, work and personal) to select which
account to use with your website. The cookie and session storage are
deleted once the user ends their browsing session.
The value of the
Available values -
Three values of
For help with choosing a value, see
Determining a
value for cookie policy.
uri
The uri includes the scheme,
site-domain and possibly port to be set for
your site. The value you provide determines the scope of the
cookie. The more general the uri, the broader the scope
of the cookie. The first five use
cases are examples. Specify uri in one of the
following three URI formats:
Note: Sites with distinct domain suffixes
(such as http://example.com and http://example.co.uk)
must have different site_domain values, and
therefore must be specified with different
Use this value if your website has only a single host name and no
subdomains (for example, host http://example.com but not
http://www.example.com). This string is shorthand for the scheme
and host name (and port number if it's not the default for the
scheme) of the current page, which then is equivalent to the
uri value above.
The
Note: You can identify client storage entries written
by the sign-in button by checking their prefixes:
If you have an Android app, you can
drive automatic Android downloads
from your web sign-in flow. Set this parameter to the package name
that you listed in your Google API Console project. For example:
Automatic Android app installs are
limited to free apps in the Google Play store that exceed a quality
threshold.
Allows control over when the user is re-prompted for consent.
When set to
You should use this parameter when your app needs to acquire a new one-time code because
you have lost or discarded your one-time code or refresh tokens. Do not use this parameter
to simulate a sign-in and sign-out solution or to disable the immediate authorization
check that occurs when the button is rendered or page-level configuration parameters are
present. See signing out the user.
A function in the global namespace, which is called when the sign-in
button is rendered and also called after a sign-in flow completes.
When the button is rendered the callback occurs to check whether or
not the user previously authorized the app and should be automatically
signed in.
This function should hide or remove the sign-in button when the sign
in is successful as indicated by the
This function is passed a single parameter: a JSON object that
contains a number of properties. The following example shows the
structure of the object and highlights a subset of the properties:
Sets the vertical height of the button.
See also
If
If your app will write moments, list the full URI of the types of moments that you intend to
write. For example:
The OAuth 2.0 scopes for the APIs that you would like to use as a
space-delimited list. You can list Google+ scopes and other Google OAuth
2.0 scopes that your application might require. Find more scopes in
the OAuth 2.0
Playground.
The color theme of the badge. Light renders a white button with red
text and icon. Dark renders a red button with white text and icon.
Controls the width of the button and the button text that appears.
The approximate width is calculated for the user's language to fit the
corresponding text:
See also gapi.signin.go( opt_container)
parsetags
is set to explicit, which you might do for performance
reasons.
opt_container parameter is omitted, all
Google+ Sign-In tags on the page are rendered.
gapi.signin.render( container, parameters)
{'clientid' : 'xxxxxxx.apps.googleusercontent.com', 'cookiepolicy' : 'single_host_origin', 'callback' : 'myCallback', 'requestvisibleactions' : 'http://schema.org/AddAction http://schemas.google.com/CommentAction'}.
gapi.signin.render() method:
Key
Value
Default
Required
Description
clientidstring
—
Required
Your OAuth 2.0 client ID that you obtained from the Google API Console.
cookiepolicy
single_host_originnone—
Required
cookiepolicy attribute
determines the scope of URIs that can access the cookie. Choose this
value based on the website's domain name to set the cookie's scope.
Then the cookie can be accessed by all sign-in buttons
within that scope. You should use a policy that is as broad as
necessary for your site because that reduces the number of cookies
that your site writes to the user's client. There should ideally be
only one cookie for each distinct domain suffix you are allowed to
write cookies for (for example, one cookie each for example.com and
example.co.uk).
cookiepolicy are allowed: a
uri, single_host_origin, and
none. The most versatile setting you can pass is the
uri value that most broadly matches the structure of your
website.
http://mail.example.com, would set a
more narrowly scoped cookie that further restricts its scope to
only that domain and its subdomains.
cookiepolicy markup.
single_host_origin
none
none value does not set cookies or session
storage for the sign-in button and uses a less efficient
fallback mechanism for determining user and session information.
Setting this value to none also prevents gapi.auth.signout from
working for the user and requires you to implement signout
appropriately. This value also can prevent a user who is signed in to
multiple Google accounts (say, work and personal) from being able to
select which account to use with your website.
GCSC prefix is used for session cookies and HTML5
session storage, and
G_AUTHUSER_ prefix is used for session cookies only.
accesstype
onlineofflineonline
—
If using the server-side sign-in flow and you want to get a refresh
token that you can use to make offline requests, specify this attribute
and set the value to
offline.
apppackagename
string
—
—
com.google.android.apps.plus.
approvalprompt
autoforceauto
—
auto, the user only sees the OAuth consent
dialog if they have not authorized your application. When set to
force, the user is shown the OAuth consent dialog each
time that they click the sign-in button.
callbackfunction(authResult)
—
—
authResult object
containing an access token.
{
"id_token": A JSON web token (JWT) that contains identity information about the user that is digitally signed by Google,
"access_token": the access token,
"expires_in": the validity of the token, in seconds,
"error": The OAuth2 error type if problems occurred
}
height
shortstandardtallstandard
—
width.
includegranted
truefalsetrue
—
true, all previously granted scopes remain granted in
each incremental request, for
incremental authorization.
The default value true is correct for most use cases;
use false only if employing delegated auth, where
you pass the bearer token to a less-trusted component with lower
programmatic authority.
requestvisibleactions
A space-delimited list of moment type
URIs.
—
—
http://schema.org/.
scopeA space-delimited list of scope URIs
https://—
theme
light
dark
dark
—
width
iconOnlystandardwidestandard
—
iconOnly - Displays the Google+ icon only.standard - Displays the Google+ icon followed by
"Sign in"wide - Displays the Google+ icon followed by "Sign in
with Google"height.