はてなダイアリーに「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連携に正式対応してくれたらいいんですけどねえ〜……。
朝になって改めて見たらロゴのダサさに憤死しそうになったので、ロゴを変えてみました。
このエントリーをTwitterでつぶやく
