使用Google + 1button的自定义图片？
我想在页面上包含一个“google + 1”button，但是我想使用自定义大小的自定义图像，最好不使用javascript，就像使用Facebook和Twitter一样。 我不在乎现在是否不显示计数。
最后！ find一个很好的解决这个问题。 这么简单，工作:)希望它可以帮助你！
<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/
这是谷歌开发者页面的官方例子：
还要考虑到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.comhttp://img.dovov.comicons/gplus-64.png" alt="Share on Google+"/> </a>
使用不透明度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>
您可以覆盖图像并保持function：
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; }
如果您在全球范围内包含该function，则可以在整个位置使用此类button，而无需使用多个冗长的onClick -line onClick 。
我使用Chrome的元素检查器来找出要定位的元素（您也可以使用Firebug）：
+1的原始精灵在这里： https ： //ssl.gstatic.com/s2/ozhttp://img.dovov.comstars/po/Publisher/sprite.png
在我的实现中，呈现的<a>具有a a-sb-ig-e和a-sb-ig-ps-e ，其父类是a-sb-ML类的<div>
从那里，你可以简单地在你自己的CSS中设置button的样式。 同样的，你也可以通过检查它并找出它的元素的类来devise反泡。
编辑：由于在iframe中调用+1button，我上面描述的将不起作用。 你可以做的是把目标+1的div和设置其不透明度为0，然后把它放在自己的形象之上。 目标的div ID是#___plusone_0
考虑到button驻留在iframe中，并由于跨域限制，改变这是不太可能的。
这是我为自己的谷歌+1代码使用自定义图标的解决scheme
+1button – 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(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>
奇迹般有效
您现在应该使用此： https : //plus.google.com/share?url=URL_HERE
