Google ＋1（PlusOne：プラスワン）をブログへ設置する

Google PluseOne（プラスワン：＋1）ロゴマーク 最近話題によく上るようになったのが Google ＋1（PlusOne：グーグルプラスワン）です。 アメリカで del.icio.us（デリシャス） が先鞭を告げ 日本では はてなブックマーク （しばしば はてブ と略されます）がその嚆矢となったのが、 ソーシャルブックマーク サービスでインターネットで見掛けた素敵なサイトに目印をつけておき、 それを皆で共有しようというものでした。 その系統を受け継ぎ大きく世に取り上げられたのが Facebookの Like（いいね！） ボタンです。 現在ではソーシャルブックマークというよりは ソーシャルボタン と呼ばれることも多いかも知れません。 Google社も検索エンジンとの連携を考えた上で このサービスの提供に乗り出したのだと思います。

まだ始まったばかりのサービスでどのような展開になるか分かりませんが、 思ったより手軽に利用することが出来ますので 本ブログにも早速使ってみることにしました。 使い方は Google +1 をウェブサイトに表示 を開くと 次のコードをコピーして、サイトに貼り付けてください。 とある項目の下の文字入力エリアに表示されている HTMLコードをコピーして表示したい場所にソースとして貼り付けるだけです。 この時、サイズと言語が選べますので、 好きなボタンの大きさと日本語を選択するといいでしょう。

スポンサーリンク

HTMLコードは二種類に分かれているので注意して下さい。

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone size="medium"></g:plusone>
上は言語として日本語を選択し、 サイズとして中（20px）を選択した時の表示例ですが、 赤く表示したものがボタンを表示したい場所に貼るHTMLコードです。 緑の表示のHTMLコードは指定されているように <HEAD>タグと</HEAD>の間か若しくは </BODY>タグの直前に貼り付けましょう。 白い部分はHTMLコードとしての意味はありませんので、 貼り付けても貼り付けなくてもどちらでも構いません。

本記事題目にもありますようにブログに関して言えば テンプレートに上のことに注意して貼り付ければいいでしょう。 特にはまぞう（HamaZo）ブログで言えば

  1. トップページ
  2. 個別記事
  3. アーカイブ
の三種類にそれぞれ貼り付ける必要がありますね。

ところで個別記事に関しては上のコードをそのまま貼り付ければいいのですが、 トップページとアーカイブでは少々問題が発生してしまいます。 それは2010年11月13日に本ブログで記事にしました facebookいいね！ボタンの設置法はまぞう版 にあるのと同様の問題で、 トップページやアーカイブには一つ一つ独立した記事が幾つか掲載されているにも関わらず、 今のままではブログ全体に PlusOne されてしまうという問題です。

そこら辺りは流石に Googleも弁えていて +1 button API：+1 ボタンをサイトに追加：+1 を関連付ける URL と言う解説ページを設けてあります。 内容が多少専門的ですのではまぞう（HamaZo）ブログに限られますが、 具体的な例を挙げてみましょう。

はまぞう（HamaZo）ブログシステムではブログ記事それぞれの固有の URL（インターネットアドレス）を置換的に表示することが出来ます。 テンプレートの中では多くのブログ記事に対してこの手法（置換タグ）を用いて テンプレート内のこの位置にブログ記事が存在することを示しています。 それを用いれば本ブログ2011年5月31日の記事 Facebook Comments機能のHamaZoブログへの設置の最適化 にあるようにトップページに幾つもならぶ記事の内、 個別の記事を Facebook側に知らせることが出来た訳ですね。 ここでも同じ方法を利用することが出来ます。 即ち

<%BlogUrl%><%EntryPermalink%>
<%BlogUrl%>e<%EntryId%>.html
と言う置換タグを利用します。

従ってHTMLコードの内、ボタンを表示されるための赤い部分は 以下のように変更されます。

<g:plusone size="medium" href="<%BlogUrl%><%EntryPermalink%>"></g:plusone>
<g:plusone size="medium" href="<%BlogUrl%>e<%EntryId%>.html"></g:plusone>
トップページやアーカイブではボタンを表示したい位置 （それは大抵記事を幾つか表示するために繰り返し処理になっている一部でしょう） にこのHTMLコードを貼り付ければいいでしょう。
2011年7月1日修正追記
はまぞうブログシステムに於いては <%BlogUrl%>も<%EntryPermalink%>もスラッシュが出力され重複してしまい 正確なURLが出力されませんので修正しました。 取り消し線の部分が以前のコードです。

以上でホームページやブログ、特にはまぞうブログに Google社の新サービス PlusOne（プラスワン：＋1）ボタンを設置することが出来ると思います。 Google とはまぞうブログとの連携をお楽しみ下さい。 そして宜しければこの記事の ＋1（プラスワン） ボタンのクリックをお願いします… あれ？前にも一度何処かで書いたフレーズ…。

7件のコメント

  3. SNS大戦争

    いよいよGoogle+（グーグルプラス）が鳴り物入りで登場しました。検索エンジンで有名な Google社の提供するSNS（エスエヌエス：ソーシャルネットワークサービス）です。SNSはインターネットの様に開かれた空間ではなく、サービスを提供された内側の閉じた空間で知り合いと情

  4. Google Analyticsにソーシャル解析機能追加！Google+1は標準計測

    Google Analytics（グーグルアナリティクス）は検索エンジンで有名な Google社の提供するアクセス解析ツールで、本ブログにカテゴリー立てるアクセス解析でもしばしば活躍してくれています。この Google Analytics にいつの間にか（実は今年2011年7月から）新機能が追加され

  5. 新はてなブックマークボタンのはまぞうブログへの設置

    日本に於けるソーシャルボタンの走りと言えばはてなブックマークボタンで、今話題のFacebookのいいね！ボタンやGoogleの+1ボタンより以前から多くの人に愛用されてきました。特にIT系の方やネットを古くから利用している方に慣れ親しまれているソーシャルボタンです。従って

  6. Twitterボタンの設置方法～はまぞうブログ版

    ブログにソーシャルボタンは欠かせない時代、WordPressなど代表的なブログツールではプラグインで、ブログポータルではシステム側で、当たり前のように用意されています。システムお仕着せのソーシャルボタンの問題されどなかなか世の中思ったようにはいかないもの、本ブログ

  7. Twitterボタンの表示位置をデザイン的に調整してみた

    ブログにソーシャルボタンを表示するのは当たり前になりました。勿論本ブログにもソーシャルボタンを備え付けています。備え付けているソーシャルボタン本ブログに備え付けたるソーシャルボタンは以下。Twitter ツイートボタンFacebook いいねボタンGoogle+ Plus One ボタン

コメントは受け付けていません。