Использовать пользовательское изображение для кнопки Google + 1? - PullRequest
Новая
       2

Использовать пользовательское изображение для кнопки Google + 1?

58 голосов
/ 05 июля 2011

Я хочу добавить кнопку «google + 1» на страницу, но я хочу использовать для нее собственное изображение с нестандартным размером и желательно без javascript, очень похоже на то, что можно сделать с Facebook и Twitter. Мне все равно, пока он не покажет счетное число.

Ответы [ 9 ]

82 голосов
/ 27 апреля 2012

Наконец-то! Нашел хорошее решение этой проблемы. Так просто и работает :) Надеюсь, это поможет вам! 

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

13 голосов
/ 31 января 2013

Это официальный пример со страницы разработчиков Google :

Также учтите, что 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.com/images/icons/gplus-64.png" alt="Share on Google+"/>
</a>
6 голосов
/ 15 октября 2011

используйте непрозрачность 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>
4 голосов
/ 15 декабря 2012

Если вы готовы использовать 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;
}

Если вы включите эту функцию глобально, вы можете использовать такие кнопки повсюду без использования нескольких длинных встроенных onClick с.

4 голосов
/ 08 ноября 2011

Вы можете наложить изображение и сохранить функциональность:

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.

3 голосов
/ 30 июля 2011

Учитывая, что кнопка находится в iframe и из-за междоменных ограничений, изменить это маловероятно.

3 голосов
/ 06 июля 2011

Я использовал инспектор элементов Chrome, чтобы выяснить, какие элементы должны быть нацелены (вы также можете использовать Firebug):

Оригинальный спрайт для +1 здесь: https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite.png

В моей реализациирендеринг <a> имеет классы a-sb-ig-e и a-sb-ig-ps-e, а его родительский элемент - <div> с классом a-sb-ML

Оттуда вы можете просто стилизовать кнопку в своем собственномCSS.Точно так же вы можете также стилизовать встречный пузырь, осмотрев его и выяснив классы его элемента.

Редактировать: , так как кнопка +1 вызывается в iframe, то, что я описал выше, выиграло 'т работа.Вместо этого вы можете нацелить +1 делитель и установить его непрозрачность на 0, а затем поместить его поверх вашего собственного изображения.Идентификатор div для цели: #___plusone_0

1 голос
/ 25 февраля 2014

Это мое решение для использования пользовательского значка для официального кода Google +1

+ 1 кнопка - Платформа 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(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>

Работает как шарм

0 голосов
/ 20 сентября 2012

Вы должны использовать это сейчас: https://plus.google.com/share?url=URL_HERE

...