Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON

Twitterのツイートをウェブサイトやブログに表示するには、ウィジェットを貼り付ける方法がありますが、JavaScript × JSON を使ってTwitterのツイートを表示する方法も。

こんな感じに。

    やり方は、Twitterのユーザー名と表示件数 (count) を設定した

    http://twitter.com/statuses/user_timeline/ユーザー名.json?
    callback=twitterCallback2&count=5
    

    を含む以下の三行のソースを貼り付けるだけ。

    <ul id="twitter_update_list"></ul>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザー名.json?
    callback=twitterCallback2&count=5"></script>
    

    JavaScriptファイルをダウンロードして表示項目を変えたり、スタイルシートでデザインできたりとカスタマイズも自在にできる。

    プログラムのコードに色を付けるライブラリ「google-code-prettify」を導入

    HTMLページに表示したプログラムのコードに色を付けるライブラリ「google-code-prettify」を導入。サンプルをみると、CやJavaをはじめ、HTML、XML、CSS、Javascript、Ruby、PHP、Perl、Python、SQLなどCやBash、XMLライクの言語に対応。

    導入方法は、こちらを参考に。

    まず、ソースコードをダウンロードして、prettify.css と prettify.js をftpでサーバにアップロード。

    そして、アップロードしたライブラリをサーバのパスにあわせてHTMLのHEAD要素内に記述。

    <link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
    

    BODY要素にも。

    <body onload="prettyPrint()">
    

    以下はIEと相性が悪いようだ。何かとバッティングしてエラーをはき出す。(追記2009-11-11)

    または、イベントリスナーで呼び出す場合。

    <script type="text/javascript">
    try{
    window.addEventListener("load",prettyPrint,false);
    }catch(e){
    // IE
    window.attachEvent("onload",prettyPrint);
    }
    </script>
    

    あるいは、直接呼び出しで。

    <script type="text/javascript">
    prettyPrint();
    </script>
    

    使い方はいたって簡単。precodeタグにclass名「prettyprint」を付けるだけで色を付けてくれる。

    早速、色分けてくれた。

    最近の投稿

    カテゴリー

    アーカイブ