58

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

4

9 に答える 9

82

ついに！この問題の良い解決策を見つけました。とてもシンプルで機能しています:)それがあなたを助けることを願っています！

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

于 2012-04-27T08:08:53.960 に答える
13

これはグーグル開発者ページからの公式の例です：

また、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>
于 2013-01-30T20:39:36.707 に答える
6

不透明度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>
于 2011-10-15T17:46:46.023 に答える
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。

于 2012-12-15T17:24:12.407 に答える
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についてお詫びします。

于 2011-11-08T16:15:32.943 に答える
3

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に設定し、それを自分の画像の上に配置することです。ターゲットとするdivIDは#___plusone_0

于 2011-07-06T02:58:12.243 に答える
3

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

于 2011-07-29T21:07:15.947 に答える
1

これは、公式のgoogle+1コードにカスタムアイコンを使用するための私のソリューションです。

+1ボタン-Google+プラットフォーム-GoogleDevelopers

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

チャームのように機能します

于 2014-02-25T09:27:04.780 に答える
0

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

于 2012-09-20T19:06:38.810 に答える