web-dev-qa-db-fra.com

Utiliser une image personnalisée pour le bouton Google + 1?

Je veux inclure un bouton "google + 1" sur une page, mais je veux utiliser une image personnalisée avec une taille personnalisée pour elle et de préférence sans javascript, un peu comme c'est possible avec Facebook et Twitter. Je m'en fiche si elle n'affiche pas le nombre de comptages pour l'instant.

google-plus-one
58
peroyomas

Finalement! J'ai trouvé une bonne solution à ce problème. Si simple et si efficace :) J'espère que cela vous aidera!

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

82
Aaviya

Ceci est l'exemple officiel de la page des développeurs Google :

Considérez également que l'URL a été mise à jour.

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

utilisez l'opacité 0 pour la rendre invisible. Utilisez ensuite l'arrière-plan pour qu'il ressemble à ce que vous voulez.

<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>
6
Soroush Falahati

Si vous étiez prêt à utiliser JavaScript, cela vous donnera une expérience plus officielle .

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

Si vous incluez cette fonction globalement, vous pouvez avoir de tels boutons partout sans utiliser plusieurs onClicks longs et en ligne.

4
Alastair

Vous pouvez superposer une image et conserver les fonctionnalités:

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>

Mes excuses pour tout CSS étranger.

4
ellin

Étant donné que le bouton réside dans un iframe et en raison de restrictions interdomaines, il est peu probable de le modifier.

3
Scripty

J'ai utilisé l'inspecteur d'éléments de Chrome pour comprendre les éléments à cibler (vous pouvez également utiliser Firebug):

Le Sprite d'origine pour +1 est ici: https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/Sprite.png

Sur mon implémentation, le rendu <a> a une classe de a-sb-ig-e et a-sb-ig-ps-e et son parent est un <div> avec une classe de a-sb-ML

De là, vous pouvez simplement styliser le bouton dans votre propre CSS. De même, vous pouvez également styliser la contre-bulle en l'inspectant et en déterminant les classes de ses éléments.

Edit: puisque le bouton +1 est appelé dans un iframe, ce que j'ai décrit ci-dessus ne fonctionnera pas. Ce que vous pourriez faire à la place, c'est cibler la div +1 et définir son opacité sur 0, puis la placer au-dessus de votre propre image. L'ID div à cibler est #___plusone_0

3
Daze

Ceci est ma solution pour utiliser une icône personnalisée pour le code google +1 officiel

Bouton + 1 - Plateforme Google+ - Développeurs 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>

Fonctionne comme un charme

1
Martin Kristiansson

Vous devriez l'utiliser maintenant: https://plus.google.com/share?url=URL_HERE

0
kaha