じゃがめブログ

毒にはなるが薬にはならない、じゃがいもの芽のようなことだけを書き綴るブログです。

はてなダイアリーに「Twitterにつぶやく」ボタンを作って配置するまで

最近ちょこちょこと見るようになった、Twitterでつぶやくボタン。欲しくなったんですけど、はてなダイアリー標準にはどうやら無いっぽいんで作ってみました。

ロゴを用意する

文字列で「このエントリーをつぶやく」でも良かったんですが、若干味気がないかなということで画像にしてみます。
画像作成はこちらのサイト"Twitlogo"で作成しました。

参考サイト:"Twitlogo"

使い方は簡単。真ん中のテキストボックスにロゴ化したい文字列を入れて"make"ボタンをクリックするだけです*1。詳細な設定をするには"make"ボタン横の[advance options]をクリックすることで、詳細設定が出てきます。

今回は、白バックに表示するものなのでFont Colorを白(#FFFFFF)、Outline ColorをTwitter色の青(#33CCFF)に設定。フォントサイズがでかすぎても鬱陶しいので20に設定しました。

で、出来たのがこちらのロゴ→

なんとなくそれっぽいかな?

画像をサーバーにアップロードする

画像サーバーとかいちいち用意するのめんどくさいので、はてなフォトライフにアップロードしました。→ロゴ画像

ロゴ自体を右クリックして「画像URLをコピー」などの機能で画像のURLを取得します。

うちの場合は "http://img.f.hatena.ne.jp/images/fotolife/A/Asmodeus-DB/20100403/20100403020614.png" です。これを使います。

imgタグを作成する

ブログに貼り付けられるように、imgタグを作成します。
なんとなく右寄せにしたいのと、ALT要素を設定したいので以下のような感じにしました。

<div align="right"><img src="http://img.f.hatena.ne.jp/images/fotolife/A/Asmodeus-DB/20100403/20100403020614.png?1270228001" ALT="このエントリーをTwitterにつぶやく(「投稿する」ボタンを押すまで反映されません)"></div>

文字を設定したい人はそれを入れてもいいかもですね。src要素の中はさっき自分で作ったロゴのURLを入れてください。

ここまでで一段落。一旦、画像へのリンクのhtmlソースをテキストファイルにでも残しておきましょう。毎回作るのは面倒ですからね。

Twitterへのリンクタグを作成する

Twitterへのリンクは手動でも作成できるのですが、若干面倒くさいので、それ用のサービスを使わせていただきましょう。
参考サイト:"Tweet me MAKER"

つぶやかれた時に自分宛に@が飛んできてくれると通知になるんで、最初に付加する文字列に「.@AsmodeusDB」と入れています*2
ブログ記事とブログURLを入力し、リンクに使う文字列には先程の一連のimgタグを入力します。

入力後、"作成"ボタンをクリックすると、Twitterに投稿するためのhtmlタグが作成されます。
後はこれをお好きな場所に埋め込むだけです。今回はこんな風に作成されました。

<a href="http://twitter.com/home?status=.%40AsmodeusDB+%E6%96%B0%E7%A4%BE%E4%BC%9A%E4%BA%BA%E3%81%AB%E8%B4%88%E3%82%8B%E3%80%81%E8%A8%80%E8%91%89%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8+-+%E3%81%98%E3%82%83%E3%81%8C%E3%82%81%E3%83%96%E3%83%AD%E3%82%B0+http%3A%2F%2Fd.hatena.ne.jp%2FAsmodeus-DB%2F20100331%2F1269965435"><div align="right">
<img src="http://img.f.hatena.ne.jp/images/fotolife/A/Asmodeus-DB/20100403/20100403020614.png?1270228001" ALT="このエントリーをTwitterにつぶやく(「投稿する」ボタンを押すまで反映されません)">
</div></a>

画像さえ作っておけば、後はペコペコ貼りつけてボタンをクリックするだけなので、それほど時間は掛からない……のですけど、ちょっと面倒ですよね。はてなダイアリーTwitter連携に正式対応してくれたらいいんですけどねえ〜……。

朝になって改めて見たらロゴのダサさに憤死しそうになったので、ロゴを変えてみました。

*1:文字には半角英字しか使えないようなので、その点だけご注意。

*2:最初に"."を入れてるのは、コレを入れないとつぶやき主と私の両方をフォローしてないとこれが見られないからです。それもなんか残念なのでね。