Twitterのツイートボタン設置方法!シェアボタンをカスタマイズする!

自分のブログ記事を、ソーシャル・ネットワーキング・サービス(SNS)の一つであるTwitterのリンクボタンを介してシェアしてもらえることは、集客に大きな影響を与えます。ここでは、Twitterを有効利用するためのリンクボタンを簡単に設置する方法を説明します。

Twitterのツイートボタン設置方法!シェアボタンをカスタマイズする!のイメージ

目次

  1. 1Twitterのソーシャルボタンについて
  2. ツイートボタンとは?
  3. フォローボタンとは?
  4. 2Twitterのツイートボタン作成方法
  5. Twitterのコード生成ツールにアクセス
  6. Twitterのリンクボタンを作成する
  7. 3Twitterのツイートボタン設置方法
  8. Webサイトのページを開く
  9. 上でコピーしたコードをHTMLページに貼る
  10. 4Twitterのツイートボタンを独自で設定する方法
  11. 以下のソースで作成する
  12. 独自で設定すると利用できなくなる可能性がある
  13. 5Twitterのシェアボタンをカスタマイズする方法
  14. テキストやURLを設定したい場合
  15. 細かい部分までカスタマイズしたい場合
  16. 6Twitterのボタンは簡単に作れる!
  17. Twitterの記事が気になった方にはこちらもおすすめ!

Twitterのソーシャルボタンについて

Twitterをする男性

アメリカ発祥のTwitter(ツイッター)は、今や、世界中で使われているソーシャル・ネットワーキング・サービス(SNS)の一つです。

Twitterの特徴は、そのリアルタイム性と情報拡散の早さにあり、Facebook(フェイスブック)と使い分けることによって、より多くの集客が見込めるツールです。

スマホをいじる人

Twitterでは、URLを含む140字(半角の英数字は280字)以内のテキストメッセージしか投稿できませんが、それ故に、自分の投稿が、フォロワーと呼ばれる他のユーザーによってシェア(共有)され(これはRT、リツイートと呼ばれます)、拡散されるスピードも早いのです。

ここでは、自分が運営するウェブサイトやブログに人を呼び込むための、Twitterのソーシャルボタンについて解説いたします。

ツイートボタンとは?

ソーシャルボタンの一つであるツイートボタンとは、自分のブログ記事などに関心を持ってもらった訪問者に、「この記事は見る価値あるね(いいね)」といった感じで、Twitter(ツイッター)でシェアしてもらい、さらに、そのフォロワーと情報を共有してもらうことを期待して、設置するリンクボタンのことです。

このブログなどの記事に設置されたソーシャルボタンが、訪問者によってクリックされると、その記事のタイトルと、短縮URLがTwitterでシェア(共有)されます。

スマホで動画を見る人

ブログ記事などの訪問者によって投稿されたツイートは、さらに、そのフォロワーへと伝わって(リツイートされて)、情報が共有される仕組みになっています。

ちなみに、ここでいう短縮URLは、Twitterの公式ヘルプでは「リンク短縮」と呼ばれ、Twitterで共有されるリンク(URL)は、自動的にhttp://t.coリンクに短縮されます。

これは、Twitterでは投稿できる字数に、全角140字(半角英数字は280字)までという制限があるためで、URLの長い記事の場合、短縮URLを使わないと、それだけで字数が多くなってしまい、投稿をシェアするのに不都合があるからです。

サイト内でTwitter情報の共有ができる

スマホでTwitterをする人

Twitterは、自分がシェアした情報の共有をするツールの一つとして「ブックマーク」という機能があります。
興味を持った記事をシェアし、保存する機能としては「いいね」もありますが、ブックマークは自分以外の第三者には、興味を持ったことがわからないことです。

自分が興味を持ったツイートをブックマークしたいときは、ツイートの右下にある「共有」をタップし、「ブックマークに追加」をすれば良いでしょう。
このブックマークしたツイートを後から見たいときは、プロフィール~開く~ブックマークの順でタップします。

フォローボタンとは?

スマホのTwitterアイコン

ソーシャルボタンの一つであるフォローボタンは、自分のブログなどを訪問してくれた人が、自分のTwitterアカウントをフォローできるようにするために設置する小さなリンクボタンのことです。 

自分のTwitterアカウントを、ブログなどの訪問者にフォローしてもらえれば、自分の記事の更新などがリアルタイムに伝わり、リピーター確保に役立ちます。
 

Twitterのツイートボタン作成方法

ソーシャルボタンの説明をする女性

