ツイートを自分のブログやホームページに埋め込む方法を解説します。 ほぼHTMLだけなので簡単です。
質問や間違い指摘は何でもご連絡ください @ts_3156
以前公開していたスクリプトをTwitter API1.1に対応させたものです。アクセストークン等をJSファイルに埋め込む方法のため、非常に危険です。自己責任でお使いください。
ツイートの埋め込み手順
以下の4つだけで完了です。
- sha1.jsを保存する
- oauth.jsを保存する
- twitter.jsを保存する
- HTMLタグを追加する
1. sha1.jsを保存する
sha1.js ← このリンクに書かれているsha1.jsをコピペして保存してください。
2. oauth.jsを保存する
oauth.js ← このリンクに書かれているoauth.jsをコピペして保存してください。
3. twitter.jsを保存する
twitter.js ← このリンクを右クリックして、「名前を付けて保存」してください。
※oauth_consumer_key、consumerSecret、oauth_token、tokenSecretを自分のものに書き換えてください。
※上記の4つの値の取得方法は、「アクセストークン ツイッター」等で検索するとたくさん見付かります。
以前公開していたスクリプトをTwitter API1.1に対応させたものです。アクセストークン等をJSファイルに埋め込む方法のため、非常に危険です。自己責任でお使いください。
4. HTMLタグを追加する
以下のHTMLタグを、ツイートを埋め込みたい場所に書いてください。
<div id="twitter"></div>
<div>
<a href="javascript:twbtn('back');">前へ</a>
<a href="javascript:twbtn('next');">次へ</a>
</div>
<script type="text/javascript" src="sha1.js"></script>
<script type="text/javascript" src="oauth.js"></script>
<script type="text/javascript" src="twitter.js"></script>
これだけで完了です。
補足：デザインをCSSで変える方法
今はあえて動作を止めています。CSSだけは「右クリック＞ソースを見る」から見ることができます。
CSSでデザインを変える方法のサンプルも作りました。よかったら参考にしてみてください。
参考にしたページ
TwitterクライアントのOAuth対応(Javascript編)
JavaScriptでTwitterのOAuthを取り付けて通信する方法
もっと古いバージョンは下記のページを参考にして書きました。
twitterをサイドバーに表示してみた | ColdSleep
Twitterをブログに表示！ページ送り付き★ - Not satisfied!!
twitterの埋め込み方法(同じ情報のちょっと古いページ)
同じ内容について、私が以前書いた記事。
twitter ホームページ 埋め込み【私が知る限り一番簡単な方法！】
質問お気軽にどうぞ
質問や間違い指摘は何でもご連絡ください @ts_3156
