Google「+1」ボタンを設置した

Hinemosu

できるポケット Google+ グーグルプラス スマートに使いこなす基本&活用ワザ 70

当ブログHinemosuに、Googleの「+1」(プラスワン plusone)ボタンを設置しました。

本文上の ↑↑↑ ここらへん ↑↑↑ に「g+1」と書かれたボタンあるはずなので、みんな試しに押してみると良いよ!

Google「+1」ボタンの設置メモ

Google「+1」ボタンの設置は簡単でした。

+1 Your Website – Google」にアクセスし、自分のサイトにあった設定を選べば、適切な設置用コードが生成されるようになっています。

ちなみにウチのブログ設定はこんな感じ。
Google+1ボタン設定

で、生成されたコードはこんな感じ。

<!-- このタグを head タグ内、または body 終了タグの直前に挿入してください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<div class="g-plusone" data-size="medium"></div>

生成されたコードに設置方法の説明も含まれているので、説明に従ってコードを挿入すれば作業は完了です。

ボタンの高さ合わせ

でまぁ設置は簡単だったけど、他のソーシャルボタンと高さ(水平位置)が合わなくて大変だった!

結論から言うと、g+1ボタンは自身が持つインライン・スタイルシートでiframeのmarginを0にしてるけど、その他のボタンはmarginを弄っていないので、その違いで水平方向の高さがズレてたみたい。

対策として、ソーシャル系ボタンのiframeは全て margin:0 としました。

原因が分かるまで地味に大変だったよ。