Google+ 「+1 ボタン」の設置方法

まず https://developers.google.com/+/plugins/+1button/ に移動します。

ここに表示されている項目をそれぞれウェブサイトに合う設定を選択し、最後に右側に表示されている HTMLコードをコピペしてウェブサイトに貼付けます。

それぞれの項目について見てみます。

Size

「+1 ボタン」のサイズを決めます。左から、Small, Mediaum, Standard があり、さらに横幅のある Tall の4種類があります。

ウェブサイトの特徴や、他のボタンと並べる場合はサイズの統一感を出すためにサイズを合わせることなどを考慮して選べば良いでしょう。特に理由がなければ Medium を選び、利用後に必要であれば変更するで良いと思います。

Annotation

「+1 ボタン」をクリックした人数など、アノテーションをボタンのどの位置に表示させるかを指定します。

inlineは右側一列に、bubbleは吹き出し形式で、そして noneは表示をさせません。bubble がコンパクトで見やすく良く使われています。

Width

Annotationで inlineを指定したとき、「+1 ボタン」自体のサイズとアノテーションを含む表示の幅を指定します。

Google の推奨は、250px となっています。表示が省略されても良い場合は、120px が設定できる　最小値ですのでこの値でも良いでしょう。

Language

「+1 ボタン」のアノテーションをどの言語で表示させるか指定します。

日本語のウェブサイトに設置するのであれば、「Japanese ー 日本語」を選びましょう。

** Advanced Option の設定も一通り見てみます。**

Asynchronous

「+1 ボタン」の表示を、非同期で表示させるかどうかを指定します。

少し解説すると、「+1 ボタン」は、ボタンを表示させる処理に javascript を使用しています。ウェブページである HTMLは、HTMLコードを上から順番に読んで解析を行い Safariや Chromeなどのブラウザへ表示させます。

javascriptは結構重たい処理になるため、ブラウザで表示させるときに最初に javascriptも処理すると表示まで時間がかかってしまう場合があります。

そうはならないよう、javascriptの処理が終了しなくてもウェブページを表示させる (非同期処理) のがこのオプションです。

特に理由がなければ、チェックを付けたままで良いでしょう。

HTML5 valid syntax

生成されるコードを HTML5対応にするかどうかです。Internet Explorer(IE) は HTML5 対応が遅れていると言われていますが、確認する限り IE8/9 でも表示と動作を確認できたので、特に理由がなければチェックを付けたままで良いでしょう。

Parse tags

「+1 ボタン」表示の動作を決めます。

onload だとウェブページが読み込まれた後に自動的に表示され、explicit にすると特定の部分が読み込まれたときに表示させたり、ボタンやリンク先をクリックしたときに表示させたりといった動作にすることができます。

単純にウェブページに表示させることが目的であれば、デフォルトの Default(on load) で十分です。

JS callback function

「+1 ボタン」がクリックされたときに呼び出される javascript function を定義できます。

デフォルトの動作で問題なければ、何も指定する必要はありません。

URL to +1

特定の URL を指定して「+1 ボタン」を作成します。

「複数のページにまたがっているけど、同じ関連情報を発信しているからひとつの +1 として情報を伝えたい」というようなときに作成し、それぞれのウェブページに同じ「+1 ボタン」コードを設置します。

例えば、製品のような紹介サイトで 概要 / 特徴 / 価格 をそれぞれ別々のウェブページに掲載しているが、どれも同じ「+1 ボタン」にしてクリックした人数を合わせたり同じ情報を発信したいときに利用できます。

ブログのような各記事が異なる内容の場合は、同じにする理由があまりないので、何も指定しなくて良いです。

設定は以上です！　Advanced options を含めると説明が長くなりましたが、ブログの各ページに設置するのであればそこは気にせず、Size, Annotation, Language だけ設定すれば十分です！

あとは、この設定を指定して右側に生成された HTMLコードを表示させたい位置にコピペしましょう！

この記事が参考になったという方は、ぜひこのページの「+1 ボタン」のクリックをどうぞ！ (便乗 汗)

↓↓↓↓↓↓↓↓