ニコ動風にツイートを表示するjQueryプラグイン tweetDance.js

TwitterAPIのバージョンアップに伴い、tweetDance.jsの設置には専用のPHPスクリプトの設置が必要になりました。こちらの記事をご参照ください。
tweetDance.jsをバージョンアップ

上のサンプルのように、画像にツイッターの検索結果をニコ動風に表示するjQueryプラグインを公開しました。ツイートをクリックでツイッターに、画像には別にリンク指定できます。IE8,FF,Chrome,safariで動作確認済。

新着コメントが表示されるので、普通の画像よりもグッとアピール度が高いと思います。反面、騒がしい印象もするので使い所を選びます。盛り上がっている感の演出に向いてそうです。

上のロックスミスは発売されたばかりゲームで旬ワードなので、コメント鮮度も高いですが、例えば「コマンドー」などは思うように結果が出ない場合があります。そんな時は検索ワードを工夫します。

スポンサーリンク

使い方

通常のjQueryプラグインと同様に jquery.tweetdance.js をダウンロードして読み込みます。CSSや画像はありません。

jquery.tweetdance.js

画像や検索ワードの指定をaタグに記述します。実例を御覧ください。


ロックスミス
<a href="http://www.ubisoft.co.jp/rocksmith/" target="_blank" class="tweetdance" tweet="9" width="570" height="320" img="http://plusblog.jp/wp-content/uploads/2012/11/rocksmith-570x320.jpg" q="ロックスミス+-http"></a>
コマンドー
<a href="http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%BC" target="_blank" class="tweetdance" tweet="8" width="289" height="360" img="http://plusblog.jp/wp-content/uploads/2012/11/commando.jpg" q="コマンドー+OR+シュワルツネッガー" fsize="18"></a>
初音ミク
<a href="http://www.crypton.co.jp/" target="_blank" class="tweetdance" tweet="20" width="462" height="710" img="http://plusblog.jp/wp-content/uploads/2012/11/miku.jpg" q="初音ミク+-RT" lheight="25"></a>
動作に必ず必要なアトリビュート
class=”tweetdance”名前は何でもOK
tweet=”9″表示するツイート数を指定します。この数字から文字サイズfont-sizeと行間line-heightを計算していますが、フォントによっては思うように表示されない場合があります。その場合はオプションのfsizeとlheightで直接微調整してください。
width=”570″画像 X
height=”320″画像 Y
img=”http://plusblog.jp/wp-content/uploads/2012/11/rocksmith-570×320.jpg”画像の場所
q=”ロックスミス+-http”ツイッターの検索ワード
オプション
fsize=”18″font-size 直接指定
lheight=”25″line-height 直接指定

あとは呼び出せば表示されます。

$(function(){
    $('.tweetdance').tweetDance();
});

ツイッターの検索ワード

Twitter検索の演算子で使えるテクニックは全て使えます。スペースは+にして下さい。

例えば、

中日+ドラゴンズ中日 と ドラゴンズを含む ツイート
中日+OR+ドラゴンズ中日 もしくは ドラゴンズを含む ツイート
中日+-ドラゴンズ中日を含んで ドラゴンズは含まない ツイート
#testハッシュタグ検索
from:plustakk特定ユーザーだけ

サンプルでは、

  • ロックスミス+-http
  • コマンドー+OR+シュワルツネッガー
  • 初音ミク+-RT

としており、-httpはリンク、-RTはリツイートを表示しません。

ページを開いた時に検索が行われるので、1年後にはロックスミスのツイート数は減っているかもしれません。そんな時の為に、旬ワード以外もORで追加しておくと良いでしょう。

バグってるぞゴラァヽ(`Д´)ノとか、こんな機能ないのー(・∀・)っ/凵⌒☆などありましたらお知らせ下さい。

 

 

スポンサーリンク