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 Button Generator（ツイッターのボタン生成ツール）を使って簡単に自作できます。

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

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

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

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

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

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

• Share Button（共有ボタン）
• Follow Button（フォローボタン）
• Mention Button（モーションボタン）
• Hashtag Button（ハッシュタグボタン）
• Message Button（メッセージボタン）

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

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

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

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

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

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

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

上の画像がソーシャルボタンの原寸大のものです。これでよろしければ自分のブログなどに設置してみるといいでしょう。
もちろん、自分のブログ記事が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から行えます。

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

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

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

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

デフォルトの設定に、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を設定しますか？）の欄に入力します。
 

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から始まるソースコードを挿入するのです。

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

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

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

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

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

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

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

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