Google+ Platform

+1 ボタン

ドキュメント

+1 ボタンを追加し、ボタンのサイズや読み込み技術を変更するなど、ウェブサイトのニーズを満たすようにカスタマイズすることができます。+1 ボタンをウェブサイトに追加することで、ユーザーがコンテンツをサークルに推奨し、サイトのトラフィックを向上できるようになります。また、+1 ボタンによって、ユーザーが詳細情報を読むように誘導できるため、サイトに使う時間を延ばすこともできます。

+1 ボタンを使用するには、Google +1 ボタンのポリシーに従う必要があります。

はじめに

シンプルなボタン

+1 ボタンをページに追加するには、必要な JavaScript リソースを含め、+1 ボタン タグを追加する方法が最も簡単です。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

スクリプトは HTTPS プロトコルから読み込む必要があります。スクリプトは、制限なしでページの任意の点から含めることができます。詳細については、FAQ をご覧ください。パフォーマンスを改善するには、スクリプトを非同期に読み込む方法もあります。

+1 タグ

シンプルな +1 タグを表示するには:

<g:plusone size="tall"></g:plusone>

HTML5 対応の +1 タグを使用するには、クラス属性を g-plusone に設定し、すべてのボタン属性の接頭辞に data- を指定する方法もあります。

<div class="g-plusone" data-size="tall" ... ></div>
  

デフォルトで、含まれるスクリプトは DOM を走査し、+1 タグをボタンとして表示します。サイズの大きなページの表示時間を短縮するには、ページ内の 1 つの要素のみを走査するか、特定の要素のみを +1 ボタンとして表示する JavaScript API を使用します。

JavaScript の非同期読み込み

非同期を含めると、ウェブページで読み込みを継続しながら、ブラウザで +1 JavaScript ファイルを取得することができます。これらの要素を同時に読み込むことで、+1 ボタンの JavaScript ファイルを読み込んでもページの読み込み時間を増やさないようにすることができます。

+1 ボタンの JavaScript を非同期に含めるには、次のコードを使用します。

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

スクリプト タグ パラメータを設定する場合、次の構文を使用します。

  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };

すべての例については、をご覧ください。

設定

+1 ターゲット URL の設定

+1 した URL は、次の順で決まります。

1. ボタンの href 属性
この属性では、+1 ターゲット URL を明示的に定義します。
2. ページの <link rel="canonical" ... /> タグ
+1 ボタンの href 属性が指定されていない場合、Google ではページの正規 URL が使用されます。ページの正規 URL を定義する方法については、このヘルプ記事をご覧ください。
3. document.location.href で指定される URL。これは推奨されません。
これらの項目のいずれも指定されていない場合、Google では、DOM に見つかったページの URL が使用されます。この URL には、実際には正規 URL の一部ではないセッション ID、作成者、またはその他のパラメータが含まれる可能性があるため、+1 ボタンの href 属性を設定するか、<link rel="canonical" ...> タグをページに追加することを強くおすすめします。

スクリプト タグ パラメータ

これらのパラメータは <script /> 要素内で定義されています。また、ウェブページ全体で使用される言語とボタンの読み込みメカニズムを制御します。

キー デフォルト 説明
lang language code en-US ページの +1 ボタンに使用する言語を設定します。使用できる language code 値については、サポートされる言語コードの一覧lang の例をご覧ください。
parsetags explicit, onload onload 使用する読み込みメカニズムを設定します。
onload
ページのすべての +1 ボタンは、ページの読み込み後に自動的に表示されます。非同期読み込みの例をご覧ください。
explicit
+1 ボタンは、gapi.plusone.go または gapi.plusone.render の明示的な呼び出しでのみ表示されます。

ページ内の特定のコンテナを示す go および render の呼び出しと explicit の読み込みを併用すると、スクリプトによる DOM 全体の走査が回避されるので、ボタンの表示時間を短縮できます。gapi.plusone.gogapi.plusone.render の例をご覧ください。

