Twitter で記事について言及したツイートを30秒で誰でも簡単に取得して一覧にできる jQuery プラグイン
ブログの記事 URL を入れると短縮 URL でのつぶやきでも取得してきて出力します。内部的には jQuery と Topsy の otterapi を使って構築しています。作業量としては30秒くらいで初心者でも設置できますので方法を紹介します。
JS ファイルを設置する
必要なものは jQuery と今回作った jquery.twitterTrackback.js です。
1 2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="[JS ファイルパス]>/js/jquery.twitterTrackback.js" charset="utf-8"></script>
コードを埋め込む
以下のコードを埋め込んで設定します。url には記事の URL を入れます。id には取得してきたつぶやきの一覧を出力する要素の id を入れてください。
1 2 3 4 5 6 7
<script type= "text/javascript"> twitterTrackbackList({ url: '<?php the_permalink(); ?>', id: '#twitterTrackback' }); </script> <div id="twitterTrackback"></div>
以上で設置作業は終わりです。
WordPress に設置する場合のコード
ここまでの設定方法をまとめてるついでに WordPress に埋め込む場合のコードを紹介しておきます。
1 2 3 4 5 6 7 8 9
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="[JS ファイルパス]>/js/jquery.twitterTrackback.js" charset="utf-8"></script> <script type= "text/javascript"> twitterTrackbackList({ url: '<?php the_permalink(); ?>', id: '#twitterTrackback' }); </script> <div id="twitterTrackback"></div>
(2010年11月28日 追記) 追記: CSS について (追記ここまで)
デフォルトだとただ HTML で出力されるだけですのでデザインは特にされていないものが出力されます。一応私が適当に書いた CSS を公開しておきますので、同じようなデザインでよければこれをページに読みこめば良いです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
#twitterTrackback { padding: 10px 15px; margin: 0 0 20px; font-size: 13px; background: #f1fde5; } #twitterTrackback h3 { padding: 0 5px 3px; margin: 0 0 10px; font-size: 13px; font-weight: normal; border: none; border-bottom: 1px #9ad95c solid; } #twitterTrackback h3 span { font-size: 12px; } #twitterTrackback p { padding: 0 15px; } #twitterTrackback ul { margin: 0; padding: 0; } #twitterTrackback ul li { margin-bottom: 10px; list-style-type: none; } #twitterTrackback ul li img { float: left; } #twitterTrackback ul li ul { padding: 3px 8px; margin: 0 0 0 60px; background: #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } #twitterTrackback ul li ul li { margin: 0; margin-right: 7px; display: inline; } #twitterTrackback ul li ul li.nick { font-size: 14px; font-weight: bold; } #twitterTrackback ul li ul li.date { font-size: 11px; }
関連記事
- IE で border を指定した時に線と線が繋がるのを防ぐ方法
- paddingの指定について
- jQuery で世界一簡単に画像を自動スライドすることができる jquery.simpleSlide.js
- Cookie を jQuery ならたった一行のコードで発行したり読み込んだりできる
- display プロパティで list-item を指定すれば任意要素に list-style-type が設定できる
- かなり自由に画像を並べてクリックで左右にスライドできる jquery.clickSlide.js
- jQuery と prototype.js のコンフリクトを回避する方法
- PHP が使えると Ajax との合わせ技で jQuery が凄く楽しくなる
- jquery.pngFix.js で画像のサイズが大きくなるバグの解決方法
- CSSでfontをまとめて指定する場合はスラッシュで区切る
コメント
-
zakeyさんのコメント
拝見させて頂きました。
2点質問があるんですが、同じように設置したんですが、テストでツイートした内容が反映されてないんですが表示まで時間がかかるんでしょうか?
また、Javascriptの中身を拝見したんですが、中身を変更して顔アイコンだけ表示する事はできますでしょうか? -
webleさんのコメント
表示までには時間がかかります。
また顔アイコンのみ表示させることも可能です。 -
zakeyさんのコメント
ご連絡ありがとうございます。では頑張ってみます。
ありがとうございます。 -
Liさんのコメント
このJQUERYプラグインを使ってウェブサイトにキャッシューする方法は知りませんか?