Retweet ボタンを設置してみた(Easy Retweet Button)

Retweet

以前にはてなスターを設置して、星が付くこともほとんど無いので外してしまったのですが、懲りることなく、今度は Retweetボタン を設置してみました。

Twitter に投稿するためのボタンって、パラメータつけてリンクするだけなんですね。statusというパラメータの値が投稿される文字列になるので、以下のようにリンクを書けば、RTした状態で twitter の入力画面にリンクします。

<a href="http://twitter.com/home?status=RT @vayu_asia: Retweet ボタンを設置してみた。">Retweetする</a>

実際にリンクしてみるとこんな感じ↓
Retweetする(リンクをクリックしてもいきなり投稿される事はないです)

WordPressの場合であれば、テンプレートタグを使って、

<a href="http://twitter.com/home?status=RT @vayu_asia: <?php the_title(); ?>">Retweetする</a>

こんな感じでリンクすれば、自分のアカウントにRTした状態で記事タイトルが付きます。

で、ここまでならシンプルな感じで、あとはClassでも付けておいて、画像など用意すれば、お気軽にボタン完成!なんですが、元記事へのリンクを付けようとして、

<a href="http://twitter.com/home?status=RT @vayu_asia: <?php the_title(); ?><?php the_permalink() ?>">Retweetする
</a>

なんてすると、ウザイ事になること必至なので、URLを短縮してくれる物を探すことに。

WordPress のプラグイン(tweetmeme)もあるのですが、 Easy Retweet Button と言うスクリプトの方が触りやすそうなので、こちらを導入してみました。

Easy Retweet Button 設置

bit.ly のURL短縮サービスを経由するように出来ているので、自前のアカウントなどは要らないのですが、いい機会なので、アカウントを取って、少々カスタマイズしてみます。

まずは配布サイトにあるjsファイルを編集します。

/*
 * Easy Retweet Button
 * http://ejohn.org/blog/retweet/
 *   by John Resig (ejohn.org)
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

(function(){

window.RetweetJS = {
	// 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: "",

	// Style information
	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; }"
};

上記のソースがデフォルトなので、以下のように修正

  1. 【14行目】retweetjsを bit.ly で取ったアカウント名に変更
  2. 【18行目】文字列を bit.ly で取ったアカウントのAPI keyに変更
  3. 【22行目】Retweet は表示されるアンカーテキストになるので、任意のテキストに。
  4. 【25行目】クリック数を表示する場合はclicks。無しの場合はnone
  5. 【29行目】文頭のテキストになるのでprefix: “RT @twitterのアカウント名: “,としました。

32行目からがボタンのスタイルなので、hover時のスタイルも34行目に追加して以下のように修正しました。vertクラス関連のスタイルは使ってないですが、そのままにしてあります。

	styling: "a.retweet { font:12px Helvetica,Arial; color:#000; text-decoration:none; border:0px; }" +
		"a.retweet span { color:#FFF; background:#16A8E7; margin-left:2px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:1px 5px 1px 3px; }" +
        "a.retweet:hover span { color:#FFF; background:#669900; margin-left:2px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:1px 5px 1px 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; }"

準備が出来たら修正したjsファイルをアップロードしてhead内で読み込みます。

<script src="http://jsファイルの置き場所/retweet.js"></script>

あとはクラスを指定してaタグを書くだけです。
少し紹介しておきますが、詳細は配布サイトのサンプルを見てください。

<a class="retweet self" href=""></a>

このソースが一番簡単ですね。retweetとselfの2つのクラスを付けて、空でaタグを書くだけです。上記の設定がしてあれば、これだけで「RT @アカウント名: ページタイトル + 短縮URL」と言うリンクになります。

vertクラスを追加して以下のように書くと

<a class="retweet vert self" href=""></a>

こんなスタイルなりますが、floatが入っていて続く部分のレイアウトが崩れる(かも知れないので)のでclearする必要がある場合もあります。

これでもいいのですが、リンク先を見て分かるように、ページのタイトル(記事タイトルじゃない)を拾ってしまうので、 WordPress の場合であれば、以下のソースをテンプレート内の任意の位置に埋め込めば、「RT @アカウント名: 記事タイトル + 短縮URL」と言うリンクになります。このブログの日付の横のボタンはこのソースが入ってます。

<a href="<?php the_permalink() ?>" class="retweet"><?php the_title(); ?></a>

他のブログの事がよく分からないのですが、パーマリンクや記事タイトルを拾う専用のコードがあると思うので、同じように埋め込めば使えるはずです。

あとvertクラスを指定しないときはカウント数にスタイルが付いていないので、jsファイルに、もう一行スタイルを追加してみました。カウント数は strong タグで括ってあるので、以下のように指定してあります。

"a.retweet strong { color:#666; font-size:90%; margin:0; padding:1px 1px 1px 3px; border:1px solid #CCC; background:#EEE; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }" +

今度はずっと設置しておくつもりですw
いまのところ。。。

配布元はこちら Easy Retweet Button

コメントを残す

メールアドレスが公開されることはありません。