Badge types
Because Google+ pages, profiles, and communities are different, we offer slightly different versions of the badges:
- Profiles
- Allow people to easily find you on Google+ and add you to a circle directly from your website.
- Pages
- Includes the profile badge features and adds some additional functionality.
- Communities
- Help people find your community and engage with other users on a topic they find interesting.
Profile badge | Google+ page badge | Community badge |
---|---|---|
If you require a smaller widget, you might also consider using the Google+ Follow button:
Google+ badge for people
Person badge tag
The Google+ badge allows visitors to engage with you directly from the badge itself. The minimum code required to render a Google+ profile badge on your website is one JavaScript include and a badge tag:
<script src="https://apis.google.com/js/platform.js" async defer></script> <g:person href="https://plus.google.com/profileId" data-rel="author"></g:person>
You can also use an HTML5-valid badge tag by setting the class attribute to
g-person
, and prefixing any badge attributes with data-
.
<script src="https://apis.google.com/js/platform.js" async defer></script> <div class="g-person" data-href="https://plus.google.com/profileId"></div>
The Google+ badge can show a link to your Google+ profile and an Add to circles button.
Example badge sizes
Example | Width (px) | Layout |
---|---|---|
|
180 | portrait |
|
300 | portrait |
|
273 | landscape |
|
450 | landscape |
Tag attributes for the person badge
These parameters control settings for each badge. You can set these
parameters as attribute=value
pairs on the Google+ badge tag, or as key:value
pairs in a call to gapi.person.render
.
Attribute | Value | Default | Description |
---|---|---|---|
class |
g-person |
Specify |
|
data-href |
URL to the Google+ page | The URL of the Google+ profile. | |
data-layout |
|
portrait |
Sets the orientation of the badge |
data-showcoverphoto |
|
true | Displays the cover photo in the badge if set to true and the photo exists. |
data-showtagline |
|
true | Displays the user's tag line if set to true. |
data-theme |
|
light |
The color theme of the badge. Use dark when
placing the badge on a page with a dark background.
|
data-width |
int | 300 |
The pixel width of the badge to render. The following ranges are valid:
|
Google+ badge for pages
Page Badge Tag
The Google+ badge allows visitors to engage with your brand directly from the badge itself. The minimum code required to render a Google+ badge on your website is one JavaScript include and a badge tag.
<script src="https://apis.google.com/js/platform.js" async defer></script> <g:page href="https://plus.google.com/pageId"></g:page>
You can also use an HTML5-valid badge tag by setting the class attribute to
g-page
, and prefixing any badge attributes with
data-
.
<div class="g-page" data-href="https://plus.google.com/pageId"></div>
Example badge sizes
Example | Width (px) | Layout |
---|---|---|
|
180 | portrait |
|
450 | portrait |
|
273 | landscape |
|
450 | landscape |
Tag attributes for the pages badge
These parameters control settings for each badge. You can set these
parameters as attribute=value
pairs on the
Google+ badge tag, or as key:value
pairs in a call to gapi.page.render
.
Attribute | Value | Default | Description |
---|---|---|---|
class |
g-page |
Specify |
|
data-href |
URL to the Google+ page | The URL of the Google+ page that is associated with this brand. | |
data-layout |
|
portrait |
Sets the orientation of the badge |
data-theme |
|
light |
The color theme of the badge. Use dark when
placing the badge on a page with a dark background.
|
data-showcoverphoto |
|
true | Displays the cover photo in the badge if set to true and the photo exists. |
data-showtagline |
|
true | Displays the page's tag line if set to true. |
data-width |
int | 300 |
The pixel width of the badge to render. The following ranges are valid:
|
Google+ community badge
Community badge tag
The Google+ community badge allows visitors to your site to find your community and preview the community before choosing to join. The minimum code required to render the badge on your website is one JavaScript include and the community badge tag.
<script src="https://apis.google.com/js/platform.js" async defer></script> <g:community href="https://plus.google.com/communities/communityId"></g:community>
You can also use an HTML5-valid tag by setting the class
attribute to
g-community
, and prefixing the
attributes with
data-
.
<div class="g-community" data-href="https://plus.google.com/communities/communityId"></div>
Example community badge sizes
Example | Width (px) | Layout |
---|---|---|
180 | Default | |
273 | landscape |
|
300 | portrait |
|
300 | landscape |
|
450 | portrait |
|
450 | landscape |
Tag attributes for the community badge
These parameters control settings for each badge. You can set these
parameters as attribute=value
pairs on the Google+
community badge tag, or as key:value
pairs in a call to
gapi.community.render
. If you are using HTML-5 syntax,
specify the data-
prefix before the attribute name,
for example: data-theme="dark"
Attribute | Value | Default | Description |
---|---|---|---|
class |
g-community |
Specify |
|
data-href |
URL to the Google+ page or user profile | The URL of the Google+ community that the user might choose to visit and join. | |
data-layout |
|
portrait |
Sets the orientation of the badge |
data-showphoto |
|
true | Displays the community profile photo if set to true and the photo exists. |
data-showowners |
|
false | Displays a list of community owners if set to true. |
data-showtagline |
|
true | Displays the community's tag line if set to true. |
data-theme |
|
light |
The color theme of the badge. Use dark when
placing the badge on a page with a dark background.
|
data-width |
int | 300 |
The pixel width of the badge to render. The following ranges are valid:
|
Common configuration
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>
Script tag parameters
These parameters are defined within the <script />
element.
The parameters control the
language and
button loading mechanism that are used across the entire web page.
Key | Value | Default | Description |
---|---|---|---|
lang |
language code | en-US |
Sets the language to use for all of the Google+ plugins on the page.
For available language code values, see the
list of supported language
codes and a lang example.
|
parsetags |
explicit, onload |
onload |
Sets the loading mechanism to use.
|
JavaScript API
The badge JavaScript defines two button-rendering functions
for each badge type. You must call one of these
functions if you disable automatic rendering by setting
parsetags
to
"explicit
".
Method | Description |
---|---|
gapi.community.render( |
Renders the specified container as a badge.
|
gapi.community.go( |
Renders all badge tags and classes in the specified
container. This function should be used only if parsetags
is set to explicit , which you might do for performance
reasons.
|
gapi.page.render( |
Renders the specified container as a badge.
|
gapi.page.go( |
Renders all badge tags and classes in the specified
container. This function should be used only if parsetags
is set to explicit , which you might do for performance
reasons.
|
gapi.person.render( |
Renders the specified container as a badge.
|
gapi.person.go( |
Renders all badge tags and classes in the specified
container. This function should be used only if parsetags
is set to explicit , which you might do for performance
reasons.
|
Static badge
The static Google+ badge provides an alternate badge style that links to your Google+ profile or page. This badge is useful if you are unable to use JavaScript on your website. To include a static badge on your site, use the configuration tool to generate the appropriate code for your desired static badge:
Size | Example | Width | Height |
---|---|---|---|
Large |
![]() Google Developers
on Google+
|
>=67 (varies based on page name) | 98 |
Medium |
Google+ Developers
on
![]() |
>=69 (varies based on page name) | 32 |
Small |
Google Developers
on
![]() |
>=53 (varies based on page name) | 16 |
Large (no text) |
![]() ![]() |
64 | 64 |
Medium (no text) |
![]() |
32 | 32 |
Small (no text) |
![]() |
16 | 16 |
The static badge does not allow a user to follow you directly from your site. You might consider using the Google+ Follow button if you need a smaller widget to fit in your design.
Use of the code above is subject to the Google Button Publisher Policies.
Frequently asked questions
The following FAQs deal with technical considerations and implementation details. For additional resources, see Webmaster Tools Help and the Google+ Developers Forum.
-
Is there any latency impact from the position of the
<script>
tag in the page? -
No, there is no significant latency impact from the placement of the
<script>
tag. However, by placing the tag at the bottom of the document, just before the</body>
tag, you might improve the loading speed of the page. -
Does the
<script>
tag need to be included before the +1 tag? -
No, the
<script>
tag can be included anywhere in the page. -
Does the
<script>
tag need to be included before another<script>
tag calls one of the methods in the JavaScript API section? -
Yes, if you use any of the JavaScript API methods, they need to be placed in the page after the
<script>
inclusion. - Some of my users get a security warning when they view pages with the Google+ badge. How do I get rid of this?
-
The Google+ badge button code requires a script from Google's servers. You might get this error by including the script via http:// on a page that's loaded via https://. We recommend using https:// to include the script:
<script src="https://apis.google.com/js/platform.js" async defer></script>
If your web page uses
https://
, some browsers and verification tools will show an error when any assets on the page are called viahttp://
. If your site serves pages viahttps://
, make sure that the +1 button code on those pages also useshttps://
. In fact, it's fine to usehttps://
in the button code for all pages, even if they are only served viahttp://
. - What web browsers are supported?
-
All Google+ plugins support the same
web browsers as the
Google+ web interface:
- Windows: Chrome, Firefox 3.6 and up, Internet Explorer 8 and up
- Linux : Chrome, Firefox 3.6 and up
- Mac: Chrome, Firefox 3.6 and up, Safari 4 and up
- What data is sent to Google when you click the badge?
- When a user clicks a badge, Google receives information including the URL of the page/profile/community previewed, or followed from the badge, information about the user's Google profile, the user's IP address, and other browser-related information.