Twitter 公式ツイートボタン設置方法

2010/8/14 40344hit
このエントリーをはてなブックマークに追加

Twitterの公式ツイートボタンが発表されたので、
APIについて詳細をまとめてみた。

設置例

先日TOPSYの設置方法を解説したけれど
公式ならではの機能として、ツイート数をリアルタイムに更新してくれたり、おすすめフォロワーを指定できる。
手っ取り早く作るには
ツイートボタンツールでウィザード的にボタンを作ってくれるけれど
自分で細かくカスタマイズすることも出来る

設置種別


JavaScriptを呼び出す方法、iframeを使う方法、リンクで実装する方法の3つがある

iframeで呼び出す場合


ボタン表示部分に次のタグを埋め込む
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html"
style="width:130px; height:50px;"></iframe>

iframeなら一つのタグで実装できるので手っ取り早い
ブラウザの対応も殆ど問題ないレベルになっているし、すぐ付けたい場合おすすめ

Scriptで呼び出す場合


スクリプト呼び出し部に次のタグを埋め込む
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

ボタン表示部分に次のタグを埋め込む
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

普通はこれがメインか?
JavaScriptが無効な環境でもリンク実装時のように動く。

リンクで実装する場合


ボタン表示部分に次のタグを埋め込む
<a href="http://twitter.com/share">Tweet</a>

普通にリンクで設置するだけでもツイート可能
ただのテキストなのでツイート数などは表示されない。

プロパティの優先順位


プロパティは優先度の低い順に
デフォルトから取得
ヘッダのlinkタグから取得
Aタグのattributeから取得
AタグのURLから取得の4通りがある。

プロパティの種類


URL


ツイートするURLを指定する。URLはT.COで自動的に短縮される
デフォルトはHTTP Referrerから開いているページが自動的に取得される
ヘッダのlinkタグで指定
<link rel="canonical" href="http://firespeed.org/diary2/read/read.php?diary=kenz-1318"/>

attributeから指定
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://firespeed.org/diary2/read/read.php?diary=kenz-1318">Tweet</a>

URLから指定
<a href="http://twitter.com/share?url=http%3a%2f%2ffirespeed%2eorg%2fdiary2%2fread%2fread%2ephp%3fdiary%3dkenz%2d1318">Tweet</a>

via


ツイートに表示するアカウントを指定する
項目を指定するとvia に続けてアカウントが表示される。
デフォルトは無し
ヘッダのlinkタグで指定
<link href="http://twitter.com/kenz_firespeed" rel="me" />

attributeから指定
<a href="http://twitter.com/share" class="twitter-share-button" data-via="kenz_firespeed">Tweet</a>

URLから指定
<a href="http://twitter.com/share?via=kenz_firespeed">Tweet</a>

Tweet text


ツイートに表示するテキストを指定する
デフォルトはTitleタグの値が自動的に取得される
attributeから指定
<a href="http://twitter.com/share" class="twitter-share-button"	data-text="Firespeed">Tweet</a>

URLから指定
<a href="http://twitter.com/share?text=firespeed">Tweet</a>

Recommended accounts


フォローを推奨するアカウントを指定する
コロンでつなげて2アカウントまで指定可能
デフォルトは無し
attributeから指定
<a href="http://twitter.com/share" class="twitter-share-button" data-related="kenz_firespeed:kensei_kick">Tweet</a>

URLから指定
<a href="http://twitter.com/share?via=kenz_firespeed:kensei_kick">Tweet</a>

Count box position


ツイート数を表示する場所を指定する
デフォルトはhorizontalでボタンの横に小さく
verticalを指定するとボタン上に大きく
noneを指定するとツイート数を表示しない
attributeから指定
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>

URLから指定
<a href="http://twitter.com/share?count=vertical">Tweet</a>

horizontal

vertical

none

Language


リンク先の言語を指定する
デフォルトはen(英語)
jp(日本語)
fr(フランス語)
de(ドイツ語)
es(スペイン語)から選択する
attributeから指定
<a href="http://twitter.com/share" class="twitter-share-button" data-lang="jp">Tweet</a>

URLから指定
<a href="http://twitter.com/share?lang=jp">Tweet</a>


ということで、早速日記のボタンも公式に変えてみました

追記:
twitter側の実装が間に合っていないのか、ツイートされた内容一覧が正しく検索できない状態みたいです。
ツイート一覧を正しく表示するにはとりあえずTOPSYを使った方が良いみたい

前:iPhone4がやってきた 次:音楽が異常にいいゲームのYouTube一覧 全64曲

関連キーワード

[IT]

コメントを投稿する

名前URI
コメント