New Google Plus Logo
Photo: AJC1

Facebookページ (旧 Facebookファンページ) のように、Google+ ページを作成する方法を先日紹介しました。


ブログの Google+ ページを作りサイトの情報を拡げる | C-through the Mac


Google+ ページにも、Facebook の Like Box のように Google+ ページの情報を広めるボタンがあります、 その名も Google+ バッジ です!


Google+ バッジを設定し、そのフォローボタンをクリックしてもらえると、Google+ バッジと連携した Google+ ページに投稿された記事が、フォローしているユーザーのホーム画面に表示されます

gplus_badge01

そのため、一度 Google+ バッジでフォローしてもらったユーザーには継続的に投稿した記事が表示されるので、記事を読んでもらえることができるわけです。


Google+ ユーザーのみなさんにもウェブサイトの情報を広げるにはもってこいですね。 それでは、以下に Google+ バッジの HTMLコードを取得する方法を記載します。


スポンサーリンク

Google+ バッジの HTMLコードを取得する

まず、Google+ アカウントでログインしておきます。ログインしておくと、次のバッジを生成するときの Google+ user に Google+ ページがプルダウン形式で出てきます。


Google+ Badge の HTMLコード生成サイト https://developers.google.com/+/plugins/badge/ に移動します。

すると、サイトの左に設定項目、右側に生成された Google+ バッジと HTMLコードが表示されます。

gplus_badge02

左側の実際の設定を見てみます。


Google+ user

Google+ アカウントにログインしていると、それに紐づく Google+ ページまたはユーザーの名前が出てきます。ここで目的の Google+ ページを選択します。
gplus_badge04 


Features

Google+ バッジのタイプを指定します。Icon は g+のアイコンのみ、Small badge は Icon とページの情報、Standard badge は Small badge に加えてさらにページをフォローしているユーザーの人数やアイコンが表示されます。
 gplus_badge05 gplus_badge06

一番 Facebook の Like Box に近いのは Standard badge タイプですね。シンプルにいきたいのであれば、Small badge も良いですね。


Language

Google+ バッジの表示言語を選択します。日本語のウェブサイトに設置するのであれば、Japanese ー 日本語 で問題ありません。


*** Advanced options も見てみます ***


Width

Google+ バッジの表示幅を設定します。

これが結構重要で、連携する Google+ ページの名前がちょっと長めの場合、この幅を広げるとページ名がバッジの前に表示されるようになります。
gplus_badge07
 

ウェブサイトに設置する場所の制限にもよりますが、できれば調整して Google+ ページの名前を入れて最適な幅を決めたいですね!


Asynchronous、HTML5 valid syntax、parse tags の動作は、Google +1 ボタン の設置で解説した Advanced options の内容と同じ ですので、そちらをご覧ください。


以上で設定は完了です。設定を元に右側に生成された HTMLコードをコピペしてブログなどのウェブサイトに貼付けましょう!


このブログサイトの Google+ でのフォローも良かったらぜひ!

↓↓↓↓↓↓↓↓
スポンサーリンク