Google +1ボタン
本稿では、バルーンタイプのGoogle +1ボタンコードの取得と、JavaScriptファイル（JSファイル）の作成、HTML5ドキュメントへの記述例を掲載しています。
Google +1ボタンのコードの取得。
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では、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>
詳細オプションのダイナミックにチェックを入れた場合。同じ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>