How can I use the round logo for the Google Classroom Share Button?

Question

I want to use the round logo of the Google Classroom Share Button as shown in the "Google Classroom Branding Guidelines" page.

I've used the example in the "Add a Classroom Share Button" page, but I can't figure out how to use the round logo instead of the square one.

Can anyone help?

What are you trying to add it to? A webpage? with JavaScript? — CaptJak, Feb 09 '16 at 16:49
Just trying to run the example from the Google Classroom example page, but using the round logo instead of the square one. I thought maybe there's a data attribute that I can use to specify the logo shape, but couldn't find anything about it in the documentation. — Bogdan Cornianu, Feb 11 '16 at 16:23
Tag the question with the language you are using. It'll get your question viewed by the appropriate audience. — CaptJak, Feb 11 '16 at 17:59

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

You can't "configure" the share button itself to use a different logo; to accomplish this you'll need to "manually" display the icon and then direct the user to the REST share endpoint.

edited May 23 '17 at 11:50

Community

answered Feb 16 '16 at 12:56

mjs

score 0 · Answer 2 · answered Feb 16 '16 at 13:19

Use CSS to change the icon.

Upload the icon you want somewhere online an overwrite the background-image-rule

When using the example code I get e CSS rule like:

.mgQYsb {
    background-image: url("https://www.gstatic.com/classroom/logo_square_48.svg");
}

overwrite this rule with

.mgQYsb {
    background-image: url("<your url>/<your logo>") !important;
}

And let's hope the class stays the same. Or you might find a more general rule which does not take the class into account like

div.hrIdWidgetContainer>div>div> {
    background-image: url("<your url>/<your logo>") !important;
}

I tried to play around with the actual rule to see if the round logo is somewhere in the same folder on gstatic.com, but did not find anything.

2 Answers2