WebページにTweetボタンをはる方法

このココログのブログ記事もそうですが、最近TweetボタンのついているWebページが多くなってきました。

WebページにTweetボタンを貼り付ける方法はいくつかありますが、最も簡単なのは、次のタグをTweetボタンを取り付けたいところに挿入する方法です。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="twitterのアカウント" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

data-viaのところにはtwitterのアカウント名を入れることができますが、data-viaを省略することもできます。

data-countはtweetボタンのクリック数をボタンのどちら側に配置するかを定義します。vertical、horizontal、noneを設定することができます。それぞれの設定に応じてボタンは次のように表示されます。

class、data-lang、scriptタグの部分はそのままで使います。

このボタンをクリックすると、ボタンをはったWebページのタイトルとURLを自動的に取得し、

Webページのタイトル 短縮されたWebページのurl　 via　＠twitterのアカウント

でTweetすることができます。こんな感じのウィンドウがポップアップされます。

この方法は非常に簡単で手間もかかりませんが、あくまでも１つのWebページにひとつボタンを設置するときのやり方です。

１つのWebページに複数の記事が掲載されていて記事ごとにボタンを設置する必要がある場合（ブログ記事など）には適したやり方ではありません。なぜなら、このやり方ではWebページのタイトルとurlを自動的に取得してしまうからです。

ブログの記事ごとにTweetボタンを設置した場合には、その記事のタイトルとurlを取得しなければなりません。

この場合は、次のようにdata-text　と data-url を使ってタグの中にurlとタイトルを設定します。data-textの中には任意の文字列を入力することができます（設定できる文字数はurlと合わせて140文字まで）。

<a href="http://twitter.com/share" class="twitter-share-button" data-url=https://starfort.cocolog-nifty.com/voorlihter/2011/06/appleicloud-054.html data-text="Appleが iOS5 と iCloud　を発表" data-count="horizontal" data-via="toshizostarfort" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

いちいち記事のタイトルとurlを設定するのは非常に面倒ですが、data-textとdata-urlに変数を設定しておくと、自動的に記事のタイトルとurlを取得してくれます。その変数はブログによって異なります。

人気ブログランキングへ