Google +1ボタン

本稿では、バルーンタイプのGoogle +1ボタンコードの取得と、JavaScriptファイル(JSファイル)の作成、HTML5ドキュメントへの記述例を掲載しています。


Google +1ボタンのコードの取得。


Google+ Platform for Web 450px×289pxに縮小して表示しています。

Google+ Platform for Webへアクセスします。


サイズ
tallを選択します。
+1情報
バルーンを選択します。
言語
日本語を選択します。(デフォルトの位置)
詳細オプション
ダイナミックにチェックを入れると、JavaScriptが出現します。
タグを解析
ページ読み込み時(デフォルト)を選択します。
JSコールバック関数
空欄でOKです。
+1ボタンの対象とするURL
空欄でOKです。+1ボタンを設置したページのURLは自動で取得してくれます。

Google +1ボタンのコードから、JavaScriptファイルを作成


Google +1ボタンコード)

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="tall"></div>
<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

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

詳細オプションのダイナミックにチェックを入れると、JavaScriptのコードが出現しますので、上記のコードの赤色の文字列の箇所をエディタに記述(コピペ)し、拡張子がjsのJSファイルを作成し、Google +1ボタンを設置するHTMLドキュメントで指定している文字コードと同じ形式で保存します。例)example.js

window.___gcfg = {lang: 'ja'};

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

Google +1ボタンを表示するHTML5ドキュメントにコードを記述


HTML5ドキュメントのGoogle +1ボタンを表示したい場所に、ボタンを表示するコードと、そのうしろに、JSファイルを参照するコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript" src="example.js"></script>

</body>
</html>

上記のHTML5ドキュメント

なお、HTML5では、script要素のtype="text/javascript"の記述の有無はどちらでも良いです。以前のバージョンのドキュメントに設置する場合を考えて一応、書いておきました。

以下、HTMLドキュメント外のJavaScriptファイルを使用せず、同一のHTMLドキュメントへのGoogle +1ボタンコードを記述する場合の記述例です。


詳細オプションのダイナミックにチェックを入れない場合。

Google +1ボタンコード)

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="tall"></div>

HTML5ドキュメント)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>

<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

</head>
<body>

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

</body>
</html>

上記のHTML5ドキュメント


詳細オプションのダイナミックにチェックを入れた場合。同じHTMLドキュメントにコードを記述。

Google +1ボタンコード)

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="tall"></div>
<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

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

HTML5ドキュメント)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div class="g-plusone" data-size="tall"></div>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

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

</body>
</html>

上記のHTML5ドキュメント