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>