« Appleが iOS5 と iCloud を発表 | トップページ | OracleがOpenOffice.orgのコードの管理権をApacheプロジェクトに寄贈 »

2011年6月 2日 (木)

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を設定することができます。それぞれの設定に応じてボタンは次のように表示されます。

Image2

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

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

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

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

Image3

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

1つの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=http://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を取得してくれます。その変数はブログによって異なります。

人気ブログランキングへ

|

« Appleが iOS5 と iCloud を発表 | トップページ | OracleがOpenOffice.orgのコードの管理権をApacheプロジェクトに寄贈 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/203483/51832887

この記事へのトラックバック一覧です: WebページにTweetボタンをはる方法:

« Appleが iOS5 と iCloud を発表 | トップページ | OracleがOpenOffice.orgのコードの管理権をApacheプロジェクトに寄贈 »