web-dev-qa-db-ja.com

Google + 1ボタンにカスタム画像を使用しますか？

ページに「google + 1」ボタンを追加したいのですが、FacebookやTwitterでできることのように、カスタムサイズで、できればjavascriptなしのカスタム画像を使用したいです。今のところカウント数が表示されなくても構いません。

google-plus-one
58
peroyomas

最後に！この問題に対する素晴らしい解決策を見つけました。とてもシンプルで機能的:)

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

これは 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
Ghigo

不透明度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
Soroush Falahati

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

その関数をグローバルに含めると、複数の長いインラインonClicksを使用せずに、そのようなボタンをいたるところに配置できます。

4
Alastair

画像をオーバーレイして機能を維持できます。

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についてはおologiesび申し上げます。

4
ellin

ボタンがiframeにあることを考慮し、クロスドメインの制限により、これを変更することはほとんどありません。

3
Scripty

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 IDは#___plusone_0

3
Daze

これは、公式の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>

魔法のように働く

1
Martin Kristiansson

これを今すぐ使用する必要があります： https://plus.google.com/share?url=URL_HERE

0
kaha