• かちびと.net

    Twitterのつぶやきを、3行のコードでWebサイトやブログに表示させる方法をご紹介。APIの取得や、プログラミングの知識も不要です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Twitterのつぶやきを、3行のコードでWebサイトやブログに表示させる

スポンサーリンク

お問い合わせを頂いたのでついでに
ご紹介。Twitterのウィジェットのような
ものをお探しだったようですが、現在の
公式のウィジェットではなく、色々とcss
でカスタマイズ出来るようにしたいとい
うご希望でした。Twitterの投稿を表示す
るだけなら3行もあれば実装出来ます。

タイトルはやや釣りに近いです。知らない方向け。

Webクリエイターボックスさんで表示されてるような感じにしたい、というご希望でした。なぜ僕に質問して頂いたかは謎ですがお答えさせて頂きます。

ウィジェットやjQuery、RSSを使って~等、色々と方法はありますが、自分で表示もデザインしたい、シンプルでいいというのであれば3行もあれば表示させる事が出来ます。

APIキーを取得して~等の面倒な手順も要りません。

statuses/user_timeline/ユーザーのアカウントID.jsonの形式のjsonを取得できなくなった為、この方法は使えなくなりました(´・ω・`)
ドキュメントをご覧下さい。
GET statuses/user_timeline

コード

「コード」と言うか、ただのマークアップなんですけど・・

<ul id="twitter_update_list"><li>読み込んでいます</li></ul>

まず上記のようにマークアップして、</body>の直前に以下のjsを読み込みます。

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザーのアカウントID.json?callback=twitterCallback2&count=10"></script>

count=10の数字が表示する最新のつぶやきの数です。<ul id=”twitter_update_list”>の要素内につぶやきが読み込まれます。

見たほうが早いのでデモ作りました。ソースもご覧になってみて下さい。

サンプル

cssで少しだけスタイル整えてますが表示そのものに必要なのは3行であることが確認出来たと思います。

どうして表示できるの?

これは旧Twitterが公式に配布していたウィジェットのソースから余計なものを外した、っていうだけです。

現在は以下のようなページに誘導しています。

ここでウィジェットを作成するんですが、以前は以下のようなウィジェットでした。

以前のウィジェット


このウィジェット作成ページへのリンクは現在公式サイトのヘルプページに見当たらないのですが、まだページ自体は生きてるんですね。
リダイレクト処理がはじまりますた(´・ω・`)


ここでHTMLソースでウィジェットを生成できるのですが、表示するのに必要なコードのみに絞ったのが上記の3行、というわけです。さほど使う機会もないかもですけどご紹介してみました。

URL :
TRB :

