[Blogger]Twitterツイートボタンの設置手順

黄金週間、訳あって巣ごもり暮らしを送っている男がお送りする、日本で人気の3大ソーシャルサービスのボタン設置記録。
第2回はTwitterのツイートボタンです。
それ以外のボタンの設置手順は以下参照。

ちなみに完成品の画像は以下。実物は記事フッタ（投稿日時とかコメントとか）を参照。

１．HTMLタグの作成

まず以下ページにアクセス。

ツイートボタン

「①ボタンを選択してください…」の部分でいろいろと入力してHTMLコードを作成しますが、「ツイート内テキスト」「URL」には以下の値を入力してください。

ツイート内テキスト：data:post.title
URL：data:post.url

当ブログと同じく「ボタン」で『水平方向にカウント数を表示』を選択した場合、以下のようなコードとなる筈。

<a
 href="http://twitter.com/share"
 class="twitter-share-button"
 data-url="data:post.url"
 data-text="data:post.title"
 data-count="horizontal"
 data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

はてなブックマークの時と同じく、このままだとタイトル・URLは上記の値で固定となってしまい、記事毎の値が設定されません。よって、記事毎の値がセットされるように、タグを少し修正する必要があります。

２．「data-url」「data-text」属性の左に「expr:」と記述

以下のように。

data-url="data:post.url"
→expr:data-url="data:post.url"
data-text="data:post.title"
→expr:data-text="data:post.title"

３．完成したタグをテンプレートに記述

ここまでの手順でタグは以下のようになっている筈です。

<a
 href="http://twitter.com/share"
 class="twitter-share-button"
 expr:data-url="data:post.url"
 expr:data-text="data:post.title"
 data-count="horizontal"
 data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。
記事本文の後ろとか、当ブログと同じく記事フッタ辺りがあるあるか。
※尚、テンプレートに貼り付けて保存すると、属性値を囲っている「"」は「'」に変換されます。動作に支障は無いので気になさらぬよう（というかむしろ「'」じゃないと支障がある）。

（例）記事本文の後ろ

「<data:post.body/>」ってのが記事本文に置き換わる部分です。

（例）記事フッタ

「<div class='post-footer'>」で囲まれた箇所が記事フッタです。

右揃えにしたけりゃ

<div>タグで囲むなどしてください。

僕らはみんな歪ている

2011年5月5日木曜日