Use custom image for Google+1 button?
Google Plus-OneGoogle Plus-One Problem Overview
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.
Google Plus-One Solutions
Solution 1 - Google Plus-One
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/
Solution 2 - Google Plus-One
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>
Solution 3 - Google Plus-One
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>
Solution 4 - Google Plus-One
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.
Solution 5 - Google Plus-One
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.
Solution 6 - Google Plus-One
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
Solution 7 - Google Plus-One
Considering the button resides in an iframe and due to cross-domain restrictions, altering this is unlikely.
Solution 8 - Google Plus-One
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
Solution 9 - Google Plus-One
You should use this now: https://plus.google.com/share?url=URL_HERE