Comments & Trackbacks (38)

  1. たかはし のり

    そっか w
    ul の間に “読み込んでいます” ってli 入れといた方がいいですね w
    私空にしてあるから、HTML Validateで突っ込まれました … ul の間が空です!って w
    シロさん、ありがとー!

    • シロ

      すぐにロードされるので要らないっちゃ要らないすけどダミーテキスト入れておいた方が親切かもっすねw

      いえいえー(´ω`)

  2. BRAVEMUSIC

    これスゴイデス!ツカイマス!アリガトウゴザイマス!

    ちなみに①
    アイコン出したりとかのカスタマイズの方はどのように。。?

    ちなみに②
    携帯サイトにも表示させたいのですが、その場合はどのように。。?

    • シロ

      ぜひ使ってみてくださいー!

      ちなみに①
      アイコン出したりとかのカスタマイズの方はどのように。。?

      pushメソッドにimgファイルを加えれば表示されると思いますー。jsファイルの中身を見ればだいたい想像付くと思います!

      ちなみに②
      携帯サイトにも表示させたいのですが、その場合はどのように。。?

      あれ?表示されませんか?

  3. 鈴木

    はじめまして。こちらの記事、大変参考になりました。
    ご質問なのですが、こちらの方法をつかって、ユーザーのツイートではなくて、
    「#○○○○」のような、特定のハッシュタグがついた発言だけを呼び出して
    表示させたい場合、どのように表記すればいいのでしょうか・・?

    • シロ

      はじめまして。ご参考いただき光栄です:)

      こちらの方法をつかって、ユーザーのツイートではなくて、
      「#○○○○」のような、特定のハッシュタグがついた発言だけを呼び出して
      表示させたい場合、どのように表記すればいいのでしょうか・・?

      こちらの方法ではご希望の実装は難しいです。

      ハッシュタグの検索結果はRSSを吐き出すので(例:#japanの場合 http://search.twitter.com/search.atom?q=%23japan )このRSSを読み込んでjs等で実装させるか、検索ウィジェットを使います。

  4. JohnBush

    Hello! Very good job(this site)! Thank you man.

    • シロ

      thx a lot :)

  5. mami

    はじめまして!こちらの記事、大変参考になりました。

    質問なのですが、最新のツイート内容が公式RTだった場合、
    表示の部分が真っ白になってしまうのですが、
    公式RTの内容は表示されないのでしょうか?
    もし何か対策などありましたら教えてください。

    また、表示するツイートの文字数を制限する方法はありますか?

    • シロ

      こんにちは。少しでも参考になれば幸いです:)

      質問なのですが、最新のツイート内容が公式RTだった場合、
      表示の部分が真っ白になってしまうのですが、
      公式RTの内容は表示されないのでしょうか?
      もし何か対策などありましたら教えてください。

      この方法は、Twitterに公式RTが実装される前のものですので、対応していないかも知れません。良く調べてはいませんが、APIのドキュメントを確認してみるといいかも知れません。

      また、表示するツイートの文字数を制限する方法はありますか?

      cssで可能なようです:)

  6. TTSパソコンスクールたかはし

    ケイタイ用のページにツイートを表示する方法はないかと
    検索したところ、こちらにたどり着きました。
    見事、表示することができました。

    しかもたった3行というのがすばらしい!
    ありがとうございました!

    • シロ

      こんにちは。

      見事、表示することができました。
      しかもたった3行というのがすばらしい!

      おお、実装できてなによりです:D いえいえー!

  7. flow_t

    公式のウィジェットはやたら複雑なコードで気持ちが悪いので極限までシンプルにしたこのコードはとてもメンテナンスしやすくていいです。
    公開ありがとうおございます。
    一般的にこういう技術的な面の質問はWeb manaさんを始め、対応されないケースが大半なのでこのエントリはとても貴重です。

    • シロ

      こんにちは。コメント有難う御座います:)

      いえいえー!少しでもお役に立てたら良かったです!

  8. koba

    はじめまして。いつも参考にさせていただいております。

    今回こちらのコードを使って、自分のサイトにTwitterの最新つぶやきを表示させてみたのですが、
    ツイートが読み込まれるときと読み込まれないときがあるようです。

    割合としては7:3くらいで読み込まれない時の方が多いかなという感覚で、
    li内に記述した「読み込んでいます」という文字だけが表示されてしまいます。

    いろいろ調べてみたのですが、自分では解決にたどり着けず、、、
    ご教示いただけると助かります。

    どうぞよろしくお願いいたします。

    • シロ

      こんにちは。コメント有難う御座います。

      今回こちらのコードを使って、自分のサイトにTwitterの最新つぶやきを表示させてみたのですが、
      ツイートが読み込まれるときと読み込まれないときがあるようです。
      割合としては7:3くらいで読み込まれない時の方が多いかなという感覚で、
      li内に記述した「読み込んでいます」という文字だけが表示されてしまいます。

      全く表示されない場合はスクリプトや書き方に問題があるのですが、表示されたりされなかったり、というのは本家Twitter側の問題の可能性が高いかと思います。

      サーバーがダウンするとAPIも利用できないのでツイートは表示されません。
      その為、「読み込んでいます」という文字が上書きされるはずが、上書きされずに表示されてしまっている、という訳です。

      また、Twitterが落ちていない場合でもkobaさんのサイトで他の要素の読み込みが遅いといつまでも表示されない場合も有ります。

      7:3は結構頻度が高いので、後者の「読み込みのスピード」を検証してみてください。もう少し改善されるかもしれません。

      ただし、APIを利用する以上、Twitter側に依存する事になるので「10:0」になる事は無いので、そこはご了承頂ければと思います。この3行のコードに限らず、ツイートを表示する全ての方法に共通します。

      • koba

        早々のご回答ありがとうございます。

        私のページでツイートが表示されないタイミングでは、シロさんが作成されているサンプルページでもやはり同様に表示されていないようですので、やはりTwitter側の問題なのかと思います。

        >APIを利用する以上、Twitter側に依存する事になるので「10:0」になる事は無い

        APIを用いるなら、サービスを提供する側に依存していることを念頭に、サイト制作に活用していかなければいけないということですね。

        分かりやすくご説明いただきありがとうございます。
        今後ともよろしくお願いいたします。

        • シロ

          ご確認できたようで何よりです。

          そうですね、Twitterに限らず、APIはそのサービスの一部を借りる形になるのでそのサービスのサーバーに依存します。

          ただ、TwitterはRSSを吐いてくれるので、このRSSを読み込んで、自分の借りているデータベースに保存し、そこから取り出せばTwitterが落ちていても過去のツイートは表示させることが可能です。

          工夫次第でもありますので機会が有りましたら調べてみてください。

          今後とも宜しくお願い致します!

  9. さかな

    初めまして。
    公式のウィジェットよりもカスタマイズしやすいものはないか、
    と探していた時にとてもわかりやすいコードを公開してくださっていたので助かりました!

    それでなのですが、サイトの同じページに一人分でなく、もう一人分のアカウントを表示しようとしたら、片方のタイムラインしか表示されないんです。
    何か解決方法がありましたら教えていただけると助かるのですが・・・。

    • シロ

      始めまして、こんにちは!

      それでなのですが、サイトの同じページに一人分でなく、もう一人分のアカウントを表示しようとしたら、片方のタイムラインしか表示されないんです。

      まず、仕組みから話させて頂きますね。

      この方法はTwitterで公開しているJSファイルを外部ファイルとして読み込みます。
      http://twitter.com/javascripts/blogger.js
      上記にアクセスして12行目辺りに以下のような記述が確認出来ると思います。

      document.getElementById(‘twitter_update_list’).innerHTML

      これはid=”twitter_update_list”という要素内にツイートを読み込むためのコードです。ですので、この記事の方法ではid=”twitter_update_list”という要素以外の場所には読み込めません。

      つまり、同じページ内に複数読み込む場合は先ほどのblogger.js内を書き換える必要があるわけです。

      解決法は「blogger.js内を1ページ内で複数アカウントのツイートを読み込めるように書き換える」です。

      参考になれば幸いです!

      • さかな

        素早い回答ありがとうございます。
        blogger.jsをダウンロードして書き換えるところまではなんとか理解できました(汗)
        javascript自体触れるのが初めてなので、正直どのようなコードに書き換えるのか全くわかりません。
        サポート外でしたら構わないのですが、もし教えていただけるようであればお願いします・・・。

        • シロ

          こんにちは。JSが始めてとの事でしたので追加方法が分かるように書きました。

          http://jsfiddle.net/kachibito/XMxJf/3/

          //で始まる行はコメントアウトです。ユーザーの追加方法を書いておきましたので、表示させたいユーザーが増えたらコードを付けたして下さい。JSはファイル化しても大丈夫です。

          サポート外でしたら構わないのですが、もし教えていただけるようであればお願いします・・・。

          今回は特別という事で・・基本的にはWeb制作でご飯食べてますのでご理解頂ければ幸いです。

          • さかな

            わざわざすいませんでした、ありがとうございました!

          • シロ

            とんでもないですー!

  10. スイートクローゼット

    いつも勉強させて頂いております。
    Wordpressだとプラグインでラクラクだけど、
    EC-CUBEでTwitter埋め込むのはどうしたら…?
    と悩んでいたらたどり着きました。
    ものすごく簡単に実装が実現できました。ありがとうございます!

    • シロ

      はじめまして、こんにちは!

      少しでもお役に立てて何よりですー!

  11. あきこ

    こんにちは。
    このページに記事に載っていたコードを利用させていただいている者です。
    シロウト質問で申し訳ないのですが・・・

    今日自分のホームページを見ると、「読み込んでいます」と表示されたまま
    いつまで経ってもツイートが表示されないという状態になってしまいました。
    アカウントのID部分の他はいじっておらず、昨日までは普通に動作していました。

    うっかりどこかコードを書き換えてしまったのではと思い、コピペし直しましたが、けっきょく表示されず。
    ブラウザ(chrome)の調子が悪いのかなと思ってIEでも読み込んでみましたが、やっぱり表示されませんでした。
    おまけに「サンプル」まで表示されない始末です。

    となると私のパソコンがどこかおかしな事に・・・?
    何か考えうる原因や解決策などは御座いますでしょうか?

    • あきこ

      先ほどの者です。既に同じような質問と返答がありましたね・・・
      失礼致しました。気長に待ってみます。

      • シロ

        あきこさんこんにちは。

        他コメントを確認して頂けたようで何よりです。仰るとおり、TwitterがAPIを管理しているサーバー等が落ちたりするとツイートも表示出来ません。

        暫く経ってからご確認頂き、表示されない場合はブラウザのキャッシュを削除する等もお試し下さいー!

    • けんたろう

      私も同じつい最近、あきこさんと同じ頃から全く表示されなくなり、検索して辿りつきました。引き続き調べてみてるとこです><

      • シロ

        こんばんは。
        すみません、気になって調べてみたのですが、jsonデータを返さなくなっているようです。

        https://twitter.com/statuses/user_timeline/kachibito.json?callback=twitterCallback2&count=10

        「権限がない」との事で、この方法は使えなくなってしまいました。

        こちらのjsonなら取得可能です。
        http://api.twitter.com/1/statuses/user_timeline.json/ほげほげ

        ドキュメントはこちらになります。
        https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

        • syota

          横からすみません。
          最終的にsrcはどう書けばよいのでしょうか。。?
          どこでユーザー判定をするのか解らなくて悩んでおります。
          よろしくお願いいたします。

          • シロ

            こんにちは、コメントありがとう御座います。

            最終的にsrcはどう書けばよいのでしょうか。。?
            どこでユーザー判定をするのか解らなくて悩んでおります。

            srcをどう書く、という方法自体出来なくなりました。記事内でも「さほど使う機会もないかも」と書いたのはいずれこういう日が来ることは想定できるためです。

            以下の方法では如何でしょうか。

            http://jsfiddle.net/kachibito/B8afb/

            JavaScriptは外部ファイル化して読み込んで頂けます。アカウント名だけ変えればツイートを読み込めます。

  12. UK

    初めまして。UKと申します。
    以前からかちびと.netさんのサイトはよく見てますが初コメント。
    うちでもツイート表示されなくなったなーと思っていて検索してここに辿り着きました。
    コメント欄まで拝見させていただきました。
    APIの仕様変更?によるものだったのですね。
    見つけた時はうおおおおなるほどそうだったのかってなりました。
    ありがとうございました。

    • シロ

      始めまして。いつもご覧頂き有難う御座います。

      仰るように仕様変更が原因のようですねー・・あまり調べずコメントして申し訳なかったですorz

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services