MinorProbrem» timeline http://hmlab.info/minor グダグダ日記 Wed, 27 Apr 2011 21:48:54 +0000 ja hourly 1 http://wordpress.org/?v=3.1 Twitterのつぶやきを表示するjavascript＠は表示しませんよ改 http://hmlab.info/minor/2008/05/twitterjavascript/ http://hmlab.info/minor/2008/05/twitterjavascript/#comments Sat, 24 May 2008 17:10:18 +0000 Hex68 http://hmlab.info/wordpress/2008/05/twitterjavascript.html 以前書いたTwitterのつぶやきを表示するスクリプトをちょっといじりました。（つぶやきをフェードアウトさせたりとかめんどくさかった処理的に重くなりそうでしたので、さっくり明滅するように変更しました。

 

 

mytwitterfeed.js

 

まず上のファイルを同名で保存します。

 

んで、

 

横長表示用CSS

 

こちらも同じく保存。

 

必要なファイルは以上。

 

後はサイト中のつぶやきを表示したい場所に

 

<link href=”mytwitterfeed160x190.css” type=”text/css” rel=”stylesheet” /><script src=”mytwitterfeed.js” type=”text/javascript”></script></p> <div id=”twitter_wrap”> <div class=”newsslidercontent” id=”newsslider”></div> </div> <script src=”http://twitter.com/statuses/user_timeline/yourname.json?callback=viewTwitter&count=10″ type=”text/javascript”></script>

上記の記述を追加してください。

＊yournameの部分をあなたのtwitterでの名前（僕だとhex68)に変更してください。

MyTwitterFeed

JQueryをインクルードしたはいいが、まったく使わないことに気がついた。
HEX68 said 6 days ago

すると、こんな感じになりますよ。

 

＊ .cssファイルとmytwitterfeed.jsが別のディレクトリに設置している場合、rel=の部分はcssのurlを正確に記述してください。

 

 

CSSを変更することで背景色とか文字色、配置をある程度までは変更できるようになっています。

 

例えば

縦長表示用CSS

こちらを使うと

 

 

こんな感じになります。

CSS自体はすごく単純ですので変更は簡単だと思います。

 

 

あと、追加する記述の最終行（あなたのTwitterネームを記述した行）のuser_timelineの部分をfriends_timelineと変更すればタイムラインが表示されます。

例：

<script type=”text/javascript” src=”http://twitter.com/statuses/friends_timeline/hex68.json?callback=viewTwitter&count=10″ ></script>

 

 

あと、前回と同じく＠マークがつぶやき中に入っている場合、誰かへのメッセージと判断して表示しないようになっています。

 

 

ライブラリとかは一切使ってないので、お好きにいじってください。

あー、やっぱjsonp使えるとお気軽にできていいわー。

 

 

 

]]> http://hmlab.info/minor/2008/05/twitterjavascript/feed/ 0