「Easy Retweet Button」をカスタマイズしてRetweetボタンを設置する

2010/02/04

カテゴリ：: jQuery

タグ：: twitter; javascript

先日、某所にてお世話になっている、@mersyさんより「ブログの記事一覧にReTweetのボタンをJSで自動でつけられるようにしたい。」というような課題みたいな話題が出てきました。

bitlyのAPIを使って、URLを自動的に縮めておきたいという要件もついていたので、それくらいであれば、以前ブログで紹介した「Easy Retweet Button」を利用したら簡単にできるのではないか？と思ったので、やってみることにしました。

Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法

プラグインを使わないとうまく動作しないことも…

最初はプラグインなんか使わずに、自分でbitlyのAPIを使って、作ってやろうじゃないかー！なんてのを思って取りかかったのですが、bitlyのAPIの接続が遅くなったりとか、結構不安定。読み込みが遅いとうまく動作してくれなかったりなんだり。

結局、そのまま考えても時間だけが過ぎていくなと思ったところで、プラグインがあったことを思い出しました。

bitlyの接続が終わってから･･･って処理を入れるくらいなんでしょうけど、今回は時間を優先させプラグインカスタマイズにて対応！

今回したいことを確認

今回実現することは、MTとかいろいろなCMSで記事一覧とかを表示させることがあると思うんですが、そういう一覧の各記事毎にReTweetするためのボタンをつけてみます。

とりあえず先に今回の完成品。

■デモ

THE HAM MEDIA ReTweet
「Easy Retweet Button」のカスタマイズ方法 ReTweet

通常は、テキストで「Retweet」って入るようになっているんですが、最初の設定でカスタマイズをしたら、画像でもOK。もちろん好きな文字でもOKになるのですが、今回は画像っぽいのを希望だったようなので、画像で対応。

こんな画像 →

デモ用にサクサクと考えずに作成。ロールオーバーもさせるかとか考えたのですが、とりあえず今回は省略。ちなみに、JS側で処理を入れようとするなら、処理のさせ方にもよるんだろうけど、画像が読み込まれたあとに動作するようにしないと、ちゃんと動作してくれないので注意。簡単なのはきっとCSSでの画像置換でしょう。とにかく、今回は省略。

カスタマイズ部分

基本は以前に紹介したのと同じなので、下記参照。

Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法

肝心の設定部分。プラグインの12行目以降。

window.RetweetJS2 = {
    // Your Bit.ly Username
    bitly_user: 'h2ham', //各のユーザーID

    // Your Bit.ly API Key
    // Found here: http://bit.ly/account
    bitly_key: 'R_9e16e8814cb82017eac7333f7a8e4816', //各のAPIキー

    // The text to replace the links with
    link_text: '<img src="../image/icon_tw.gif">', //画像の指定

    // What # to show (Use "clicks" for # of clicks or "none" for nothing)
    count_type: 'none', //クリック数いらないのでnone指定

    // Tweet Prefix text
    // "RT @jeresig " would result in: "RT @jeresig Link Title http://bit.ly/asdf"
    prefix: "RT @h2ham ", //Tweetする時の最初の文字。

    // Style information
    styling: "a.retweetv img{ vertical-align:middle; }"
    //基本は全削除でいいと思う↑上記は本ブログ用
};

こんな感じに設定したプラグインを読み込ませる。

HTML部分

あとは肝心なHTML部分にclassをつけるだけでいい。

つける箇所は、

■例

<ul>
<li>ダミータイトル <a href="http://・・・" title="ダミータイトル" class="retweet">ReTweet</a></li>
<li>ダミータイトル <a href="http://・・・" title="ダミータイトル" class="retweet">ReTweet</a></li>
<li>ダミータイトル <a href="http://・・・" title="ダミータイトル" class="retweet">ReTweet</a></li>
<li>ダミータイトル <a href="http://・・・" title="ダミータイトル" class="retweet">ReTweet</a></li>
<li>ダミータイトル <a href="http://・・・" title="ダミータイトル" class="retweet">ReTweet</a></li>
</ul>

CMSなどで自動で出すのであれば、テンプレートタグなどで上記のようになるように調整。アンカー内のテキストにタイトルで十分だったのですが、何となく嫌だな－という感覚になったので、ReTweetがテキストで、aタグのtitle属性にタイトルを入れちゃったりしています。気にしなくてもいいのですが、JSをOFFにしたとき、見えたときの事を考えると、タイトルが二重に表示されているのって、なんだかなーという感覚にとらわれたため。これはどちらでもお好きな方でいいと思います。シンプルなのは、title属性なしでやる方法でしょうか。

でも実はこれでは不十分。。。JSがOFFの環境に優しくなかったりする。JSがOFFであれば、Retweet部分は非表示にしておくなどCSSに入れておく工夫をしておくと親切だと思います。これをいれておけば、先ほど二重になる云々の自分の思っている部分は気にせずいていいのかなともおもったりします。ただ、JSが使える環境の場合、表示になるように、JS側で指定しておく必要があるので、それも忘れずに。

もちろんCSSでボタンカスタマイズでもOK

今回は画像をHTML側で指定して表示しているのですが、そこをテキストにしておいて、CSSでボタンのように見せるなどでも十分だと思います。画像置換とか（やり過ぎ注意）。CSSでの指定の場合は、styling部分での指定でもいいですし、あらかじめCSSに書いて奥でもいいです。表示させる部分がspanで囲まれてでてくるので、そこに指定するでいいと思います。

spanなんかで囲うんじゃないよ！って思う人は、プラグイン内の最後の方にspanってわかりやすく出ているので、そこをごにょごにょすると自分の好きに変更することもできます。

あまりclass付けたりとか、自分の環境にあわせたりして、マークアップを修正してみたりして下さい。

以上、ものすごく簡単に書いてしまいました。

参考サイト：