自分のwebページにtwitterのつぶやきをテーブルで囲って表示させ

質問

自分のwebページにtwitterのつぶやきをテーブルで囲って表示させているのをよく見かけますが、自分のwebページでもそれをやりたいなと思っております。現在は、自分のwebページはhtmlとCSSだけで作っています。javascriptの仕組みがよく分かっていないのですが、方法としてはjavascriptしかないのでしょうか。もし、その方法が分かる方がいらっしゃいましたら教えて頂けますでしょうか。宜しくお願いいたします。

回答No.1

kuzumiHK · ベストアンサー

こんな感じでしょうか。表示する項目を増やしたりするには、JS部分を改修する必要があります。見た目はid=twitter内をCSSでスタイルするなりできると思います。

▼表示したいhtmlのbodyに下記を追加
<div id="twitter"></div>
<script type="text/javascript" src="test.js"></script>

▼test.php（※twitterのIDを変更する必要あり）
<?php
$twitter_id = "hoge"; // twitterのID
$mojicode = "UTF-8"; // UTF-8が推奨。htmlがShift-JISの場合Shift-JISに変更する必要があるかも。
mb_http_output($mojicode);
mb_internal_encoding($mojicode);
header('Content-Type: text/xml;charset={$mojicode}');
$url ="http://twitter.com/statuses/user_timeline.xml?id=$twitter_id";
print(file_get_contents($url));
?>
▼test.js
(function (){
var php = "test.php"; // phpのファイル名やパスを変更する場合

xmlHttpObj = null;
if (window.XMLHttpRequest){// Firefox用
xmlHttpObj = new XMLHttpRequest();
}else if (window.ActiveXObject){
// IE6用
try{
xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
// IE5用
try {
xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (xmlHttpObj)
xmlHttpObj.onreadystatechange = getXML;
if (xmlHttpObj){
xmlHttpObj.open("GET",php, true);
xmlHttpObj.send(null);
}
})();

function getXML(){
var xmlData = null;
if ((xmlHttpObj.readyState == 4) && (xmlHttpObj.status == 200)){
xmlData = xmlHttpObj.responseXML;
var items = xmlData.getElementsByTagName("statuses");
var html = "<ol>";
var words = items[0].getElementsByTagName("status");
var max = words.length;
for(var i = 0; i < max; i++){
// この部分は、http://twitter.com/statuses/user_timeline.xml?id=＜あなたのID＞に表示されるXMLを見ながら、表示する項目を増やすことも可能です。↓created_atと入れればそのタグで囲われている部分がaに格納されます。
var a = words[i].getElementsByTagName("created_at")[0].childNodes[0].nodeValue;
var b = words[i].getElementsByTagName("text")[0].childNodes[0].nodeValue;
//var c = words[i].getElementsByTagName("screen_name")[0].childNodes[0].nodeValue;

html = html + "<li>" + b + "（" + a + "）" + c + "</li>"; // aやbをリストに連結
}
html = html + "</ol>";
document.getElementById("twitter").innerHTML = html; // id=twitterに書き込む
}
return 1;
}

回答No.2

kuzumiHK

よく調べてみたら、公式のウィジェットなどがあるようですね。。
オリジナルじゃなくてOKならこっちのほうがいいかも。

http://twitter.com/goodies/widgets

お礼

わざわざありがとうございます。お陰で無事に入力できました！