+1 タグ属性

これらのパラメータは、各ボタンの設定を制御します。これらのパラメータは、+1 ボタン タグの属性=値のペアや、gapi.plusone.render の呼び出しに含める JavaScript の key:value ペアとして設定することができます。

この機能は、現在プラットフォーム プレビュー内にあります。
属性 デフォルト 説明
href URL to +1 current page URL +1 する URL を設定します。別のページに関する項目の説明の横に +1 ボタンを配置し、そのボタンで現在のページではなく参照先のページを +1 するには、この属性を設定します。gapi.plus.render を使用してこの属性を設定する場合、URL はエスケープしないでください。
size
  • small
  • medium
  • standard
  • tall
standard 表示する +1 ボタン サイズを設定します。詳細については、ボタン サイズをご覧ください。
annotation
  • none
  • bubble
  • inline
bubble ボタンの横に表示する +1 情報を設定します。
none
追加の +1 情報を表示しません。
bubble
ボタンの横に、ページを +1 したユーザーの数を画像で表示します。
inline

ページを +1 した接続ユーザーのプロフィール画像と、ページを +1 したユーザー数を表示します。

width int annotation を "inline" に設定する場合、このパラメータは、ボタンとインライン +1 情報に使用する幅をピクセル単位で設定します。幅を省略すると、ボタンとそのインライン +1 情報には 450 px が使用されます。

さまざまな幅設定で +1 情報がどのように表示されるかの例については、インライン +1 情報の幅をご覧ください。

align
  • left
  • right
left フレーム内のボタン アセットの水平配置を設定します。
expandTo comma-separated list of
  • top
  • right
  • bottom
  • left
empty list

ホバーと確認バルーンを表示する推奨の位置を、ボタンからの相対位置として設定します。バルーンの表示の邪魔になる可能性がある特定の要素(Flash オブジェクトなど)がページに含まれる場合は、このパラメータを設定します。

たとえば、top を指定すると、ボタンの上にホバーと確認バルーンが表示されます。

省略すると、表示ロジックによって最適な位置が推測されます。通常は、bottom 値を使用してボタンの下がデフォルト値になります。

callback function(jsonParam) 指定すると、ユーザーが +1 ボタンをクリックした後にこの関数が呼び出されます。コールバック関数はグローバル名前空間内に定義し、1 つのパラメータを受け取る必要があります。このパラメータは、次の構造の JSON オブジェクトです。
{
  "href": target URL,
  "state": "on"|"off"
}

+1 の場合は state プロパティを "on" に設定し、+1 を削除する場合は "off" に設定します。

onstartinteraction function(jsonParam)

指定すると、ユーザーが +1 ボタンにマウスを移動してホバー バルーンが表示されるとき、またはユーザーがページを +1 して確認バルーンが表示されるときに、この関数が呼び出されます。このコールバック関数を使用すると、バルーンが表示されるときに動画を一時停止するなど、ページを変更することができます。

この関数はグローバル名前空間内に指定し、1 つのパラメータを受け取る必要があります。このパラメータは、次の構造の JSON オブジェクトです。

{
  "id": target URL,
  "type": hover|confirm
}
onendinteraction function(jsonParam)

指定すると、ホバーまたは確認バルーンが非表示になるときに、この関数が呼び出されます。このコールバック関数を使用すると、バルーンが閉じるときに動画を再開するなど、ページを変更することができます。

この関数は 1 つのパラメータを受け取ります。これは、onstartinteraction に渡されるパラメータと同じ構造です。

recommendations true, false true +1 ホバー バルーン内におすすめを表示しない場合は、recommendationsfalse に設定します。
count true, false true 廃止: 数の表示を無効にするには、annotation="none" を使用します。

ボタン サイズ

サポートされる最小の高さよりも低い高さを指定すると、サポートされる最小の高さで表示されます。その他の高さは、リクエストした空間に合う最大サイズで、アイコンが垂直方向で中間に配置されるように、ボタンが表示されます。水平方向に使用できる空間が十分にある場合、小および標準のボタンには、そのページの +1 の合計数が表示されます。

