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することができます。こんな感じのウィンドウがポップアップされます。
この方法は非常に簡単で手間もかかりませんが、あくまでも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=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を取得してくれます。その変数はブログによって異なります。
| 固定リンク | 0
「パソコン・インターネット」カテゴリの記事
- 【最新】【解決方法】url末尾に ?m=0 で解決|GoogleのBloggerが検索インデックス登録されない(2024.09.22)
- ATOKで[プライバシーモード]の[学習機能を抑制する]を有効にすると(2024.08.04)
- ATOKでタスク切り替えやGoogle ChromeやMicrosfot Edgeのタブ切り替えが遅くなる問題(2024.08.01)
- 日本語入力中に半角スペースを打つ方法|Shift + スペースの活用(2024.06.13)
- 手回し充電器つきLEDライト&ラジオ(2024.06.07)
コメント