@soraiyのjquery.twitterTrackback.jsを改良してみた。

  • 投稿日
  • 更新日
  • 著者 キタジマタカシ
  • カテゴリー jQuery

で公開されていたスクリプトを導入して使わせていただいているのだけれど、なぜかFirefox3.5とiPhoneでうまく表示されなくて困っていました(ちなみに全ブラウザで動作確認したわけではありませんが、IE8、Firefox4、Safariでは動いていました)。

いろいろと調べていると、Twitterの公式ツイートボタンと関係があるっぽい。ツイートボタンを消してみたり、ツイートボタンより上にtwittertrackbackを表示させる要素を動かすと表示されたので、コンフリクトしてるのかな？

だけど、デザインとか変えたくなかったので、jQuery名前空間に関数を定義してプラグイン化したらどうだろうと思い試したところ、Firefox3.5とiPhoneでも表示されるようにできました。

以下ソース。

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
jQuery(function(){
    jQuery.fn.twitterTrackbackList = function(post){
        var topsyOtterapi = 'http://otter.topsy.com/trackbacks.js';
     
        var dispId = this;
        var tweetHtml = '';
     
        jQuery.ajax({
            type: 'GET',
            url: topsyOtterapi,
            cache: false,
            dataType: 'jsonp',
            data: {
                perpage: '100',
                order: 'date',
                url: post.url
            },
            success: function(trackbackData)
            {
                tweetHtml += (
                    '<h3>このエントリーの Twitter からのトラックバック<span class="entryTracbackNum"> (' + trackbackData.response.list.length + ') </span>' +
                    '<span class="entryTrackback"><a href="' + trackbackData.response.topsy_trackback_url + '">' +
                    'トラックバックページへ飛ぶ</a></span></h3>'
                )
                if(trackbackData.response.list.length == 0) {
                    tweetHtml += ('<p>このページにはまだ Twitter からのトラックバックはありません。</p>');
                } else {
                    jQuery.each(trackbackData.response.list, function(n)
                    {
                        tweetHtml += (
                            '<li class="tweet' + n + '">' +
                                '<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
                                '<ul class="section">' +
                                    '<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
                                    '<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
                                    '<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
                                '</ul>' +
                            '</li>'
                        );
                    });
                }
                jQuery(dispId).append('<ul>' + tweetHtml + '</ul>');
            },
            complete: function() {
            }
        });
    };
});

で、以下のような感じで実行（#twitterTrackback内に表示する場合）。

1
2
3
4
5
jQuery(function(){
    jQuery('#twitterTrackback').twitterTrackbackList({
        url: '<?php the_permalink(); ?>'
    });
});
  • Feedly
  • -
    フィード
Twitter

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

記事一覧