Question

我想在页面上添加“google + 1”按钮，但我想使用自定义尺寸的自定义图像，最好不使用javascript，就像Facebook和Twitter一样。我现在不在乎它是否显示计数。

Answer 1

最后！找到了解决这个问题的好方法。如此简单和有效:)希望它能帮到你！

<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/

Answer 2

这是google developers page：

的官方示例

还要考虑更新了网址。

<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>

Answer 3

使用不透明度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>

Answer 4

您可以叠加图片并保留功能：

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表示歉意。

Answer 5

如果您愿意使用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;
}

如果您在全局范围内包含该功能，则可以在不使用多个冗长的内联onClick的情况下使用此类按钮。

Answer 6

我使用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中设置按钮的样式。同样，您也可以通过检查计数器气泡并找出其元素的类来设置计数器气泡的样式。

编辑，因为在iframe中调用了+1按钮，我上面描述的内容将无效。您可以做的是定位+1 div并将其不透明度设置为0，然后将其置于您自己的图像之上。要定位的div ID为#___plusone_0

Answer 7

考虑到按钮位于iframe中并且由于跨域限制，更改此操作的可能性不大。

Answer 8

这是我使用官方谷歌+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>

像魅力一样工作

Answer 9

您现在应该使用此功能：https://plus.google.com/share?url=URL_HERE

使用Google + 1按钮的自定义图片？

9 个答案: