MAGICALTV.NET

BLOG

[✔] twitterを自分のホームページに表示させるHTML（MAGICALTV.NETの場合）

★MAGICALTV.NETで使用している【twitter.js】の中身はご覧の通り
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<p><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+'</a></p>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
（時間表時を省略しています）

★そしてHTMLに記述するタグは
<div id="twitter_update_list" style="font-size: 12px; "></div>
<script type="text/javascript" src="http://www.magicaltv.net/_webpage/twitter/twitter.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/MAGICALTV.json?callback=twitterCallback2&amp;count=3"></script>

以上
2010/07/06

[✔] twitterを自分のホームページに表示させるHTML（追記）

★前述した
<p id="twitter_update_list" style="list-style-type: none; "></p>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/MAGICALTV.json?callback=twitterCallback2&amp;count=5"></script>
ではツイート同士の間にスペースが出来ないという問題が起きてしまうので

３行目の
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
のjsファイルを改造して自分のサイトにアップする


★改造方法

http://twitter.com/javascripts/blogger.js
の全文をコピーしてメモ帳などにペーストする
↓
10行目の
statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
の<li>の部分を<p>に書き換える
↓
statusHTML.push('<p><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></p>');
↓
書き換えたjsファイルを【twitter.js】など適当な名前をつけて保存し、自分のサーバーにアップする
↓
前述したタグの2行目を自分のサーバーに変更する
<p id="twitter_update_list" style="list-style-type: none; "></p>
<script type="text/javascript" src="http://×××.×××/×××/×××.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/MAGICALTV.json?callback=twitterCallback2&amp;count=5"></script>

以上
2010/07/06

[✔] twitterを自分のホームページに表示させるHTML

★twitterのウィジェットを利用（英語／ログインが必要）
http://twitter.com/widgets/html_widget
<div id="twitter_div">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/MAGICALTV" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/MAGICALTV.json?callback=twitterCallback2&amp;count=5"></script>


★結果このように表示される

Twitter Updates

    follow me on Twitter


    ★スタイルシートを指定していないと『●』が表示され、左にマージンが出来てしまうので
    <p id="twitter_update_list" style="list-style-type: none; "></p>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/MAGICALTV.json?callback=twitterCallback2&amp;count=5"></script>


    以上。
    2010/04/27
    Copyright(C) MAGICAL inc. All Rights Reserved.