ボタンの種類(+1 情報) 幅(ピクセル) 最大幅(px) 高さ(ピクセル)
(なし) 24 15
(バルーン) 70 15
(なし) 32 20
(バルーン) 90 20
標準(なし) 38 24
標準(バルーン) 106 24
(なし) 50 20
(バルーン) 50 60

インライン +1 情報の幅

インライン +1 情報の表示は、width パラメータの値に基づいて変わります。

  • 幅パラメータを指定しないと、+1 ボタンとそのインライン +1 情報には 450 px の幅が使用されます。
  • インライン +1 情報を表示するには、120 px 以上にする必要があります。120 px 未満の値は自動的にサイズが変更されます。推奨される最小の幅は 250 px です。
  • その他の幅については、インライン プロフィール画像およびテキストの表示は、以下の例のように定義されている幅に基づいて変わります。
+1 ボタン(www.google.com)
250 px
300 px
350 px
未指定(450 px)

+Snippet の設定

ユーザーは +1 ボタンをクリックした後に、表示されている共有バルーンを使用して Google+ へのページを共有することができます。この共有バルーンと結果の Google+ アクティビティの投稿には、プレビュー、つまり +Snippet(ページ タイトル、ページの簡単な説明、サムネイル画像など)が含まれます。これらのデータは、ターゲット URL で見つかったコンテンツから抽出されます。また、コンテンツの発行者が簡単に指定することができます。

スニペットの詳細と独自のスニペットをカスタマイズする方法については、スニペットのドキュメントをご覧ください。

JavaScript API

+1 ボタンの JavaScript では、gapi.plusone 名前空間以下に 2 つのボタン表示関数を定義します。parsetags を "explicit" に設定して自動表示を無効にする場合、これらの関数のいずれかを呼び出す必要があります。

メソッド 説明
gapi.plusone.render(
container,
parameters
)
指定したコンテナを +1 ボタン ウィジェットとして表示します。
container
+1 ボタンとして表示するコンテナ。コンテナの ID(文字列)または DOM 要素自体を指定します。
parameters
キー=値のペアとして +1 タグ属性を含むオブジェクト。たとえば、{"size": "tall", "callback": myCallbackFunction} です。
gapi.plusone.go(
opt_container
)
指定したコンテナ内のすべての +1 タグとクラスを表示します。パフォーマンスの理由などで parsetagsexplicit に設定した場合にのみ、この関数を使用する必要があります。
opt_container
表示する +1 ボタン タグを含むコンテナ。コンテナの ID(文字列)または DOM 要素自体を指定します。opt_container パラメータを省略すると、ページのすべての +1 タグが表示されます。

基本的なページ

<html>
  <head>
    <title>+1 demo: Basic page</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

明示的な読み込み

<html>
  <head>
    <title>+1 demo: Explicit load</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>
  </body>
</html>

明示的な表示

<html>
  <head>
    <title>+1 Demo: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>

非同期読み込み

<html>
  <head>
    <title>+1 Demo: Async load</title>
    <link rel="canonical" href="http://www.example.com" />
  </head>
  <body>
    <g:plusone></g:plusone>

    <script type="text/javascript">
      window.___gcfg = {
        lang: 'en-US'
      };

      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
  </body>
</html>

よくある質問

次の FAQ では、技術的な考慮事項と実装の詳細について説明します。その他の参考情報については、一般的な FAQプラットフォームのディスカッション フォーラムをご覧ください。

