[Google][MT] Google+1ボタンを表示させてみた

2011年6月1日、Googleの「+1（プラスワン）」ボタンをWebサイトに設置できるようになりました。

早速、本サイトにも埋め込んでみましたが、

既に設置している「はてぶ」「ツイート」ボタンに対して、どのような影響を与えるのか興味津々です。

試しに押してみてください。。。((((；ﾟДﾟ)))).。oO(ﾊﾞｸﾊﾂｼﾏｾﾝｶﾗ)

+1 ボタンとは

• ユーザーが気に入ったコンテンツを Gogole 検索でおすすめできる機能
  ※ただし、現時点では +1 情報は Google.com での英語による検索でのみ表示されます
• +1 ボタンに関するよくある質問 - ウェブマスター ツール ヘルプ

設置方法 ※Movable Type 4.22ja の例

1. 以下のリンク先にアクセスし、ボタンを表示するために必要なコードを取得する

http://www.google.com/webmasters/+1/button/index.html

2  Movable Type にアクセスし、「デザイン」 > 「テンプレートの編集」 を表示する

3. 「ブログ記事」と「ブログ記事の概要」を編集し、以下を参考に <g:plusone></g:plusone> を追加する。

...
<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <div class="asset-header"
        <h1 id="page-title" class="asset-name entry-title"><$mt:EntryTitle$></h1>
        <div class="asset-meta">
            <span class="byline">
                　　<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
                　　<g:plusone size="medium" href="<$mt:EntryPermalink$>"></g:plusone>
            </span>
        </div>
...

4. 「HTMLヘッダー」を編集し、以下を参考に plusone.js をインクルードするコードを追加する。

<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
...
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

あわせて読みたい

• "Google版いいね！"の「+1」、Webサイトへの設置が可能に - ITmedia ニュース
• WordPressに+1ボタンを設置した « コムギドットネット