Twitterのつぶやきを簡単にブログへ貼り付ける
最近作り直した（まだ途中ですが）個人的日記ブログの中でTwitterを貼りつけてみました。ブログパーツはたくさん出ているのでいろいろ試してみましたが、なかなか気に入ったのが見つからなくて自分で改良を加えてみることに。
おおもとはTwitter公式サイトのJavaScript Badgeです。Flashは使いたくないので。
ツイートは最新の1件分だけでOK。アイコン表示必須で日付は日本語がいい。この条件であっちこっち調べながら作ったものをメモしておきます。
とりあえずの出来上がりはこんな感じ。
まずはJavaScriptの部分。
<script type="text/javascript">
function relative_time(time_value) {
time_values = time_value.split(" ");
time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
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);
delta = delta + (relative_to.getTimezoneOffset()*60);
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 '（約1時間前）';
}
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_image').innerHTML = '<a href="http://twitter.com/' + obj[0].user.screen_name + '"><img src = "' + obj[0].user.profile_image_url + '" alt = "avatar" /></a>';
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_screen_name').innerHTML = '<a href="http://twitter.com/' + obj[0].user.screen_name + '">' + obj[0].user.screen_name + '</a>';
document.getElementById('my_twitter_user_name').innerHTML = obj[0].user.name;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/■ツイッターのユーザー名■.json?callback=twitterCallback&count=1"></script>
42行目の「■ツイッターのユーザー名■」の部分は、実際に使ってるユーザー名に書き替えてください。私の場合だと「ezorisu」。パソコンのTwitter画面で、右上の設定を開くと自分で設定した「名前」とか「ユーザー名」とかがわかります。
script上はちょっと混乱してしまいますが、「obj[0].user.screen_name」が設定画面上の「ユーザー名」、「obj[0].user.name」が「名前」になっています。
IE対応と時差調整はCreazy!の「第４回：twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる」から、日付の日本語化には葛西総合研究所Blog－ENSIS Note3.5の「Twitterブログパーツを改造」記事から、codeを使わせていただきました。ありがとうございます。
他にもユーザーアイコンURLの取得方法やJavaScriptの基本的なことなど、いろいろなサイトを参考にさせていただいています。
私の改造部分は、アイコン画像を表示するためのURLを取得してimgタグでかこったうえでリンクタグを追加、表示名を取得してこれもリンクタグを追加したくらいです。
JavaScriptもあまりいじったことがなかったので、これが最善なのか分かりませんがとりあえずはツイートの中身は取り出せました。
書き込む場所は</body>の手前。これは最後に読み込む方が表示速度が遅いときにイライラしないから。
次はブログ内のTwitterを表示したい位置に以下のcodeを書きます。
<div id="my_twitter"> <div id = "my_twitter_image"></div> <div id="my_twitter_status"></div> <div id="twitter_information"> Twitter : <span id="my_twitter_screen_name"></span> <span id="my_twitter_user_name"></span> <span id="my_twitter_status_time"></span> </div> </div>
後はcssで自分のサイトに合うように、サイズ、色、デザインを整えていきます。
#my_twitter {
background-color: #c0deed; /*バックは好きな色で*/
margin: 20px auto;
padding: 10px 10px 5px 10px;
width: 300px; /*全体の横幅*/
font-size:12px;
line-height:1.4em;
}
#my_twitter_image {
width: 60px; /*アイコン左寄せ部分の幅*/
float: left;
}
#my_twitter_status {
min-height: 34px;
width: 240px; /*右寄せ部分は（全体の横幅 - 左寄せ部分の幅）*/
float: right;
}
#twitter_information {
font-size: 11px;
text-align: right;
padding: 5px 0 0;
clear: both; /*フロート解除*/
}
#my_twitter_user_name {
margin-left: 0.4em;
color: #999999;
}
#my_twitter a {
text-decoration: none;
}
#my_twitter a:hover {
text-decoration: underline;
}
#my_twitter img {
border: none;
}
これで最初のサンプル画像のようなTwitter Badgeの完成です。
これをたたき台にしてさらにこのあと、自分のブログに合わせていろいろ手を加えてみました。
実際に設置したものはこちら→「Sense of Wonder」
メインエリアの上部に表示したかったので、サイズを横長にしてツイートはフキダシの中に入れました。アイコンも柔らかいイメージで角を丸めてあります。ただしIE6と7は、フキダシの角が丸くなりません。
デザインはいろいろ考えられそうですね。
- Twitter活用術：ウェブサイトのプロフィールウィジェット
Twitter公式サイト。ブログにツイートを表示するブログパーツ（Badge）を作れる。 - Creazy!：第４回：twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
上記の公式Twitterサイトで作られるブログパーツの不具合を修正する方法。時差の修正も。わかりやすくてとても参考になりました。 - 葛西総合研究所Blog－ENSIS Note3.5：Twitterブログパーツを改造
ここでは、ブログパーツの時間表示を英語から日本語にする方法を教えてくれます。 - PHP & JavaScript Room：Twitter関連サービス＆Twitterのつぶやきやきをブログに設置する方法
ブログでTwitterを活用するいろいろなサービスが解説されています。その中でも「A Resizable CSS-based Twitter Site Badge」の説明が参考になりました。 - Twitter API Viewer：Twitter APIの動作確認ができるネットサービス。
ついでに参考図書も
ホントの大まかなところを押さえるにはわかりやすくていい入門書です。なにしろ初心者なので。細かいところはネットで検索。
「中288ピクセル」
「小144ピクセル」