1 ページに、それぞれ複数の URL を +1 する複数のボタンを配置することはできますか?
はい。+1 タグ パラメータの指定どおりに href 属性を使用して、+1 する URL を指定します。
+1 ボタンはページのどこに配置すればよいですか?
お客様のページとそのユーザーのことを一番よく把握しているのはお客様です。お客様が一番効果的だと思う場所にボタンを配置することをおすすめします。一般的に、スクロールせずに見える範囲、ページ タイトルの近く、共有リンクの近くが適しています。また、記事や話の最後や冒頭に +1 ボタンを配置する方法も効果的です。
ページ内の <script> タグの位置によって、遅延の影響はありますか?
いいえ。<script> タグの配置による大きな遅延の影響はありません。ただし、ドキュメントの一番下、body の終了タグの直前にこのタグを配置すると、ページの読み込み速度が改善されることがあります。
+1 タグの前に <script> タグを挿入する必要がありますか?
いいえ。<script> タグはページ内の任意の場所に挿入することができます。
JavaScript API セクションで別の <script> タグがいずれかのメソッドを呼び出す前に、<script> タグを挿入する必要がありますか?
はい。いずれかのJavaScript API メソッドを使用する場合、ページ内で <script> の挿入位置の後にメソッドを配置する必要があります。
限定公開の URL を +1 するとどうなりますか?
ボタンは機能しません。+1 は公開 URL の場合にのみ機能します。
href 属性を使用する必要はありますか?
href 属性は必須ではありません。詳細については、ターゲット URL の +1をご覧ください。
すべてのページに rel="canonical" タグを配置する必要がありますか?
必須ではありませんが、おすすめします。href 属性が設定されていない場合、ページ上の次の rel="canonical" タグが検索されます。見つからない場合は、document.location.href が使用されます。この最終値は、URL に含まれる状態変数の場合が多いため、不適切な結果になる可能性があります。rel="canonical" タグを使用することで、+1 する適切な URL を指定することができます。
+1 ボタンがあるページを表示するときにセキュリティの警告が表示されるユーザーがいます。表示されないようにするには、どうすればよいですか?
+1 ボタン コードには、Google のサーバーにあるスクリプトが必要です。https:// 経由で読み込まれるページに http:// 経由でスクリプトを含めると、このエラーが表示されることがあります。スクリプトを含めるには、次のように https:// を使用することをおすすめします。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
ウェブページに https:// を使用し、ページ上のいずれかのアセットを http:// 経由で呼び出した場合、エラーが表示されるブラウザや検証ツールがあります。サイトが https:// 経由でページを提供する場合、それらのページの +1 ボタン コードにも https:// を使用する必要があります(実際のところ、http:// 経由でのみページを提供する場合でも、すべてのページのボタン コードに https:// を使用することをおすすめします)。
+1 ボタンと Google アナリティクス間のアクセス状況を追跡できますか?
はい。最新バージョンの Google アナリティクスは、すべての +1 ボタンのアクセス状況を自動的に追跡します。既存の追跡コードを変更する必要はありません。ソーシャル関連のメトリクスとレポートは、[訪問者] > [ソーシャル] で表示できます。ヘルプ センター ページのソーシャル プラグイン アナリティクスの概要をご覧ください。
ホバー バルーンが Adobe Flash コンテンツで隠れるのはなぜですか?

デフォルトで Flash コンテンツは、すべての HTML コンテンツの中で最前面に表示されます。Flash コンテンツの背面に表示されるコンテンツには、ホバー バルーンや +1 ボタンで表示されるコンテンツなどがあります。そのため、+1 ボタン コンテンツの一部がページの Adobe Flash 要素で隠れることがあります。

解決方法は状況によって異なります。ページ上にある Flash オブジェクトの HTML ソース コードを編集できる場合は、オブジェクト要素に 1 つのプロパティを追加するだけです。ただし、Flash 要素がスクリプトでページに追加されている場合(一般的な例としては広告)、より高度な解決方法が必要です。

まず、ページ上の Flash オブジェクトの HTML ソース コードにアクセス権を持っている場合、wmode パラメータを 'transparent' に設定する必要があります。この設定には、パラメータを Flash オブジェクト要素に追加します。

<object ... >
<param name="wmode" value="transparent">
... </object>

