電気ウナギ的○○

About Home

Twitter のタイムラインを Web 画面上に表示する方法

shinoda (2010年10月22日 10:40)

20101021_twitter.jpg

Twitter のタイムラインを Web 上に表示したいという話があったので調べてみた。

俺のブログでは Twitter 公式ウィジェットを貼っている。

http://twitter.com/goodies/widgets
 ↑
ここから取ってこれるヤツね。
地域系 Twitter ポータルとか、そういうサイトではほとんどコレ使ってるケースが多いんじゃないかな。

ただ、これだとデザインの自由度が無いので、もうちょい他に良いのがないかいな?と探してみると、remy sharp さんって人が公開されているフリーの JavaScript がよさげ。

http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
 ↑
ここからダウンロード出来る。

最終更新が 2009/8 なのがちょっと不安だったけど、試しに使ってみると簡単にタイムライン表示が出来た。

ちなみに、HTML はこんな感じ。
ダウンロードした twitter.js は html ファイルと同じとこに置いている。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Twitter test</title>

<script src="./twitter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', {
    id: 'Shar6507',
    count: 4,
    enableLinks: true,
    ignoreReplies: true,
    clearContents: true,
    template: '"%text%" <a href="%time%'">http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

</head>
<body>

<h1>Twitter TL 表示テスト</h1>

<div id="tweet">
<p><a href="http://twitter.com/Shar6507">もし、ここにツイートが表示されなかったらクリックしてください</a></p>
</div>

</body>
</html>

あとは、自分の好きなように CSS で修飾すればええだけやね。

ということで、久しぶりにうちの会社のサイトも、社長(俺だ!笑) Tweet を流すようなページを追加して更新してみるかな。(笑)

電気ウナギ的○○

電気ウナギ的○○

About Back

コメント(0)

電気ウナギ的○○

電気ウナギ的○○

About Back

トラックバック(0)

トラックバックURL: https://blog.netandfield.com/mt/mt-tb.cgi/1331

電気ウナギ的○○

About This Site

電気ウナギ的○○
岩国在住。広島で働く超零細IT企業社長のいわゆる社長日記。
何か、酒と食い物のことばかり書いているようで・・・お察しのとおり、肥満体です:-)


2011/06/24
iPhone用サイト公開

Create with jQuery, jQTouch.


CLOSE