Twitterは自分のブログなどのリピーター確保に一役買うものですが、そのためには、ソーシャルボタンである、ツイートボタンとフォローボタンを自分のブログなどに設置する必要があります。

これらのソーシャルボタンは、Twitter Button Generator(ツイッターのボタン生成ツール)を使って簡単に自作できます。

それでは、Twitterのソーシャルボタンの作り方とブログなどへの設置方法について説明しましょう。

Twitterのコード生成ツールにアクセス

Twitterのリンクボタン生成ツール(英語)
Twitterのリンクボタン生成ツール(英語)

Twitterのリンクボタンを作成する

Twitterのリンクボタン生成ツール1(日本語訳)

Twitter Button Generator(ツイッターのリンクボタン生成ツール)のウェブサイトは英語なので、グーグルクロームの翻訳機能を使って日本語に変換します。もちろん、これは完全な訳ではないので、英語が読める人はそのままの方が望ましいでしょう。

【Twitter Buttons】をクリック

Twitterのリンクボタン生成ツール2(日本語訳)

Twitter Button Generator(ツイッターのリンクボタン生成ツール)のトップページを下にスクロールすると、上の画面が表示されます。

左から原文とグーグルの日本語訳を対比して書くと、

  • Embedded Grid(埋め込みグリッド)
  • Embedded Tweet(埋め込まれたTweet)
  • Embedded Timeline(埋め込みタイムライン)
  • Twitter Buttons(Twitterボタン)

になります。
ここで、一番右のTwitter Buttons(Twitterボタン)を選択すると、下の画面が表示されます。

1番左のシェアボタンを選択

Twitterのリンクボタン生成ツール3(日本語訳)

上の画面を左から原文とグーグルの日本語訳を対比して書くと、

  • Share Button(共有ボタン)
  • Follow Button(フォローボタン)
  • Mention Button(モーションボタン)
  • Hashtag Button(ハッシュタグボタン)
  • Message Button(メッセージボタン)
となります。

ここで、選択するのは、一番左のShare Button(共有ボタン)です。
 

【Copy Code】をクリック

Twitterのリンクボタン生成ツール4(日本語訳)

Share Button(共有ボタン)をクリックすると、That’s all we need, unless you’d like to set customization options.(貴方がカスタマイズオプションを設定しなければ、必要なことはこれだけです)というメッセージの下に、HTMLソースコードが表示されるので、それをコピーします。

ちなみに、グーグルの日本語訳では「あなたが望む場合を除き、私たちが必要なのはこれだけです」という訳になっています。

コピーの方法は、Copy Code(コードをコピーする)をクリックするだけです。これでTwitterのリンクボタンを設置するための準備は終わりです。

Twitterのツイートボタン設置方法

パソコンでソーシャルボタンを作成

Webサイトのページを開く

さて、自分のブログなどの記事をシェア(共有)してもらうための、Twitterのリンクボタンを設置できるまであと一歩のところまできました。

Twitterを有効利用すれば、自分の記事をシェア(共有)してもらえるなど、ブログなどへの集客も効率的にできるので、ここまできたら是非リンクボタンを設置しましょう。

さきほどコピーしたHTMLソースコードを貼るところは、お使いのサービスプロバイダーによって違うので、そちらのマニュアルをご覧になってください。

上でコピーしたコードをHTMLページに貼る

Twitterのソーシャルボタン

さきほどコピーしたHTMLソースコードを自分のブログなどに貼るとどうなるか見てみましょう。

上の画像がソーシャルボタンの原寸大のものです。これでよろしければ自分のブログなどに設置してみるといいでしょう。
もちろん、自分のブログ記事がTwitterでシェア(共有)されるかの動作確認も忘れずにしてください。

Twitterのツイートボタンを独自で設定する方法

ソーシャルボタンのカスタマイズについて学習する女性

ここでは、Twitterのソーシャルボタンの一つであるシェアボタンをカスタマイズして設置する方法を説明します。

以下のソースで作成する

<a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;"><img src="【ボタン画像のURL】" alt="ツイート" /></a>

ツイート文や共有するURL、ハッシュタグに日本語が含まれる場合はURLエンコードが必要なので注意して下さい。URLエンコードはこちらのURLから行えます。

Web便利ツール/URLエンコード・デコードフォーム - TAG index

独自で設定すると利用できなくなる可能性がある

Twitterのシェアボタンを独自にカスタマイズして設置するやり方は、ブログなどのサービス・プロバイダーによってはできないこともあります。

