当前位置： 文江博客话题详情

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

发布于 2024-11-18 16:56:23 字数 108 浏览 8 评论 0原文

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

原文

I want to include a "google+1" button on a page, yet I want to use a custom image with a custom size for it and preferably without javascript, much like is possible to do with Facebook and Twitter. I don't care if it don't show the count number for now.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

待天淡蓝洁白时 2024-11-25 16:56:23

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

<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-加号按钮/

Finally! Found a nice solution to this problem. So simple and working :) Hope it helps you!

<a href="https://plus.google.com/share?url=ADD_YOUR_URL" >
    <img src="path_to_your_image" alt="Google+" title="Google+"/>
</a>

Source: http://notesofgenius.com/how-develop-custom-google-plus-button/

回复 原文
怎樣才叫好 2024-11-25 16:56:23

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

另请注意网址已更新。

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

This is the official example from the google developers page:

Also consider that the URL was updated.

<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>
回复 原文
神也荒唐 2024-11-25 16:56:23

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

use opacity 0 to just make it invisible. Then use background for making it looks like what you want.

<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>
回复 原文
女皇必胜 2024-11-25 16:56:23

您可以覆盖图像并保留功能：

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

You can overlay an image and keep functionality:

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>

My apologies for any extraneous css.

回复 原文
ま柒月 2024-11-25 16:56:23

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

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.

回复 原文
記憶穿過時間隧道 2024-11-25 16:56:23

我使用 Chrome 的元素检查器来找出要定位的元素（您也可以使用 Firebug）：

+1 的原始精灵在这里： https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png

在我的实现中，渲染的 具有 a-sb-ig-e 和 a-sb-ig-ps-e 类及其父类是一个带有 a-sb-ML 类的

从那里，您可以简单地在自己的 CSS 中设置按钮的样式。同样，您还可以通过检查计数器气泡并找出其元素的类来设置计数器气泡的样式。

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

I used Chrome's element inspector to figure out the elements to target (you could also use Firebug):

The original sprite for +1 is here: https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png

On my implementation, the rendered <a> has a classes of a-sb-ig-e and a-sb-ig-ps-e and its parent is a <div> with a class of a-sb-ML

From there, you could simply style the button within your own CSS. Similarly, you can also style the counter bubble by inspecting it and figuring out its element's classes.

Edit: since the +1 button is called within an iframe, what I described above won't work. What you could do instead is target the +1 div and set its opacity to 0, then place it on top of your own image. The div ID to target is #___plusone_0

回复 原文
街道布景 2024-11-25 16:56:23

考虑到该按钮驻留在 iframe 中并且由于跨域限制，因此不太可能更改它。

Considering the button resides in an iframe and due to cross-domain restrictions, altering this is unlikely.

回复 原文
剪不断理还乱 2024-11-25 16:56:23

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

+1 按钮 - Google+平台 - Google 开发者

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

就像魅力一样工作

This is my solution for using a custom icon for the official google +1 code

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

Works like a charm

回复 原文
~没有更多了~

关于作者

━╋う一瞬間旳綻放

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

╰ゝ天使的微笑

文章 0 评论 0

少女净妖师

文章 0 评论 0

朱洁

文章 0 评论 0

觉浅

文章 0 评论 0

滥情空心

文章 0 评论 0

hl1314520

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文