如何自定义谷歌课堂分享按钮的外观

Posted 2023-02-16

【中文标题】如何自定义谷歌课堂分享按钮的外观

【英文标题】：How to customize the look & feel of the google clas-s-room share button

【发布时间】：2015-11-07 17:18:49

【问题描述】：

目前，它看起来像一个正方形，旁边没有文字，我们希望自定义外观而不干扰图标以匹配我们的其他按钮。

已经尝试为div添加样式，转换为分享图标，但目前未成功。

<div id='widget-div' class='btn btn-blue'>Google Clas-s-room</div>

上面的行呈现如下：

知道如何进一步或研究哪个方向吗？

【问题讨论】：

您是否查看了此链接developers.google.com/clas-s-room/guides/sharebutton，其中包含自定义课堂分享按钮的示例。

是的，通过它，但我能找到的只是它允许更改为 3 种预定义的颜色和尺寸。

【参考方案1】：

要修改按钮，您可以参考Share button 文档。但是，您需要遵循一些限制才能以适当的方式修改“课堂”按钮。

Here您可以找到徽标的所有规范和限制。检查这些规范是否允许您根据需要修改徽标。

【讨论】：

已经通过了，但是找不到任何方法来自定义我想要的方式（请参考问题中的快照）。它所允许的只是更改为 3 种预定义的颜色和尺寸。请参阅更新后的问题，了解我需要哪种类型的自定义。

【参考方案2】：

您可以将白色徽标（方形或圆形）放在您选择的彩色背景上。完整的品牌指南here

【参考方案3】：

要获得完全不同的分享按钮，您需要编写自己的 JS 来正确设置按钮样式、处理鼠标点击等，然后将用户引导至https://clas-s-room.google.com/share?url=https://foo.com/ (source) 形式的 URL ）。 （你也需要关注branding guidelines。）

【讨论】：

Google 的博文没有提到这一点，但 https://foo.com/ 可能应该被编码/转义。