58

我想在页面上包含一个“google+1”按钮，但我想使用具有自定义大小的自定义图像，最好不使用 javascript，就像 Facebook 和 Twitter 一样。我不在乎它现在是否不显示计数。

4

9 回答 9

82

最后！找到了一个很好的解决这个问题的方法。如此简单且有效:)希望它对您有所帮助！

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

于 2012-04-27T08:08:53.960 回答
13

这是来自谷歌开发者页面的官方示例：

还要考虑 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>
于 2013-01-30T20:39:36.707 回答
6

使用 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>
于 2011-10-15T17:46:46.023 回答
4

If you were willing to use JavaScript, this will give a more official experience.

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

If you include that function globally, you can have such buttons all over the place without using multiple, lengthy, in-line onClicks.

于 2012-12-15T17:24:12.407 回答
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，我深表歉意。

于 2011-11-08T16:15:32.943 回答
3

考虑到按钮位于 iframe 中并且由于跨域限制，更改它是不可能的。

于 2011-07-29T21:07:15.947 回答
3

我使用 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

于 2011-07-06T02:58:12.243 回答
1

这是我为官方 google +1 代码使用自定义图标的解决方案

+1 按钮 - Google+ 平台 - 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>

奇迹般有效

于 2014-02-25T09:27:04.780 回答
0

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

于 2012-09-20T19:06:38.810 回答