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

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

9 58
google-plus-one

9 ответов:

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

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

82

Это официальный пример от страница разработчиков 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>
13

использовать непрозрачность 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>
6

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

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.

4

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

4

я использовал инспектор элементов 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. Аналогично, вы также можете стилизовать пузырь счетчика, проверив его и выяснив классы его элементов.

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

3

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

3

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

+1 Кнопка-Google + Платформа-Разработчики 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>

работает

1

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

0