Twitter ツイートボタンの設置方法

2011/01/03
★★

最近のブログなどのサイトに多く見かけるようになったツイートボタン。

記事に対応するツイートボタンをクリックすると、その記事のタイトル URL が自動で引用され、記事に対するツイートを簡易にしてくれる。

もちろん、Twitter API は、公開されているので、自作することも可能だが、http://dev.twitter.com/ から公式のツイートボタンが提供されているのでこれを使うことが手っ取り早い。

http://twitter.com/about/resources/tweetbutton にアクセスし、任意の属性に値を入れれば Java Script が自動生成されるので、この Java Script を自分のサイトなりにペーストすれば良い。

当サイトの様に、ツイートボタンが対象とする記事を動的に指定したい場合は、サーバーサイドのコーディングが必要。(Java Script でも実装可能だろうが、サーバーサイドでのコーディングの方がはるかに容易。)

詳しくは、http://dev.twitter.com/pages/tweet_button を参照すれば分かるが、以下のプロパティを記事に応じて動的にレンダリングすれば足りるだろう。

  • data-url: 記事の URL (=permalink) を設定する。
  • data-via: 記事の作成者のTwitter アカウントを設定する。
  • data-text: 記事のタイトルを設定する。

以上