ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』
Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。
jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。
先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロードできます。
ダウンロードしてスクリプトを解凍したら、適宜サーバーにアップロードしたら下準備は終わりです。
最も簡単な使い方としては、スクリプトのパスとTwitter名を指定した上でタイムラインを載せたいページの適当な部分（<body>内）に以下の2行を挿入するだけです。
（1行目のスクリプトタグは<head>内に置くこともできます）
<script type="text/javascript" src="path/chirp.min.js"></script>
<script>Chirp('username')</script>
すると、『<script>Chirp('username')</script>』の部分にタイムラインの要素が出力されます。
あとはお好きなようにCSSでスタイリングしてね、といった感じです。
上記の例は最も簡単なデフォルト値で出力される例ですが、必要に合わせオプション設定することでいろいろなカスタマイズが可能です。
詳しくはドキュメント参照して頂くとして、例えば以下のように設定すると次のように出力されます。
<script>Chirp({
user:'kconf',
max:5,
retweets: false,
replies: false,
templates: {
base: '<ul class="chirp">{{tweets}}</ul>',
tweet: '<li><p><a href="http://twitter.com/{{user.screen_name}}" title="{{user.name}} — {{user.description}}"><img src="{{user.profile_image_url}}"></a> {{html}}</p><span class="meta"><time><a href="http://twitter.com/{{user.screen_name}}/statuses/{{id_str}}">{{time_ago}}</a></time> — via <a href="http://twitter.com/{{user.screen_name}}" title="{{user.name}} — {{user.description}}">{{user.name}}</a></span></li>'
}
})</script>
上の例では表示件数やリツイート/返信の表示有無、また『templates』オプションを使用して出力するHTMLタグを直接指定しています。
さて、ツイートの表示スクリプトはたくさん存在しますが簡単でカスタマイズの融通が利くという点でポイントが高く、特にシンプルなものを求めているユーザーにお勧めのスクリプトです。
Chirp.js
追記
ユーザータイムライン以外にサーチが使えるといいなぁと思っていたところ、Twitterを覗いてみたらそれらしき隠しオプションがあるとのこと。
こんな感じで『search』オプションを設定してやればOKです。
<script>Chirp({
search: encodeURIComponent('#アプリ'),
max:10,
cacheExpire:0,
templates: {
base: '<ul class="chirp">{{tweets}}</ul>',
tweet: '<li><p><a href="http://twitter.com/{{from_user}}" title="{{from_user_name}}"><img src="{{profile_image_url}}"></a> {{html}}</p><span class="meta"><time><a href="http://twitter.com/{{user.screen_name}}/statuses/{{id_str}}">{{time_ago}}</a></time> — via <a href="http://twitter.com/{{from_user}}">@{{from_user}}</a></span></li>'
}
})</script>
これを使って例えばこの記事のパーマリンクなんかを指定しておけば、この記事のツイートのトラックバックをそのページ上に簡単に載せることもできますね。
あとはCMSのテンプレートで『search』オプションに毎回その記事のパーマリンクを出力してやれば、特別なスクリプトやプラグインなしにこういったことが実際に可能になると思います。
- 作者ツイートのリンクにあった例ではescape()関数が使われていましたが、どうもこれだとキーワードが日本語の場合にコケるのでencodeURIComponent()を使った方が良さそうです。
> さゆりさん
「表示されなくなる」とのことですが、最初は表示されていたのに消えるのか、最初から表示されないのか分りませんが、このスクリプトは自動的に再読み込みされる仕様ではないので前者ではないと仮定して、まず、設定オプションのパラメータに適切な値を設定しないと何も表示されません。また、ユーザー名やキーワードに該当がない場合にも何も表示されないはずです。
デフォルトでは何のエラーメッセージも吐かないようになっているのでコールバックが返ってこない場合には結果は空白のままということになります。
また、言うまでもありませんがtemplatesで設定したHTMLタグが間違っていたり、その中に組み込んでいる各種変数に誤りがあっても正常に表示されないと思います。
まずはこの辺をご確認の上、それでも解決しない場合には、デバッグ用に用意されている『error』オプションを使ってどこでつまずいているのか原因を調べてみるという手もあります。
（『error』オプションの使い方は同梱されている『example.html』を参照して下さい）
それでも解決しない場合や某かのバグと判断できる場合には、この際作者に方に直接問い合わせて頂くのが一番かと思います。
あまり頼りにならなくてすみません...。
ユーザー名以外は特にいじっておらず、templatesで設定したHTMLタグも間違ってはいません。exampleでは間違いなく表示されるのですが、自サイトに表示させようとするとうまく行きません。
スクリプトのパスも合っています。
自サイトでもChirp('username')
だと問題なく表示されるので…
スタイルシート自体このサイト様の設定をコピー状態でも表示されないのです…
そちらの状態を再現することができないので、正直言って判りかねます。
表示できるケースとできないケースで何が違うのか、そちらで追求して頂くしかないと思います。
ただ、上でおっしゃったことで気になることと言えば、ローカルで表示できてサーバ上でできないというのであれば、環境に起因する可能性があるということ。例えば文字コードとか。
また、『Chirp('username')』という書き方は各オプションを指定する場合に用いられる『Chirp({user:'username'})』の簡易な書き方ですが、後者の書き方で表示されるかどうかによっても問題の傾向が絞られてきそうだと思いますが...。
アドバイスできることといえばこんなところです。
twigとテンプレートが競合してしまうんですが対処法わかりますか？
{{}}が使えなくて。
わかりません。
質問です。
twitter投稿時の時間を、取得して記載したいのですがどのように知れば宜しいでしょうか？？
例
2013-01-08 投稿内容
と日付を記載したいです。
ご教示の程宜しくお願いします。
早速ですが、上記「出力サンプル #2」でいうところの『time_ago』変数を『created_at』にすることで標準時間のフォーマットで出力できることを確認しましたが、そのままではご希望のような形にはなりません。
他に希望に近いような変数が存在するのか、あるいは某かの関数を使って希望の日付フォーマットに整形すべきなのかについてはご自身でお調べ下さい。
templates以下を入れるとツイート自体が表示されなくなるのですが、何かいい方法はありませんか？