色聴者判定テスト > twitterの埋め込み方法

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に直接聞いてください。
もっとかっこいい表示にするには??、とかどんな些細な質問でも大丈夫ですよ(^-^)

参考にしたページ

twitterをサイドバーに表示してみた | ColdSleep
Twitterをブログに表示!ページ送り付き★ - Not satisfied!!
http://で始まる文字を自動リンクしよう

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

色聴判定テスト一覧
テストはどれも10分ほどで終わります
推奨環境
・Internet Explorer7以降
・Firefox3以降
判定テストについて
これまでに 1541人 がテストを受けました
09/12/28~12/02/02
更新情報
・12/10/14
twitterの埋め込み方法を更新しました
・12/01/11
共感覚面白ニュースを更新しました
・11/11/03
共感覚面白ニュースを更新しました
・11/04/03
筑波大学新入生向け情報を書きました
・11/03/04
Twitter4j逆引きリファレンス【使い方 やりたいことから見つける】を書きました
もっと見る
知りたい情報募集中
知りたい情報は見つかりましたか? 見つからなかったならご連絡ください。 詳しく調べて、ネットでは見つからないような良質で科学的な情報を掲載いたします。

研究協力者も募集中です!
お問い合わせはこちら