ガンプラだってば！

最近、流行のツイッター。

楽天ブログにも、このtwitterと連携するボタンが設置されています。

各記事の下にあるボタンがそれです。

このボタンを押すと、ツイッターに記事の題名とURLをつぶやけるようになっているのです。


どんな仕組みなんだろうと思い、この「twitterボタン」のhtmlソースをよく見てみると、

どうやら<a>タグを利用した ただのアンカーリンクのようです。


ということはこのアンカータグの文言に好きな文章を記入し、

独自のtwitterボタンを作ることも可能だという事ですよね。

そんな訳で、さっそくやってみるのです。


１．リンク先の形態

まず、<a>タグのhrefに指定するリンク先ですが、どうやら以下の形となっているようです。

http://twitter.com/home?status=ツイートしたい文章

twitterのhomeにstatusとして文言を与えるというイメージでしょうか。

そんなに難しくありません。


２．htmlタグにしてみる

このリンク先をアンカータグで指定すれば、ツイッターボタンが出来上がるはず。

<a href="http://twitter.com/home?status=ツイートしたい文章">これがtwitterボタン</a>

このソースを使えば、うまく行きそうな気もするのですが、

実はこのままだとエラーになってしまいます。

どうも文字コードが関係しているようですねぇ。


３．UTF-8を使う

ツイートしたい文言が文字化けしないようにする為には、どうやらUTF-8を使えば良いみたいです。

UTF-8ってなんだよ！って思いますが、これは文字コードの一種なのです。

まぁ難しい事は置いといて、つまり項２のタグならば以下のようにすればよいということ。

<a href="http://twitter.com/home?status=%e3%83%84%e3%82%a4%e3%83%bc%e3%83%88%e3%81%97%e3%81%9f%e3%81%84%e6%96%87%e7%ab%a0">これがtwitterボタン</a>

このソースを使ったボタンがコレ → これがtwitterボタン

クリックしてみるとわかりますが、ちゃんとツイート画面のテキストボックスに文章が入ります。

status= 以降の呪文のような箇所が UTF-8 で記述した部分です。

ですがこんな%を使った魔法のような文字を書くことなど私には到底不可能orz。

なので、くまぐらみんぐ というサイトの文字コード変換ツールを使わせて頂きます。

ここのウェブツールをお借りしてUTF-8の文言をじゃんじゃん作っちゃいます。


４．twitterへのブログ宣伝ボタンを作る

さて、ツイッターへの投稿ボタンがちゃんと機能するのを確認したので、

当ブログの宣伝ボタンでも作りたいと思います。

以下↓のボタンをじゃんじゃんクリックしちゃってください^^！

このブログをツイートする