【发布时间】：2011-07-05 16:14:16
【问题描述】：
我想在页面上包含一个“google+1”按钮，但我想使用具有自定义大小的自定义图像，最好不使用 javascript，就像 Facebook 和 Twitter 一样。我不在乎它现在是否不显示计数。
【问题讨论】：
-
确保这不会违反他们的服务条款。更改 FB like 按钮的外观违反了 FB TOS。
标签： google-plus-one
【发布时间】：2011-07-05 16:14:16
【问题描述】：
终于！找到了一个很好的解决这个问题的方法。如此简单且有效:) 希望对您有所帮助！
<a href="https://plus.google.com/share?url=ADD_YOUR_URL" >
<img src="path_to_your_image" alt="Google+" title="Google+"/>
</a>
来源：http://notesofgenius.com/how-develop-custom-google-plus-button/
【讨论】：
-
有一个更新的网址：plus.google.com/share?url=[URL]。如果您将其作为弹出窗口打开，它会自动调整大小以适应窗口，这与原始链接不同。
-
我想知道使用这种方法是否可以为共享页面指定缩略图，而不是让 Google 自行选择。
-
只是一点警告。分享不同于 +1。 “将此按钮添加到您网站上的内容中，以便在 Google+ 上轻松分享。此按钮非常适合用户可能想要分享但不想 +1 的内容（例如新闻或有争议的内容）。” developers.google.com/+/web/share
-
这种情况下无法回调。
-
是否可以加载以模式（灯箱）打开的内容？而是在新标签/窗口中？
这是来自google developers page的官方示例：
还要考虑 URL 已更新。
<a href="https://plus.google.com/share?url={URL}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
<img src="https://www.gstatic.com/images/icons/gplus-64.png" alt="Share on Google+"/>
</a>
【讨论】：
-
skyzerblogger.blogspot.com/2014/11/… 做了一篇博客文章。基本上几乎一样。
使用 opacity 0 使其不可见。然后使用背景使它看起来像你想要的。
<style>
.my_custom_googleplusone{
overflow: hidden;
background: url(blahblah.png);
}
.my_custom_googleplusone:hover{
background: url(blahblah2.png);
}
</style>
<div class="my_custom_googleplusone">
/// GOOGLE BUTTON WITH OPACITY OF 0 (and z-index 1 with absolute position);
</div>
【讨论】：
-
Google 按钮的奇怪部分仍然存在问题，这些部分有时不可见，使其不对齐。
您可以叠加图像并保留功能：
http://tcg.ellininc.com/buttonTest/
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<style>
.my_custom_googleplusone{
overflow: hidden;
background-image: url(styled.png);
background-repeat: no-repeat;
height: 30px;
width: 161px;
position: absolute;
pointer-events: none;
}
.my_custom_googleplusone:hover{
visibility: hidden;
}
.hideMe {
height: 30px;
width: 161px;
overflow: hidden;
position: absolute;
z-index: -1; !Important
}
</style>
</head>
<body>
<div><g:plusone></g:plusone></div><br />
<div class="my_custom_googleplusone"></div>
<div class="hideMe"><g:plusone></g:plusone></div>
</body>
对于任何无关的 css，我深表歉意。
【讨论】：
如果您愿意使用 JavaScript，这将提供更官方的体验。
HTML
<a href="#" onclick="gPlus('http://example.com');" title="+1">
<img src="custom-image.png" alt="Google+ +1 Button">
</a>
JavaScript
function gPlus(url){
window.open(
'https://plus.google.com/share?url='+url,
'popupwindow',
'scrollbars=yes,width=800,height=400'
).focus();
return false;
}
如果您在全局范围内包含该功能，您可以在所有地方都有这样的按钮，而无需使用多个冗长的内联onClicks。
【讨论】：
我使用 Chrome 的元素检查器来确定要定位的元素（您也可以使用 Firebug）：
+1 的原始精灵在这里：https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png
在我的实现中，呈现的<a> 具有a-sb-ig-e 和a-sb-ig-ps-e 的类，其父级是<div>，具有a-sb-ML 的类
从那里，您可以简单地在自己的 CSS 中设置按钮样式。同样，您也可以通过检查计数器气泡并找出其元素的类来设置其样式。
编辑：因为 +1 按钮是在 iframe 中调用的，所以我上面描述的内容不起作用。您可以做的是定位 +1 div 并将其不透明度设置为 0，然后将其放在您自己的图像之上。要定位的 div ID 是 #___plusone_0
【讨论】：
-
您遇到了什么问题？您是否尝试过将
!important添加到您的风格中？我已经成功地设置了#___plusone_0容器 DIV 的样式。我没有尝试定位它，但我认为它应该可以工作。 -
我们是否真的可以使用不同的图片，还是违反了 Google 的服务条款？
-
@billygates 好点。从技术上讲，它违反了 ToS：“发布者不得更改或混淆 +1 按钮，并且发布者不得将 +1 按钮与广告内容相关联，例如将 +1 按钮放在广告上或广告旁边，除非获得授权由谷歌这样做。”不过我认为这是为了防止欺诈，并且可能有正当理由修改 Google+ 按钮（例如代码验证）。
考虑到按钮位于 iframe 中，并且由于跨域限制，不太可能更改它。
【讨论】：
这是我为官方 google +1 代码使用自定义图标的解决方案
+1 Button - Google+ Platform - Google Developers
<style type="text/css">
.google-plus-container {
position: absolute; /* just to position the container where i wante the button, position absoliute or relative is required*/
right: 0;
top: 0; }
.google-plus-iframe {
z-index: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.google-plus-icon {
z-index: -1;
width: 32px;
height: 20px;
background: transparent url(http://static.educations.com/masterpages/pics/icons/social/gplusbw.png) no-repeat;
position: absolute;
top: 0;
right: 0;
}
<div class="google-plus-container">
<div class="google-plus-icon"></div>
<div class="google-plus-iframe">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = { lang: 'sv' };
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
像魅力一样工作
【讨论】：
【讨论】：