<p class="thumb"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/07/google-plus-badge.png" alt="google-plus-badge" width="510" height="296" class="none" /></p>
<p>名前やプロフィール写真をGoogle＋のバッジとともに表示させるサービスが、軒並み使えなくなってから久しいのですが、やっとGoogleが提供するバッジにもプロフィール写真やGogole+ページのカバー写真を表示させる事ができるようになったようです。</p><!--more-->
<h3 class="header-label">Google＋ページとプロフィールの新しいバッジ</h3>
<p>「<a target="_blank" href="https://developers.google.com/+/web/badge/">Google+ バッジ</a>」は、<strong>サイト上にGoogle＋ページやプロフィールのフォローボタン（バッジ）を表示できるフォローボタンのようなもの。</strong></p>
<p>これまで顔写真やカバー写真を掲載することができませんでしたが、やっとその機能を持つことになりました。</p>

<h4 class="tips">Google＋ページのバッジ</h4>
<p>まずはGoogle+ページのバッジです。</p>
<h5 class="tips">縦向き</h5>
<div class="g-page" data-width="450" data-href="//plus.google.com/108693468703165185120" data-rel="publisher"></div>
<p>カバー写真も表示できる縦向きバッジ。幅は最小180px、最大で450pxまで指定できます。ここに掲載したのは最大の幅450pxですが、幅を全開にすると縦がかなり大きくなりますね。</p>

<h5 class="tips">横向き</h5>
<div class="g-page" data-width="450" data-href="//plus.google.com/108693468703165185120" data-layout="landscape" data-rel="publisher"></div>
<p>幅は最小で273px、最大で450pxに設定することができます。もう少し幅を狭くしたい場合には、「アイコン」を選択すると省スペースできます。</p>

<h4 class="tips">Google＋プロフィールバッジ</h4>

<h5 class="tips">縦向き</h5>
<div class="g-person" data-width="450" data-href="//plus.google.com/104198991348267889378" data-rel="author"></div>
<p>基本的にはGoogle＋ページと同じです。縦向きだとプロフィールにもカバー写真が表示されます。しかし、カバー写真を設定するときに切り抜きをしていると、切り抜いた部分よりも上のエリアも表示されるようですね。</p>

<h5 class="tips">横向き</h5>
<div class="g-person" data-width="450" data-href="//plus.google.com/104198991348267889378" data-layout="landscape" data-rel="author"></div>
<p>横にするとこうなります。</p>


<h4 class="tips">設置方法はいままでと変わらず</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/07/google-plus-badge1.png" alt="google-plus-badge1" width="500" height="403" class="alignnone size-full wp-image-26150" /><br />↑設定手順や設置方法は、これまでと変更ないようです。</p>

<p>試してみたいかたは<a target="_blank" href="https://developers.google.com/+/web/badge/">Google+ バッジ</a>へどうぞ。</p>

<p>バッジにカバー写真を表示できるってことで、やっとカバー写真を変更しました。ここに変更するモチベーションがあったか。。。</p>
