色聴者判定テスト

twitterの埋め込み方法

このページではtwitterのつぶやきをホームページやブログに表示させる方法を解説します。
見た目も使い方も私が知る限り一番簡単です。CSSだけでデザインを変更できるので、プログラミングができなくても大丈夫。
Flashとかのごちゃごちゃした見た目が好きじゃない方はぜひご利用ください。

このページの新しいバージョンを作りました。今後はこちらを更新していきます。

HTMLだけでツイッターを埋め込む方法

2012/10/14 2時頃追記
ツイッターの仕様変更に対応しました。(古いやつを使っている人は新しいやつにしないと動かないです)

2010/11/29 18時頃追記
URLを自動でリンクにしてほしいという要望があったので、リンクになるようにしました。

2010/10/13 19時頃追記
デザインをいじる方法も書いてほしいという意見があったので、
デザインサンプルページを作りました。
ツイッターをホームページに載せるサンプル

分かんないことがあったら@ts_3156に直接聞いてください。
もっとかっこいい表示にするには？？、とかどんな些細な質問でも大丈夫ですよ(^-^)

twitterの埋め込み手順

手順はすごく簡単です。やることは以下の2つだけです。

1つ目
twitter.js
↑このファイルをダウンロードしてください。
リンクを右クリックして、「名前を付けて保存」をするだけです。
保存したファイルは、サーバ上にアップロードしてください。
※7行目の「ts_3156」っていうところを自分のユーザ名に書き換えてください。

2つ目
twitterの発言を表示したい場所に、

<div id="twitter"></div>
<div>
<a href="javascript:twbtn('back');">前へ</a>
<a href="javascript:twbtn('next');">次へ</a>
</div>
<script type="text/javascript" src="twitter.js"></script>

↑このHTMLを書いてください。
ツイッターをホームページに載せるサンプルもあります。

たったこれだけで、自分のホームページにtwitterのつぶやきが表示されます。
このページの右側→にこの方法で埋め込こまれたtwitterがあります。

分かんないことがあったら@ts_3156に直接聞いてください。
もっとかっこいい表示にするには？？、とかどんな些細な質問でも大丈夫ですよ(^-^)

参考にしたページ

私が公開しているソースコードはほとんど上のページで紹介されているやつそのままです。
便利なソースコードを公開してくださりありがとうございます。