また、HTMLソースコードを改変する必要があるので、初級者向きとは言い難い部分があります。

Twitterのシェアボタンをカスタマイズする方法

パソコンでソーシャルボタンを作る男性

それでは、Twitterのシェアボタンをカスタマイズするやり方を具体的に説明しましょう。

実際の作業は、Twitter Button Generator(ツイッターのリンクボタン生成ツール)のカスタマイズオプションの設定(set customization options)を使うことをお勧めしますが、皆さんは、そこで表示されるHTMLソースコードの中身を知っておいた方がいいでしょう。

テキストやURLを設定したい場合

Twitterのリンクボタン生成ツールのオプション画面(日本語訳)

デフォルトの設定に、Tweetテキスト(つぶやき:Tweet text)を追加したい場合は、Twitter Button Generator(ツイッターのリンクボタン生成ツール)のカスタマイズオプションの設定(set customization options)のところをクリックします。

Do you want to prefill the Tweet text?(Tweetテキストをあらかじめ入力しますか?)のところに、自分の好きな言葉を入力して、「update(更新)」をクリックします。

自分のブログなどのトップページをアピールしたい場合は、Do you want to set a specific URL in the Tweet?(あなたはTweetで特定のURLを設定しますか?)の欄に入力します。
 

aタグに少しコードを追加する

Twitterのシェアボタンのカスタマイズは、aタグにコードを追加することなのです。
前述したように、Twitterのシェアボタンは、デフォルトのHTMLソースコードが、

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

となっていますが、赤文字部分の「class="twitter-share-button" 」と「data-show-count="false"」の間に、detaから始まるソースコードを挿入するのです。

細かい部分までカスタマイズしたい場合

Twitterのアイコン

上述した「detaから始まるソースコード」を使えば、シェアボタンをカスタマイズする方法はいくつかあります。それをここでは簡単に解説しましょう。

【date】で始まる部分は設定&修正が可能

Twitterのシェアボタンは、デフォルトのHTMLソースコードの中で、「class="twitter-share-button" 」と「data-show-count="false"」の間に、detaから始まるソースコードを挿入すると、シェアボタンをカスタマイズできます。

このdetaから始まるソースコードは、フレキシブルに利用できますので、自分で変えてみてお気に入りのものにするといいでしょう。

各要素の解説

パソコンを操作する女性

次の表にある項目がシェアボタンのカスタマイズ項目です。
デフォルトの設定ではイヤだという方は、自分の好きなようにやってみてはいかがでしょうか。

もちろん、Twitter Button Generator(ツイッターのリンクボタン生成ツール)のカスタマイズオプションの設定(set customization options)も使えます。

Twitterのシェアボタンのカスタマイズ一覧
カスタマイズ項目 入力したい項目(例) ソースコード
ツイートテキスト お得な情報満載です! data-text="お得な情報満載です!"
指定のウェブサイトURL https://applica.info/ data-url="https://applica.info/"
スクリーンネーム 自分のアカウント名 data-via="applica"
ハッシュタグ iPhone data-hashtags="iPhone"
アカウントの推薦 フォローを勧めるユーザ名 data-related="applica"
ボタンの大きさ 大きくしたいときだけ選択 data-size="large"
言語表示 特定の言語で表示したいとき data-lang="ja" 

Twitterのボタンは簡単に作れる!

コーヒーを飲みながらスマホをいじる人

ここまでお読みいただきありがとうございました。

Twitterのシェアボタンは、Twitter Button Generator(ツイッターのリンクボタン生成ツール)を使えば、ほんの数分でできてしまうのです。

英語のウェブサイトなので、最初は臆するかもしれません。
でも、頑張ってトライしてみれば、Twitterのリンクボタンを介して、自分のブログ記事をシェアしてもらえるようになるのです。

Twitterの記事が気になった方にはこちらもおすすめ!

ThumbTwitterで自分のURLを共有する方法!スマホとPC別に紹介!
TwitterのURLを他のSNSやブログなどに載せたいと思っている人はいませんか?ここでは...
ThumbYouTube動画の共有方法!TwitterやLINEにシェアできない原因も紹介!
YouTubeで見たお気に入りの動画や、自分が作った動画をシェアしたいときは、YouTube...
ThumbTwitterにURLリンクを貼る!ブログへの埋め込み方も紹介!
TwitterにURLリンクを貼る方法やブログへTwitterリンクを埋め込む方法を紹介して...

関連するまとめ

Original
この記事のライター
カルロス・ハッサン
ライターとして活躍できるよう頑張ります