[み]Twitter公式のウィジェットじゃ満足できない人は、jQuery使うといいよ

※追記
TwitterAPIの規約変更により、現在このサンプルは息をしてません…

みなさん、twitterやってますよね?
そして、自分のブログにtwitterのウィジェットを表示している方もたくさんいるんじゃないかと思います。
でも、このウィジェットって、いまいちカスタマイズできねーなーなんて思ってる方もたくさんいらっしゃると思います。
そんな方に、おススメなのが、今回紹介するjQueryを使って自分のつぶやきを表示する方法です。

公式ウィジェット

別にカスタマイズできなくてもいいよっていう方は、twitterの公式ウィジェットがラクなんで、こちらから作成してください。

Twitter / ウィジェット

この公式ウィジェットで弄れるのは、

  • 表示するツイート数
  • プロフィール画像の表示の有無
  • 投稿時刻の表示の有無
  • ハッシュタグの表示の有無
  • ウィジェットの色
  • ウィジェットのサイズ

こんなくらいです。
基本的にウィジェットの外形は弄ることはできませんし、ウィジェット下部のtwitterロゴと「join the conversation」も消せません。

で、こんなカンジにでき上がります。

jQueryでつぶやきを取得

さて、本題です。
jQueryでつぶやきを取得すると、割と自由にスタイルを設定することができますので、自分のブログに合わせてデザインを統一することができます。
読み込むデータはこれです。

http://twitter.com/statuses/user_timeline/masashi_385.json

自分のツイートを読み込む時は、masashi_385を自分のアカウント名に変えてください。

自分のつぶやきを取得

まずはつぶやき「text」を取得します。
これで取得できます。

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $.getJSON('http://twitter.com/statuses/user_timeline/masashi_385.json?callback=?', function (json) {
        //配列に入れる
        for(var i in json){            
            $("#tweet").append("<p>" + json[i].text + "</p>");
        }
    });
});
</script>

で、HTMLでは、

<div id="tweet"></div>

としてやれば、#tweetにひたすらつぶやきがp要素で追加されていきます。

サンプル

つづき

その後、日付を取得したりとかやってみたんですが、どっかがダメでうまくいってません。
勉強します。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup