Havelog.aho.mu

公式Tweet Buttonを早速試した！

Posted: Updated:

公式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ドキュメントとして既に公開されて揃っています。

ベースコード

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

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

弊社製品ライクな組み込みで表現しましたが、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のラベルとして表示される言語

Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search