Twitter のウィジェットを仕事で使うことになったんですが、Twitter API が 1.1 になったので、既存のウィジェットを使うと
来年 3 月 5 日以降サポートがされなくなる らしいのです。そこで、
本家のウィジェット も新しくできたらしいので見てみたら、カスタマイズしづらいって思ったので、その案件専用のウィジェットを作りました。でもこれを汎用的にしておくと、他の案件でも使えるかもしれないし、これを使って幸せになる人もいるかもしれないので、jQuery プラグインとして作りました。
wings1685/jquery.twitter.widget.js
【使い方】
ダウンロード後（必要であれば解凍後）に生成された「jquery.twitter.widget.min.js」をhtmlに指定します。
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.twitter.widget.min.js'></script>
また、生成された「twitter.php」をどこかのディレクトリにアップロードします。ここではサンプルとして、「/api/」にアップします。
【機能詳細】
「$(selector).twitterWidget()」でターゲットとするTwitterユーザのツイートを取得し、表示します。表示する内容やツイートを表示する速さなどはプロパティを設定することで変えられます。
プロパティ一覧
- screen_name：対象とするTwitterアカウント名
- count：最大表示件数（最大200件）
- speed：ツイートを表示していくスピード（秒）
- exclude_replies：リプライのツイートを表示するかどうか（「true」で排除、「false」で表示）
- include_rts：リツイートを表示するかどうか（trueで表示、falseで排除）
- dateformat：日付のフォーマット（「Y年M月D日 h時m分s秒」など）
- path：「twitter.php」までのパス（「./api/」など）
- src：表示する部分のソース
- src.header：ヘッダ部分
- src.body：本体部分
- src.footer：フッタ部分
- src.reply：リプライ部分
- src.retweet：リツイート部分
- src.favorite：お気に入り部分
src内で指定できる予約文字列
- $icon$：アイコン（a要素で囲まれたimg要素として書き出します）
- $screen_name$：アカウント名（a要素で囲まれて書き出します）
- $name$：表示名（a要素で囲まれて書き出します）
- $description$：プロファイル文章（Twitterの設定で「URL」を指定している場合はこれも書き出します）
- $text$：ツイート文章
- $created_at$：日付（a要素で囲まれて書き出します）
- $logo$：ロゴ（ツイッターロゴをa要素で囲まれたimg要素として書き出します）
- $reply$：リプライアクション（「src.reply」で指定していればこの内容で書き出します）
- $retweet$：リツイートアクション（「src.retweet」で指定していればこの内容で書き出します）
- $favorite$：お気に入りアクション（「src.favorite」で指定していればこの内容で書き出します）
- $action$：上記の「$reply$」「$retweet$」「$favorite$」をまとめて書き出します
必ず「$」で囲んでください。
【使用例】
ヘッダは「tw_header」、本体は「tw_body」、フッタは「tw_footer」というクラスを持ったdiv要素の中に書き出されます。
任意で指定したソースで書き出されるので、CSSでお好みのスタイルを付けてください。
html:
<div id='twitter'></div>
JavaScript:
サンプル1
ヘッダとフッタなし、リプライ等のアクションはテキスト表記、スピードが5秒ごとのサンプルです。
var option = {
screen_name: 'wings1685',
speed: 5,
dateformat: 'Y/M/D h:m:s',
path: './api/',
src: {
body: "<div class='tw'><span class='tw_text'>$text$</span> <span class='tw_date'>$created_at$</span><div>$reply$$retweet$$favorite$</div></div>",
reply: 'Re:',
retweet: 'RT',
favorite: '★'
}
};
$('#twitter').twitterWidget(option);
サンプル2
ヘッダとフッタあり、リプライ等のアクションは画像指定、スピードが10秒ごと、リプライのツイートなし、リツイートなしのサンプルです。
var option = {
screen_name: 'wings1685',
speed: 10,
exclude_replies: true,
include_rts: false,
dateformat: 'Y年M月D日 h時m分s秒',
path: './api/',
src: {
header: "<div class='clearfix'><strong>$icon$</strong><span>$screen_name$</span><span>($name$)</span></div><p>$description$</p>",
body: "<div class='tw'><span class='tw_text'>$text$</span> <span class='tw_date'>$created_at$</span><div>$action$</div></div>",
footer: "<div class='tw'>$logo$<span>Twitter</span></div>",
reply: "<img src='./reply.png' alt='' title='' />",
retweet: "<img src='./retweet.png' alt='' title='' />",
favorite: "<img src='./favorite.png' alt='' title='' />"
}
};
$('#twitter').twitterWidget(option);
【サンプルソース】
ひとつのhtmlにまとめた例をサンプルソースをとして以下に挙げます。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery.twitter.widget.js</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="./js/jquery.twitter.widget.min.js"></script>
<script>
$(function() {
var option = {
screen_name: 'wings1685',
speed: 10,
exclude_replies: true,
include_rts: false,
dateformat: 'Y年M月D日 h時m分s秒',
path: './api/',
src: {
header: "<div class='clearfix'><strong>$icon$</strong><span>$screen_name$</span><span>($name$)</span></div><p>$description$</p>",
body: "<div class='tw'><span class='tw_text'>$text$</span> <span class='tw_date'>$created_at$</span><div>$action$</div></div>",
footer: "<div class='clearfix'>$logo$<span>Twitter</span></div>",
reply: "<img src='./reply.png' alt='' title='' />",
retweet: "<img src='./retweet.png' alt='' title='' />",
favorite: "<img src='./favorite.png' alt='' title='' />"
}
};
$('#twitter').twitterWidget(option);
});
</script>
</head>
<body">
<div id="twitter"></div>
</body>
</html>
【確認環境】
jquery.twitter.widget.js は下記のブラウザでお使いいただけます。
- Chrome
- Safari
- Firefox
- Opera
- Internet Explorer 7 以降
【実行結果】
flugel.biz でご確認ください。