Flash 要素がスクリプトで追加されているその他の場合でも、この問題を解決できる可能性があります。JavaScript を使用して、上記のパラメータをプログラムで追加することができます。この技術の一例として FlashHeed があります。FlashHeed は、Flash が iframe 内に埋め込まれていなければ機能します。Flash 要素が iframe 内にある場合、Flash コンテンツまたは +1 ボタンの位置を変更して重なりを防ぐ必要があります。

iframe 内に +1 ボタン コードを配置しています。一部のウェブブラウザで共有ダイアログの一部が表示されないのはなぜですか?

+1 ボタンをクリックすると、共有ダイアログが表示されます。このダイアログは、+1 ボタンよりも大幅に大きいサイズです。そのため、共有ダイアログよりも小さな iframe 内に +1 ボタン コードを配置すると、共有ダイアログの一部が表示されず、ユーザーがアクセスできなくなることがあります。

この問題に対処するには、+1 ソース コードをページに直接含めることをおすすめします。+1 ボタンをラップするために iframe を使用する必要がある場合は、共有ダイアログを表示できる十分な空間を確保します。

ボタンの配置を right に設定しましたが、ボタンがページの右揃えで表示されません。
align="right" を設定すると、ボタン アセットはフレーム内で右揃えに表示されます。一方、ボタンをページの右揃えで表示するには、ボタン コンテナの配置を設定する必要があります。次に例を示します。
<div style="float: right">
  <g:plusone align="right"></g:plusone>
</div>
+1 ホバー内のおすすめが自分のウェブサイトに適していません。削除するにはどうすればよいですか?
製品を改善し、お客様のウェブサイトのエクスペリエンスを改善するために、おすすめがお客様のウェブサイトに適していない理由をお知らせください。おすすめを無効にする必要がある場合は、+1 タグの recommendations 属性を false に設定できます。
どのウェブブラウザがサポートされますか?
すべての Google+ プラグインは、Google+ ウェブ インターフェースと同じウェブブラウザをサポートしています。
  • Windows: Chrome、Firefox 3.6 以降、Internet Explorer 8 以降
  • Linux: Chrome、Firefox 3.6 以降
  • Mac: Chrome、Firefox 3.6 以降、Safari 4 以降

言語コード

言語
アフリカーンス語 af
アムハラ語 am
アラビア語 ar
バスク語 eu
ベンガル語 bn
ブルガリア語 bg
カタロニア語 ca
中国語(香港) zh-HK
中国語(簡体) zh-CN
中国語(繁体) zh-TW
クロアチア語 hr
チェコ語 cs
デンマーク語 da
オランダ語 nl
英語(イギリス) en-GB
英語(アメリカ) en-US
エストニア語 et
フィリピン語 fil
フィンランド語 fi
フランス語 fr
フランス語(カナダ) fr-CA
言語
ガリシア語 gl
ドイツ語 de
ギリシャ語 el
グジャラト語 gu
ヘブライ語 iw
ヒンディー語 hi
ハンガリー語 hu
アイスランド語 is
インドネシア語 id
イタリア語 it
日本語 ja
カンナダ語 kn
韓国語 ko
ラトビア語 lv
リトアニア語 lt
マレー語 ms
マレーシア語 ml
マラーティー語 mr
ノルウェー語 no
ペルシャ語 fa
ポーランド語 pl
言語
ポルトガル語(ブラジル) pt-BR
ポルトガル語(ポルトガル) pt-PT
ルーマニア語 ro
ロシア語 ru
セルビア語 sr
スロバキア語 sk
スロベニア語 sl
スペイン語 es
スペイン語(ラテン アメリカ) es-419
スワヒリ語 sw
スウェーデン語 sv
タミル語 ta
テルグ語 te
タイ語 th
トルコ語 tr
ウクライナ語 uk
ウルドゥー語 ur
ベトナム語 vi
ズールー語 zu

認証が必要です

この操作には Google+ でのログインが必要です。

ログインしています...

この操作には Google デベロッパーに対する許可が必要です。