Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法
Twitterをはじめたかなり前に比べると、ものすごくTwitterがにぎわっていると思うこのごろですが、いまさらながら「Retweet」のボタンを設置しようと思い、とりあえず簡単にですが設置してみた。
今回の設置では、「Easy Retweet Button」というJavaScriptを使って本当に楽に実装。
これを使うと、Retweetが簡単にできる且つ、その時に投稿したRTのリンクが何回クリックされたのかというのがわかるようになります。
ただ、使用する際にカスタマイズが必要でしたので、その点についてをメモしておきます。
Easy Retweet Buttonの使い方
まずは、サイトに行き、必要なJSファイルをダウンロード。下記リンクを保存して使うこと。
http://ejohn.org/files/retweet.js
ちゃんとダウンロードしましょう。（上記リンクを右クリックで「名前をつけてリンク先を保存」もしくはページをひらいて保存。）
そしてhead内で読み込んでおきます。
<script src="js/retweet.js"></script>Easy Retweet Buttonの設定
上記の設置の前にしておくことが一つあります。このJSでは、bit.lyという、URLを短縮して表示してくれるツールを使っています。bit.lyにはAPIが提供されていて、それを使うにはbit.lyに登録をしてAPIキーを取得する必要があります。
ユーザー登録をした後、accountにアクセスすると、それぞれのAPIキーが取得できます。
account：http://bit.ly/account/
そして、設定が必要になるのは、スクリプトの13行目から29行目。
// Your Bit.ly Username bitly_user: "retweetjs", // Your Bit.ly API Key // Found here: http://bit.ly/account bitly_key: "R_6287c92ecaf9efc6f39e4f33bdbf80b1", // The text to replace the links with link_text: (/windows/i.test( navigator.userAgent) ? "►" : "♻") + " Retweet", // What # to show (Use "clicks" for # of clicks or "none" for nothing) count_type: "clicks", // Tweet Prefix text // "RT @jeresig " would result in: "RT @jeresig Link Title http://bit.ly/asdf" prefix: "",
■bitly_user
14行目のretweetjsの部分をbit.lyで設定したユーザーネームに変更する。
■bitly_key
18行目でAPIキーを入力
■link_text
22行目でボタンに表示させる文字をここで指定できます。
■count_type
25行目でbit.lyのリンク（短縮されたURL）がクリックされた数を表示するかどうか指定できます。数を表示する場合は"clicks"を、表示させない場合は"none"を指定。
■prefix
29行目は、Twitterに投稿する際の接頭語の指定ができます。通常は「タイトル（もしくは任意の表示文字）＋bit.lyのURL」なんですが、そのタイトル部分の前に表示させる文字を指定できます。
例えばprefix: "Rt @h2ham "なんてしておけば「Rt @h2ham ○○○ bit.ly_URL」というのが投稿文となります。
使用方法
基本の使い方はとっても簡単。classにretweetをつけるだけ。
<a href="http://h2ham.seesaa.net/" class="retweet">THE HAM MEDIA</a>上記のようにすると、「(RT @h2ham )THE HAM MEDIA http://bit.ly/WNx2w」と、aタグ内のテキストが投稿される。
※それぞれサンプルが表示されていますが、括弧内やCSSはこのブログ用にしたものを使ってます
<a href="・・・" title="ハムのブログ" class="retweet">THE HAM MEDIA</a>title属性を入れると、title部分が投稿テキストになる。
<a href="" class="retweet self"></a>classにselfを入れると、現在のページになる。
<a href="http://h2ham.seesaa.net/" class="retweet vert">THE HAM MEDIA</a>classにvertを入れると、縦表示用になる。
※縦表示の際は、CSSにfloatが入っているため、その点のCSSの挙動に注意。
ボタンのカスタマイズ
ボタンはテキストとCSSで作られているので、CSSの設定を変えることで、ボタンをカスタマイズすることができます。
このボタンのCSSはJS内に書かれていて、該当箇所は下記の通りです。
styling: "a.retweet { font: 12px Helvetica,Arial; color: #000; text-decoration: none; border: 0px; }" +
"a.retweet span { color: #FFF; background: #94CC3D; margin-left: 2px; border: 1px solid #43A52A; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px; }" +
"a.vert { display: block; text-align: center; font-size: 16px; float: left; margin: 4px; }" +
"a.retweet strong.vert { display: block; margin-bottom: 4px; background: #F5F5F5; border: 1px solid #EEE; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px; }" +
"a.retweet span.vert { display: block; font-size: 12px; margin-left: 0px; }"
例えば背景の色を変えたいならば、”a.retweet span”の”background: #94CC3D;”となっている部分を変更することで色が変更できます。
また、ロールオーバー時の設定を変更したい場合は、下記の一行を33〜35行目のどこかで入れれば設定可能です。
"a.retweet:hover span { ○○○ }" +
:hoverを加えただけなのですが、CSSは各自で設定してみてください。
以上、Easy Retweet Buttonの設定方法でした。
