TOPSY API を使ってみる

よく見かけるブログ記事に対するTwitterでのツイートを一覧表示しているやつ。
最初はあんまり興味がなかったんですが、突如興味が湧いてきたので、本ブログにも採用してみました。

↓こちらを参考に、TOPSY APIを使ってみることに。

jQueryでWordPress記事に対するつぶやかれ内容を表示する *Ateitexe

おそらくWordpressならプラグインもたくさんあるんでしょうが、私にとってjQueryだとカスタマイズがしやすくて助かります。

上記ページだと、Wordpressプラグイン「Twitter@Anywhere Plus」も追加で導入しています。なんか高機能な感じでちょっと「いいなソレ」と思ったりしたんですが、考えを改めてシンプル路線でいく方針としました。

CSSデザインしやすいように生成するHTMLも若干カスタマイズしましたが、実際に表示されると以下のようになります。

また、参考ページで紹介されたままだと、文中のURLやTwitterユーザー名がプレーンなテキストのままなので、Javascriptでリンクテキスト(URLはURLに移動、ユーザー名はTwitterのユーザーHOMEに移動)になるようにカスタマイズしました。

var cts = res[i].content;
//URLの後ろにはスペースが入ってるようなので、スペース以外(\S)でマッチング
var cts = cts.replace(/(http\S+)/gi,"<a href=\"$1\" target=\"_blank\">$1</a> ");
//ユーザー名(半角英数)のうしろが「さん」なので、半角英数([0-9a-z_])でマッチング
var cts = cts.replace(/(@)([0-9a-z_]+)/gi, "<a href=\"https://twitter\.com\/$2\" target=\"_blank\">$1$2</a>");

ただし、正規表現にはあまり自信がないので、すべてのパターンに対応できているかとても不安…。
もっと上手な(というか正しい)指定方法があったら誰か教えてください…。

Wordpress | , , , |