Add a Classroom Share Button

You can add and customize the Classroom share button to meet the needs of your website, such as modifying the button size and load technique. By adding the Classroom share button to your website, you allow your users to share your content to their classes and drive traffic to your site.

Getting started

A basic button

The easiest method for including a Classroom share button on your page is to include the necessary JavaScript resource and to add a share button tag:

/g:sharetoclassroom

The script must be loaded using the HTTPS protocol and can be included from any point on the page without restriction. For more information, see the FAQ.

You can also use an HTML5-valid share tag by setting the class attribute to g-sharetoclassroom, and prefixing any button attributes with data-.

<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>

By default, the included script traverses the DOM and renders share tags as buttons. You can improve rendering time on large pages by using the JavaScript API to traverse only a single element within the page, or to render a specific element as a share button.

Deferred execution with onLoad and script tag parameters

Set the parsetags script tag parameter to onload (default) or explicit to determine when button code is executed. To specify script tag parameters, use the following syntax:

<script>
  window.___gcfg = {
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

Configuration

The following sections describe key values of a Share to Classroom button.

Set the URL to share to Classroom

The URL that is shared to Classroom is determined by the button's url attribute. This attribute explicitly defines the target URL to share and must be set in order to render the share button.

Script tag parameters

These parameters are defined within a script element that must run before loading the platform.js script. The parameters control the button loading mechanism that is used across the entire web page.

The allowed parameters are:

onload

All share buttons on the page are automatically rendered after the page loads. See the deferred execution onLoad example.

explicit

Share buttons are rendered only with explicit calls to

gapi.sharetoclassroom.go or gapi.sharetoclassroom.render.

When you use the explicit load in conjunction with go and render calls that point to specific containers in your page, you prevent the script from traversing the entire DOM, which can improve button rendering time. See the gapi.sharetoclassroom.go and gapi.sharetoclassroom.render examples.

Share tag attributes

These parameters control settings for each button. You can set these parameters as attribute=value pairs on share button tags, or as JavaScript key:value pairs in a call to gapi.sharetoclassroom.render.

Classroom share button guidelines

The display of the Classroom Share Button should conform to our min-max size guidelines and related color or button templates. The button supports a variety of sizes, from a minimum size of 32 pixels to a maximum of 96 pixels.

Theme	Example
Classic
Dark
Light

Customization

We prefer that you don't change or remake the icon in any way. However, if you display multiple third-party social icons together on your app, you can customize the Classroom icon to match your app's style. If you do so, ensure that all buttons are customized using a similar style and that any customizations follow the Classroom branding guidelines. If you want to fully control the appearance and behavior of the share button, you can initiate the share using a URL of the following structure: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

The share button JavaScript defines two button-rendering functions under the gapi.sharetoclassroom namespace. You must call one of these functions if you disable automatic rendering by setting parsetags to explicit.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Examples

The following are HTML examples of Share to Classroom button implementations.

Basic page

<html>
  <head>
    <title>Classroom demo: Basic page</title>
    <link href="http://www.example.com" />
    <script src="https://apis.google.com/js/platform.js" async defer>
    </script>
  </head>
  <body>
    <g:sharetoclassroom size=32 url="http://google.com"></g:sharetoclassroom>
  </body>
</html>

Explicitly load tags in a subset of the DOM

<html>
  <head>
    <title>Demo: Explicit load of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <div id="content">
      <div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>
    </div>
    <script>
      gapi.sharetoclassroom.go("content");
    </script>
  </body>
</html>

Explicit render

<html>
  <head>
    <title>Demo: Explicit render of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
      function renderWidget() {
        gapi.sharetoclassroom.render("widget-div",
            {"url": "http://www.google.com"} );
      }
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <a href="#" onClick="renderWidget();">Render the Classroom share button</a>
    <div id="widget-div"></div>
  </body>
</html>

Frequently asked questions

The following FAQs deal with technical considerations and implementation details. For additional resources, see the general FAQs.

How do I test my Classroom share button integration?

You may request Classroom test accounts to test sharing to Classroom from your integration.

Can I place multiple buttons on a single page that all share different URLs?

Yes. Use the url attribute as specified in the share tag parameters to indicate the URL to be shared to Classroom.

Where should I put the share button on my pages?

You know your page and your users best, so we recommend putting the button wherever you think it will be the most effective. Above the fold, near the title of the page, and close to sharing links is often a good location. It can also be effective to place the share button at both the end and beginning of a piece of created content.

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 closing the body tag, you might improve the loading speed of the page.

Does the script tag need to be included before the share 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. You also cannot use async defer with any of the JavaScript API methods.

Do I need to use the url attribute?

The url attribute is required. Not explicitly setting url will cause the share button to not render. See share target URL for more information.

Some of my users get a security warning when they view pages with the share button. How do I get rid of this?

The share button code requires a script from Google's servers. You might get this error by including the script using http:// on a page that's loaded using https://. We recommend using https:// to include the script:

What web browsers are supported?

The Classroom share button supports the same web browsers as the Classroom web interface, browsers like Chrome, Firefox®, Internet Explorer®, or Safari®. Note: The functions specified for onsharestart and onsharecomplete are not called for users of Internet Explorer.

What data is sent to Classroom when you click the Classroom share button?

When a user clicks the share button, they are prompted to sign in with their G Suite for Education account. After authentication, the user account and url attribute are sent to Classroom to complete the post.