Blog

2013.0701

特定人物のTwitterを表示するjQueryプラグイン(API 1.1対応版)

以前、TwitterのjQueryプラグインを公開しましたが、
API 1が廃止となり動作しなくなりましたので、新たにAPI 1.1に対応したjQueryプラグインを開発しました。
PHPを一切使用せず、OAuth認証も全てJavaScriptのみで完結させてTwitterを表示させるプラグインです。

なお、“スクロールバーが最下部に来た時に次のTweetを読み込む”という機能は廃止しました。
また、consumerKeyやらconsumerSecretやらが丸見えなのでセキュリティ等が関わる場合にはお勧めできません。

ダウンロード

使用にあたっての注意

  1. 再配布はご遠慮くださいませ
  2. 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
  3. このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
  4. 使用に関しては自己責任でお願いいたします。
  5. ご要望、バグなどございましたらお問合せフォームまで

設置方法1

head要素内にjquery.js、oauth.js、sha1.js、jquery.twitter2.jsの順に読み込みます。

oauth.jsとsha1.jsはこちらからダウンロードしてください

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="oauth.js"></script>
<script type="text/javascript" src="sha1.js"></script>
<script type="text/javascript" src="jquery.twitter2.js"></script>

設置方法2

Twitterへのアプリケーション登録を済ませた後、下記を記述してください。
※設定は「設定可能オプション」をご覧ください。
※オプションの最後は,を付けないでください。

$('#twitter').ATTwitter2({
	screen_name : "スクリーンネーム",
	count : 10,
	consumerKey: "コンシューマー・キー",
	consumerSecret: "コンシューマー・シークレット",
	accessToken: "アクセス・トークン",
	tokenSecret: "トークン・シークレット"
});

HTMLテンプレート例

下記のように出力されますのでCSSでそれぞれデザインしてください。
既にclass名が重複している場合は、下記「設定可能オプション」を適宜変更してください。

<div id="twitter">
<div class="attweets">
<div class="attweet">
<p class="atphoto"><a href="" target="_blank">画像</a></p>
<p class="attext">ツイート</p>
<p class="atstatus"><a href="" target="_blank">時間</a>　<a href="">ステータス</a>から</p>
</div>
</div>
</div>

設定可能オプション

screen_name : 表示させたいTwitter名,
count: 表示件数（初期値：10）

上記が設定出来ますが主に使用するのは
screen_nameとcountのみで問題ないと思います。

Page Top