2009,Nov,11,09:48

twitterのtweetを自分のサイトに貼る

暇だしちょっとパブリックな記事を書きます。
ここ最近の検索ワード解析を見ると、リピーターさん以外にはtwitterのブログパーツを設置せんとしてきている人が断トツに多いです。
色々と作っている人がいらっしゃるけど、中々上手く動作するものを探すのも難しいんですよね。私も色々苦労しました。

おそらく何を利用して作成しているのかで正常に動作するか否か別れているようです。
RSSフィードから取得しているものは反映が遅かったり。

それでこれまで色々と自分なりに試行錯誤してきまして、それをこのブログにも断片的に書いてきたのですが、見知らぬお客様のためにここでまとめておきます。

□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■

※注意

1.プライベート(非公開)設定をしているアカウントの場合、表示されません。ちゃんと確かめたわけではありませんが、自分が見てきたものはそういうものが多いようです。

2.自分のアカウントでの、フォローを含めたタイムラインの表示のものは表示される場合とされない場合があります。というのは見る側の問題です。例えば自分のアカウントでログイン済みのパソコンからは見れても、第三者には表示されないというものが多いよう。これはものによりますが、おそらく非公開アカウントのtweetはフォロワーにしか公開されないだとか、そういう理屈かと思われます。

□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■

●twitterpin


duboot.comさん製作のフラッシュウィジェット。ここから入手できます。

特徴は@のついた発言は表示されない点。

シンプルに完成された形のフラッシュなので素人にカスタムはできなさそうですが、文字がスライドで表示されるのは動きがあって良いかと。


●オフィシャルウィジェット

twitterのオフィシャルでも、ウィジェットの作成を行っています。
ただ、そちらも色々と試行錯誤をしているようなので、現時点でのものをここに記録しておきます。

○バッジタイプ


follow dita_69 at http://twitter.com


twitterのオフィシャルでもウィジェットは作成されているのですが、それらしきページがなぜか二つ存在し(ここここ)、上のものは前者の方から入手できます。

ブログなどに設置する場合には一番下の[その他]を選択し[続く>>]をクリック、flash-widgetと続ければコード発行ができます。背景色もWebカラーから選択可能。大きさはコードの中で好きなようにカスタムできますが、これもフラッシュなので上下左右の比率を変えてしまうと表示がおかしくなってしまいます。


○ウィジェットタイプ
※諸事情によりイメージキャプチャです。


上述の2つのオフィシャルのうち、後者のページでは色や、表示の仕方(シンプルなリスト表示やスライドアニメーションでの表示)などのデザインを色々とカスタマイズすることができます。
ただこのウィジェットは、大きさのカスタムも一応できるていにはなっているのですが自分は上手くいきませんでした。
オフィシャルの前者のほうでも同じコードが発行できます。HTMLの基本知識さえあればそちらのコードからでも色の変更くらいはできます。


□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■

●カスタムする

先述の通り、オフィシャルのウィジェットのサイズ変更が上手くいかなかったのと、もっとシンプルなものがよかったので、私はこのオフィシャルのウィジェットを少しカスタムしました(このブログのホーム画面、エントリーの上に表示されている部分)。

このオフィシャルのHTMLタグが、アニメーションで自分のtweetを表示していく場合には、



HTML code

<div id="twtr-profile-widget"></div>
<script src="http://widgets.twimg.com/j/1/widget.js"></script>
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<script>
new TWTR.Widget({
  profile: true,
  id: 'twtr-profile-widget',
  loop: true,
  width: 横幅px,
  height: 高さpx,
  theme: {
    shell: {
      background: '#ヘッダ、フッタ背景色',
      color: '#ヘッダ、フッタ文字色'
    },
    tweets: {
      background: '#tweets部分背景色',
      color: '#tweets部分文字色',
      links: '#tweets部分リンク文字色'
    }
   }
}).render().setProfile('twitterID').start();
</script>


となっているので、このタグのCSSを呼び出しているオレンジ部分

<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">

をさっくりと消し、外部でこのウィジェット用のスタイルシートを用意して呼び出すか、自分のサイトで使用しているCSSに手を加えることでカスタムができます。
といっても、class、id等がわからないと思うので、実際に上記のスタイルシートのURLにアクセスして一度覗いてみるといいでしょう。
自分は実際にそのCSSをテキストエディタにコピーし、色々と弄りながら重要な要素を抽出、このブログで読み込んでいるCSSに追加しました(と言ってもかなり手間ですが)。大きさはCSSの呼び出しを削ったら上手くいったのでHTMLタグの方を弄っています。そのままでサイズ指定が上手くいかなかったのはおそらくオフィシャルのCSSが邪魔しているのでしょう。

実際に私がCSSに追加したのは以下のプロパティです。



CSS

/**プロフィール画像、ヘッダー表示なし**/
.twtr-profile-img{display: none;}
.twtr-widget h3{display: none;}
h4{display: none;}

/**tweets部分テキストスタイル**/
.twtr-widget p{padding: 0 0 10px 0; line-height:1.2; width:auto; }

/**時間・返信の表示(〜ago reply)スタイル**/
/*この部分を変更することによりブラウザによって違いが出ました。Geckoエンジン(firefox等)では表示されては消えてというスタイルですが、Tridentエンジン(IE等)では上から下へのアニメーション表示になります。*/
i,.twtr-widget
.twtr-new-results{text-align:right;padding:3px;margin:0 auto 30px auto; display:block;bottom:5px; overflow: hidden; }

/**フッター表示なし**/
.twtr-ft{display: none;}



スタイルシートを編集するには知識と根気が要りますが、できれば大きさやカスタムも自在なので良いですね。


●シンプルに最新のtweetを一つだけ表示する。

例えばブログの上の方や下の方、サイドバーなんかに最新のもの一つだけシンプルに、という場合には以下のjavascriptコードで表示することができます。
最後のtwitterID部分を自分のtwitterのIDに変更してください。他の紫部分も編集可能です。時間の表示を英語に変えるのも良いですね。その際はスペースの入れ方に注意です。



javascript

<script type="text/javascript">
function relative_time(time_value) {
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
if(delta < 60) {
return '(1分以内>)';
} else if(delta < 120) {
return '(1分前)';
} else if(delta < (45*60)) {
return '(' + (parseInt(delta / 60)).toString() + '分前)';
} else if(delta < (90*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return '(約' + (parseInt(delta / 3600)).toString() + '時間前)';
} else if(delta < (48*60*60)) {
return '(昨日)';
} else {
return '(' + (parseInt(delta / 86400)).toString() + '日前';
}
}
function twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}

document.write(":Twitter status:");
</script>
<span id="my_twitter_status"></span> <span id="my_twitter_status_time"></span>

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/twitterID.json?callback=twitterCallback&count=1">



□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■

2,3年前にアメリカで一気に普及したtwitter。当初は日本語に対応しておらず日本人のアカウントも少なかったですが、今では日本でも普及し、同様にこうしたウィジェットも増えてきています。

長々と書いてきましたがもちろん、これからももっと新しいものができてくるであろうし、オフィシャルのウィジェットもこれからまた変わっていくと思います。

日本版twitterのオフィシャルアカウントをフォローしてみたりするのも良いかもしれませんね。
@twj

ついでに、私のアカウントもよろしく。
@dita_69

ではでは、良い twitter life を。

trackbacks

trackback url for this entry:
http://cgi.around-the-rainbow.com/stay-up-late/tt-cgitt_tb.cgi/173

comments

post comment




save? yesno


| Top |

Copyright © 2007-2009 無謀な夜更かし All Rights Reserved. / Produced by DITA