Je souhaite inclure un bouton "google +1" sur une page, mais je souhaite utiliser une image personnalisée avec une taille personnalisée pour celle-ci et, de préférence, sans JavaScript, comme avec Facebook et Twitter. Je me fiche de ne pas afficher le nombre pour le moment.
Réponses
Trop de publicités?
Finalement! J'ai trouvé une bonne solution à ce problème. Si simple et efficace :) J'espère que ça vous aide!
<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/
Ghigo
Points
459
Voici l'exemple officiel de la page des développeurs de 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>
Soroush Falahati
Points
501
utilisez l'opacité 0 pour le rendre invisible. Ensuite, utilisez l’arrière-plan pour donner l’impression 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>
Alastair
Points
1492
Si vous étiez prêt à utiliser JavaScript, cela donnerait 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, longs, en ligne onClick s.
ellin
Points
41
Vous pouvez superposer une image et conserver les fonctionnalités suivantes:
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>
Toutes mes excuses pour les fichiers CSS superflus.
