公式Tweet Buttonを早速試した!

公式Tweet Buttonがリリースされてた


公式Tweet Button ( つぶやいて共有するぞボタン )


盆休みにタイムラインを眺めていたら、たまたま目にとまったこの記事! ちょっと前から話題になってたやつですね。思ったよりリリースが早いです。ちょうどブログをいじってる最中だったので、コレ幸いとレッツトライ。

Tweet Buttonは、これまでサードパーティとして、Topsyや、TweetMemeが提供していたような、「このブログ記事(URL)をツイートする」的なボタンを指します。

まずは簡単に作って体験してみよう

公式で提供されてるTweetButton作成フォーム ( Twitter / Tweet Button )



上に示したURLへ行くと、Tweet Buttonを簡単に作成するためのフォームが表示されます。適当にやっても作成できますが、一応簡単な説明を画像に載せてあります。

完成品はこんな感じ。

ソースコードもこんな感じ。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="http://havelog.ayumusato.com"
  data-text="Twitter Buttonのテスト〜。 #havelog"
  data-count="vertical"
  data-via="ahomu"
  data-related="ablogcms:a-blog cms公式アカウント"
  data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

今までもウチでは、Anywhereを利用してTweet Boxを設置してましたが、今回のTweet Buttonのほうが、OAuth認証も求めずログインのみなので良い感じ。ブログのコメント欄用途だと、Tweet boxは大がかりすぎる。

追記メモ

  • 2010-08-13 12:13 Topsyのカウントより少ないことが多い。同一人物の、重複ツイートを削っているというよりも、短縮URLの解析力が足りてないような?
  • 2010-08-13 12:24 昔のエントリーのカウントを押しても、search.twitter.com 側の保管期限の都合で、何も見つからずに意味がないこともチラホラ。

ブログに組み込んでみる

利用するための情報も、公式APIドキュメントとして既に公開されて揃っています。

ベースコード

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="http://havelog.ayumusato.com"
  data-text="Twitter Buttonのテスト〜。 #havelog"
  data-count="vertical"
  data-via="ahomu"
  data-related="ablogcms:a-blog cms公式アカウント"
  data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

再掲になりますが、さきほど生成されたコードを見ると、ブログ用途で繰り返し表示するときに変数で出力すべきは、4行目と5行目のURLとデフォルトテキスト。そして、最終行のscript要素の読み込みは1回で十分なので、削除してhead要素内とかに避けておく。

変数に置き換え ( a-blog cmsの場合 )

<!-- BEGIN entry:loop -->
<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="{permalink}"
  data-text="見たよ! #havelog 「{title}」"
  data-count="vertical"
  data-via="ahomu"
  data-related="ablogcms:a-blog cms公式アカウント"
  data-lang="ja">Tweet</a>
<!-- END entry:loop -->

弊社製品ライクな組み込みで表現しましたが、WodrpressでもMovable Typeでも何でも同じで、繰り返し処理的に入るべきところに入るべき変数が出力されればok。

参考URLまとめ

仕様的なメモ書き

基本の動作

基本的に、http://twitter.com/shareへのアクセスがトリガーになって、Tweet Buttonが動作しています。簡単フォームで選んだような、見た目の部分は、http://platform.twitter.com/widgets.jsを読み込んだ際に、動的にゴニョゴニョされて変更される。

Tweet Buttonの動作に、前述のwidgets.jsは必須ではない。よって、Tweet Buttonは只の、http://twitter.com/shareへのリンクとして存在させることで、見た目も自由にCSS等でカスタマイズできる。

<!-- 1. 最もプレーンなただのリンク -->
<a href="http://twitter.com/share">Tweet</a>

<!-- 2. プレーンなリンクの時のパラメータは、URL上にクエリーで乗せる -->
<a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com&amp;via=twitterapi">Tweet</a>

<!-- 3. widgets.js利用時のパラメータは、data属性で指定 -->
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="http://dev.twitter.com/pages/tweet_button"
      data-via="twitterapi"
      data-text="Checking out this page about Tweet Buttons"
      data-related="anywhere:The Javascript API"
      data-count="vertical">Tweet</a>
</div>

ちなみに、クエリーが一番優先順位が高いので、widgets.js利用時でも同じようにURLにパラメーターを乗せられるらしい。カスタマイズの作例は、前述のドキュメントに、たくさん載ってる。

投稿されるURLの決定順序

  1. リクエストに、urlパラメータがあれば、それを採用
  2. 上記が無く、呼び出し元のa要素に、data-url属性の指定があれば、それを採用
  3. 上記が無く、呼び出し元のhead要素に、rel="cannonical"の指定があれば、それを採用
  4. 上記すべてがない場合は、呼び出し元のURL(おそらくlocation.hrefと同意)を採用

パラメータについて

リクエストURLに乗せるときは、urlですが、a要素の属性として乗せるときは、data-urlとして表記。本来のパラメータ名の接頭辞としてdata-が付く感じ。

url
投稿したいURL
via
誰宛て(via)か、ユーザーIDで指定する(ブログパーツ的に使うなら大抵は自分の名前)
text
テキスト部分のデフォルト状態
related
関連するユーザーを指定(書式はコロン区切りで、"ユーザーID:説明")
lang
Twitter Buttonのラベルとして表示される言語