2013/07/25

Twitter(ツイッター)のツイートボタンを設置する方法

Twitter(ツイッター)のツイートボタンを設置する方法

Twitter(ツイッター)のツイートボタンをwebサイトやブログのページに設置する方法をご紹介します。
ハッシュタグの利用でフォロワー以外のユーザーに記事を見てもらう機会を増やすことが出来ます。

目次

■Twitterについて

Twitterについて

Twitter(ツイッター)140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスで、ミニブログというカテゴリーに分類されます。
鳥のさえずりという意味のtweetを日本ではつぶやきと意訳されて定着しています。
一般にツイッターはSNSとして広まっていますが、ツイッター社自身は、「社会的な要素を備えたコミュニケーションネットワーク」であると規定していて、SNSではないとしています。

■ツイートボタンの設定・デザイン変更

ツイートボタンは「ツイートボタン」から作成することが出来ます。

ツイートボタン作成画面

目的に合わせてボタンの種類を選択します。
今回は『リンクを共有する』ボタンの設置手順を例としてご紹介します。

リンクを共有する』を選択すると

ボタンのオプション

ボタンのオプションが表示されます。
ここで細かい設定とコードの生成を行うことが出来ます。

以下の画像は作成したツイートボタンを押したときにポップアップする画面ですが、

ツイート画面サンプル

URLを共有ツイート内テキストユーザーハッシュタグをそれぞれ設定した場合、ツイートボタンを押すとこのようにあらかじめ情報が入った状態になります。

機能と見た目の設定が完了したらコードのプレビューにあるコードをボタンを配置したい箇所にコピー&ペーストで貼り付ければ設置完了です。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hpstylelink" data-lang="ja" data-hashtags="web制作">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

■生成したコードについて

縦に表示

ツイート数とボタンを↑のように縦に表示させたい場合は、

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hpstylelink" data-lang="ja" data-hashtags="web制作" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

上記コードのようにdata-count="vertical"を<a>タグの中に追加してください。

■まとめ

ツイッターは適切なハッシュタグを利用することによって、ユーザーが求めてる情報を提供することが容易になります。
数多くのつぶやきがされ、ユーザーのタイムラインの流れは非常に速くなっています。ツイートボタンを設置するだけではなく、一工夫加えることでより多くの人に記事を見てもらえるようになります。
これからツイートボタンを設置しようとしている人も、設置済みの人も今一度見直しをしてみるのもいいかもしれません。