このアメーバブログに設置していたツイート（つぶやく）ボタンですが、過去の経緯を辿れば「Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ 」で独自のツイートボタンを実装し、その後Twitter界隈でつぶやかれた数も取得できるということで「ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ 」で、Topsyに切り替えたのですが、ここ数日Topsyのリツイートボタンをクリックするとエラーが表示（※1）されるようになり、対処がめんどくさくなった（おぃ）ので、Twitter公式のツイートボタンに切り替えることにしました。
ってことで、Twitter公式のツイートボタンをAmebloに設置する方法を紹介します。
Twitter公式のツイートボタンを設置するためのJavaScriptコードを取得
まず、Twitterのツイートボタン作成ページ からボタンを設置するためのJavaScriptのコードを取得します。
「1. ボタンを選択してください。カスタマイズすることもできます。」のボタンの配置はお好みのものを選択しましょう。
ツイート内テキストは、「ボタンが表示されるページのタイトル。」を選択、URLもデフォルトで選択されている「ボタンが表示されるページのURL」を選択しておきます。
これは後述するカスタマイズで、トップページやエントリ一覧ページからもボタンを設置したエントリに対して正しくツイートを作り出すためです。
言語選択もお好みのもので問題ありません。
日本語だと「ツイートする」と表示され若干ボタンが長くなったので、このブログでは「英語」を選択したものを貼り付けています。
「2. フォローするのにおすすめのユーザー(オプション)」は、ブランクでもかまいませんが自分のアカウント名を入れておけば、ボタンクリックした際に「via @it_boy」のように表示され、そのまま投稿されればリプライも同時に受け取ることができます。
これだけで準備が整ったので、右下のJavaScriptのコードをコピーしておきます。
Amebaブログにツイートボタンを設置するためのJavaScript
半ばテンプレ化してしまっていますが、「Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ 」で書いたjQueryのコードにて、先ほど取得した公式ツイートボタンのJavaScriptをエントリの内に埋め込みます。
下記のJavaScriptコードをAmeblo管理ページのフリープラグイン（ブログを書く ＞ サイドバー設定 ＞ フリープラグイン）の適当な位置に入力します。
注意）
下記のコードをそのまま貼り付けると、このブログのタイトルや私のTwitterID（@it_boy）が表示されます。
後述の編集箇所を参考に、自分自身のブログのタイトルやTwitterIDに修正してください。
<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 twit_url = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="it_boy" data-text="' + title + ' | A Day In The Boy's Life" data-url="' + url + '">Tweet</a>';
var twitter_btn = twit_url + '<sc' + 'ript type="text/javascript" src="http://platform.twitter.com/widgets.js"></sc' + 'ript>';
$(classname).eq(i).append(' ' + twitter_btn);
}
})
</script>
その後、一部カスタマイズが必要になります。
まず、先ほどTwitterサイト上で取得したJavaScriptコードの中からアンカータグの部分（<a href=" ～ </a>）だけを下記の変数の箇所に埋め込みます。
※ jQueryの仕様上、SCRIPTタグをそのまま変数に入れることができず、区切って書く必要があるのですが、その説明を簡略化するためにあえて別の変数で定義してます。
var twit_url = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="it_boy" data-text="' + title + ' | A Day In The Boy's Life" data-url="' + url + '">Tweet</a>';
次に、上記のアンカータグ内に2つのプロパティを追加します。
data-text="' + title + ' | 自分のブログ名"
data-url="' + url + '"
title変数には、各エントリのタイトルが入っているので、トップページを表示した場合でも、そのタイトルをきちんとツイート内に表示できるようにしています。
タイトルは、自分のブログ名に編集してください。
同様に、url変数には各エントリのパーマネントリンクが入っています。
これで、フリープラグインを保存すればタイトル下の日付の横にツイートボタンが表示されているかと思います。
- 公式ツイートボタンをクリックしたときの例
使って少ししか経過していませんが、Topsyのものと比べリツイート（Twitterへ投稿された）数がだいぶ少なく表示されるようです。
まだ始まったばかりのサービスですし、全データをうまくクロールしきれていないせいかもしれません。
時間の経過とともに修正されていくかわかりませんが、公式のものですし今後はより正確な数値が表示されていくようになると思います。（期待も込めて）
※1 リツイートボタンをクリックすると下記のようなメッセージが表示される。
Error Caught exception in Otter::Controller::Concept->retweet "Malformed UTF-8 character (fatal) at /opt/perl/lib/vendor_perl/5.12.1/x86_64-linux/XML/LibXML/Error.pm line 217. at /opt/lighttpd/otter.master.26493.e11c189ccf/otter/script/../../lib/UB/Agent/LWP.pm line 236"
[PR]
[PR]
関連記事
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ
GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法
Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ
