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

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

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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.

Ответ 5

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

Ответ 6

Я использовал инспектор элементов 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 div и установить его непрозрачность на 0, а затем поместить его поверх своего собственного изображения. Идентификатор div для цели - #___plusone_0

Ответ 7

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

Ответ 8

Это мое решение для использования пользовательского значка для официального кода 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>

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

Ответ 9

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