Use custom image for Google+1 button?

Asked 5/7, 2011 at 16:14 Answered 25/2, 2014 at 9:27

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.

Draff answered 5/7, 2011 at 16:14 Comment(1)

Make sure this doesn't violate their TOS. Changing the look of the FB like button is a violation of FB TOS. – Coburn 17/3, 2012 at 20:44

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/

Zareba answered 27/4, 2012 at 8:8 Comment(5)

There is an updated url: plus.google.com/share?url=[URL]. If you open it up as a popup it automatically resizes to fit the window, unlike the original link. – Brat 9/7, 2012 at 17:10

I wonder if with this method it is possible to specify a thumbnail image for the shared page, instead of letting Google pick one at its discretion. – Contentment 9/1, 2013 at 16:55

Just a little warning. To share is different from +1. "Add this button to content across your site to make sharing on Google+ easy. This button is perfect for content that users may want to share but not +1 (e.g. news or controversial content)." developers.google.com/+/web/share – Maund 21/3, 2013 at 2:29

It is impossible to get callback in this case. – Lustrum 17/9, 2013 at 21:3

Is it possible to load the content that opens in a modal (lightbox) ? instead in new tab/window ? – Middleclass 17/6, 2014 at 11:48

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>

Irfan answered 30/1, 2013 at 20:39 Comment(1)

skyzerblogger.blogspot.com/2014/11/… Did a blog post aobut it. Basically almost same thing. – Lightsome 15/11, 2014 at 4:34

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>

Telegenic answered 15/10, 2011 at 17:46 Comment(1)

I still had issues with strange parts of the Google button that are sometimes not visible knocking it out of alignment. – Yacketyyak 1/1, 2013 at 5:8

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.

Lora answered 8/11, 2011 at 16:15 Comment(0)

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.

Sardius answered 15/12, 2012 at 17:24 Comment(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

Instal answered 6/7, 2011 at 2:58 Comment(3)

What kind of problems are you running into? Have you tried adding !important to your style? I've successfully styled the #___plusone_0 container DIV. I didn't try positioning it, but I presume it should work. – Instal 7/7, 2011 at 17:56

Are we actually allowed to use a different image or is it against Google's ToS? – Eldridgeeldritch 17/7, 2011 at 7:31

@billygates Good point. Technically, it is against the ToS: "Publishers may not alter or obfuscate the +1 Button, and Publishers may not associate the +1 Button with advertising content, such as putting the +1 Button on or adjacent to an ad, unless authorized to do so by Google." However I think it's intended to prevent fraud and there may be legitimate reasons to modify the Google+ button (code validation for example). – Instal 17/7, 2011 at 22:24

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

Loraleeloralie answered 29/7, 2011 at 21:7 Comment(0)

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

Jigsaw answered 25/2, 2014 at 9:27 Comment(0)

You should use this now: https://plus.google.com/share?url=URL_HERE

Pastorship answered 20/9, 2012 at 19:6 Comment(0)

Recommended topics

Hot tags