2010.08.26 追記
Twitter公式のツイートボタン設置方法は、「Amebloに設置していたツイートボタンをTwitter公式のものに変えました 」を参照してください。
「はてブボタン設置用ブログパーツを改良してみたよ 」の続き。
さらに改良してTwitterへ投稿ボタンをアメブロに設置できるようにブログパーツを改良してみました。
タイトルすぐしたのはてブボタンの横にTwitterへ投稿ボタンが表示されているかと思います。
クリックすると、TwitterのWebページにジャンプし、デフォルトで記事タイトルとURLが入力された状態になります。
Twitterへ投稿ボタンを表示するためのJavaScript
書き方は前回同様にｊQueryを使って組んでいます。
記事一覧（エントリーリスト） のページにも表示されるようにしていますので、多少長くなっています。
ソースは、「サイドバーの設定」メニューの「フリープラグイン」に貼り付ければ動くと思います。
<script>
$(document).ready(function(){
var page_url = location.href;
if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
var entries = $(".newentrytitle a");
var classname = ".updatetime";
var flg = 0;
} else {
var entries = $(".foot a:contains('記事URL')");
var classname = "div.entry .theme";
var flg = 1;
}
for (i = 0; i < entries.length; i++) {
var url = entries[i];
if (flg == 0) {
title = entries.eq(i).text();
} else {
title = $("div.entry h3.title").eq(i).text();
}
var hatena_btn = '<a href="http://b.hatena.ne.jp/append?' + url + '" target="_blank"><img height="12" alt="はてなブックマークに追加" src="http://b.hatena.ne.jp/images/append.gif" width="16" border="0" /></a><a href="http://b.hatena.ne.jp/entry/' + url + '" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/' + url + '" border="0" /></a>';
var twitter_btn = '<a href="http://twitter.com/home/?status=' + encodeURIComponent(title + ' ' + url) + '" target="_blank"><img alt="Twitterへ投稿" src="http://xxxxxxxxx/add_twitter.gif" border="0" /></a>';
$(classname).eq(i).append(' <span>' + hatena_btn + ' ' + twitter_btn + '</span>');
}
})
</script>
はてブ用の画像は、はてなのサーバーにあるものを利用していますが、Twitterへ投稿ボタンのアイコンは自前で用意する必要があります。
こちらは、予めAmebloの方へ適当な画像をアップロードしておき、その画像のURLを変数にセットしておきます。
<img alt="Twitterへ投稿" src="http://xxxxxxxxx/add_twitter.gif" border="0" />
Twitterへ直接投稿したい場合は、TwitterのWebページのURLの後ろにstatusパラメータを付けて、ツイートしたい情報を送ります。
情報を送る際には予めURLエンコードをしておく必要があります。
<a href="http://twitter.com/home/?status=' + encodeURIComponent(title + ' ' + url) + '" target="_blank">
上記の処理で、記事内のタイトルとパーマネントリンクを取り出してTwitterへ投稿するようにしています。
ブログの内容をTwitterに流したいだけなら、色々なサービスを通して可能ですが、ブログを見た人がTwitterへ気軽に投稿できるようにこういうUIを用意しておくのも良いかもしれませんね。
関連記事
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ
Amebloに設置していたツイートボタンをTwitter公式のものに変えました
ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ
[jQuery] 外部JavaScriptファイル読込みに関する考察
Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