ガンプラだってば！

< 新しい記事

新着記事一覧(全246件)

過去の記事 >

2010.07.21

twitterに文章を投稿するアンカーリンクを作る方法

カテゴリ：よしなに日記

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

楽天ブログにも、この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へのブログ宣伝ボタンを作る

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

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

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

お気に入りの記事を「いいね！」で応援しよう