最近、ブログのページなどにも「このページをTwitterで知らせる」といったボタンが設置されていることが多くなりました。

そこで、私もひとつ作ってみました。アイデアと、バナー画像を作ってくださったので、お客様でもあるプレイグループ木場校様。ありがとうございます！

まずは、こちらをポチっとしてみて下さい

こちらのボタンの特徴は、次のような内容を設定することが出来ます。

特徴

前に決まり文句をつけられます

これはよくある機能。標準は、そのページのタイトルとURLを拾いますが、その前に決まり文句をつけられます。標準では「おすすめ＞」です。

タイトルの一部を削れます

タイトルに、サイト名やSEO的なキーワードを設定しているページの場合、タイトルが非常に長くなります。そこで、決まった文字列を指定することでそれらを削除することが出来ます。例えば、このブログの場合は・・

Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]

これがタイトルですが、「 | ブログ | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]」を削除して・・・

Zen-Condigの基本文法をおさらい

などとすることが出来ます。

アカウントを設定出来ます

ブログ著者のアカウントを設定して、Retweet時にアカウントを付加することが出来ます。Retweetされたことが分かりやすいですし、その方をフォローするなどして、新しいつながりを作ることが出来ます。

ハッシュタグも設定出来ます

ハッシュタグもいくつでも設定出来ます。標準で「#aqurl」が設定されていますので、削除しても構いませんが、残していただけると助かります。

自由なアイコン・選べるアイコン

アイコンも画像パスを設定するだけ、簡単に変更することが出来ます。

使い方

コードをコピーする

次のコードをコピーして、自分のブログのテンプレートなどに貼付けて下さい。

<!-- H2O tweet -->
<script type="text/javascript">
// 使うバナー
var banner = 'http://aqurl.info/v2/banner/b4.gif';
// 削除するタイトル
var trimTtl = '';
// 先頭に付加するメッセージ
var message = 'これ読んだ＞';
// Twitterアカウント
var account = '';
// ハッシュタグ（空白区切って複数指定出来ます / 支障がなければ#aqurlを入れていただけると助かります）
var hash = '#aqurl';

/*** ここから下は変更しないでください ***/
var url = location.href;
var title = document.title;
title = message + title.replace(trimTtl, '') + ' ' +hash;

document.write('<a href="http://aqurl.info/v2/urls/twitter?t=' + encodeURIComponent(title) + '&amp;u=' + encodeURIComponent(url) + '&amp;a=' + encodeURIComponent(account) + '"><img src="' + banner + '" alt="Retweetする" /></a>');
</script>

コードを書き換える

各設定項目を自由に書き換えて下さい。書き換えるときは、「’」の間だけを書き換えるようにしましょう。

画像を書き換える

アイコンは、プレイグループ木場校様が4種類作ってくださいましたので、これを使っていただいても構いません。お好きなものをお選び下さい。

これからも増やすかもしれませんし、もし「作ったけど上げるー」という天使のような方がいましたら、ぜひくださいっ。 その他、機能リクエストなどは、お気軽にコメントまたは「@seltzer」までお知らせくださいませ。

Tweet