1. ホーム > 
  2. Webサイト集客 > 
  3. Twitterとホームページの連携 > 
  4. Twitterボタンを作成する方法

Twitterボタンを作成する方法

Twitterボタンの作成方法のほか、ツイート数が上部に表示されるボックス型ボタンの作成もご紹介。コンテンツをシェアするボタンのほか、フォローするボタンなどのオプション設定の方法もご紹介しています。

  • 2015/9/22
  • 2012/7/15

コンテンツをTwitterでシェアしてもらったり、すでにシェアされている件数などを表示させるTwitterボタン。設置するだけでコンテンツをTwitterでシェアしやすくなりますので、Webサイトへの集客という面でも定番の機能です。

さらに、Twitterボタンにはコンテンツをシェアするボタンだけでなく、フォロワーを増やすためのボタン(フォローボタン)やハッシュタグをシェアするボタン、ダイレクトメッセージを送信するためのボタンなどが用意されています。

これらのTwitterボタンは、公式サイトの「Twitterボタン」の作成ページから簡単に作成することができます。

Twitterボタンの作成は、作成したいボタンの種類を選んでオプションを設定し、表示されたコードをボタンを表示させたい箇所に貼つけるだけです。

ほかに難しい作業をする必要はありません。

また、オプションを変更してボタンのデザインが変わる場合には、プレビューで表示されているボタンのデザインも変わります。

最終的にどのようなTwitterボタンのデザインになるのかを確認しながらオプションの設定を行っていきましょう。

コンテンツをシェアしてもらうためのTwitterボタン

コンテンツをTwitterでシェアしてもらうためのボタンは、「リンクを共有する」というタイプのボタンで作成します。
いくつかオプションが表示されますので、特に設定をしておいた方が良いものをご紹介します。

ユーザーの欄に自分自身のユーザー名を入力しておくと、ツイートの最後に「@lbleveryさんから」といった形で自分自身のユーザー名が自動的に挿入されます。

推奨の欄にも自分自身のユーザー名を入れておいてもいいでしょう。自分のWebサイトのコンテンツをシェアしてくれたユーザーが、自分と関連性の高いユーザーをTwitterで見つけやすくする助けになります。

フォローしてもらうためのTwitterボタン

Twitterユーザーにフォローしてもらうためのボタンは、「フォローする」というタイプのボタンで作成します。

オプションのユーザー名の欄には、必ず自分自身のユーザー名を入力してください。
その他のオプションは標準のままで良いでしょう。

ハッシュタグをシェアしてもらうためのTwitterボタン

ハッシュタグとは英数字で構成された記号のようなもので、同じハッシュタグが付いたツイートを検索しやすくするためのものです。
同じイベントに参加している、同じ話題でつぶやいているといった時に、ツイートが検索しやすくなります。

このハッシュタグがついたツイートをしやすくするためのボタンが、「ハッシュタグ」ボタンの役割です。

オプションのハッシュタグ欄には、必ず使用するハッシュタグを入力してください。

自分自身に対する返信をもらうためのTwitterボタン

Twitterでは「@ユーザー名」がついたツイートは、そのユーザーへの返信という意味を持ちます。メッセージを受け取った側も@付きのメッセージは「@ツイート」という画面に集約されますので、見逃してしまうことが少なくなります。

コンテンツに対する感想などをもらいたいときなどに活用すればいいのではないかと思います。
オプションのツイート欄には、必ず自分自身のユーザー名を入力してください。

Twitterボタンのデザインオプション

Twitterボタンの作成ページでは、ボタンの大小しかデザイン要素は指定できませんが、作成されたコードを修正することで、ツイート数をボタンの上部に表示するボックス型のボタンを作成したりすることが可能です。

通常のTwitterボタン

こちらが通常のTwitterボタン。ツイートされた数はボタンの右側に表示されています。

ボックス型のTwitterボタン

こちらがボックス型のTwitterボタン。ツイートされた数はボタンの上部に表示されています。

このボックス型のTwitterボタンを作成するには、パラメータに「data-count=”vertical”」と追加するだけです。
作成したボタンのコードをテキストエディタなどに貼りつけて加工しましょう。

<a href="https://twitter.com/share" data-lang="ja" data-count="vertical">ツイート</a>

「役にたった」と思ったらシェアお願いします