【最新】Twitterのツイートボタンを設置する方法をご紹介！

ツイートボタンを設置していると、面白い・他の人にも知ってほしいと思った読者が共有してくれるなど サイト運営者にとってメリットが大きいです。

このツイートボタンを完全自力で設置するには、HTMLの応用知識が必要ですが、簡単に設定する方法も用意されています。

この記事では、かんたんにツイートボタンを設置する方法とカスタマイズについて紹介していきます。

プログラミングに関してあまりよくわかってない人でも簡単にツイートボタンを作る機能が提供されています。

よくわからない場合、最初はこちらを使用するようにしましょう。

コピーしたらHTMLとしてボタンを設置したい場所に貼り付けて埋め込みしてください。

ボタンが正常に動作せず、貼り付けたテキストそのまま表示されるという場合は、HTMLとしてではなくテキストとして貼り付けてしまっています。

HTMLとして貼り付ける方法は使用するブログサービスによって異なるので、各自「サービス名 HTMLモード」「サービス名 HTML張り付け」というように検索するようにしてください。

公式サイトで作成したツイートボタンは最低限の機能しか搭載されていません。

ですが、ツイートボタン作成ページからカスタマイズ可能なため、好きなようにツイート動作をカスタマイズできます。

変更を保存する際は[Update]をクリック。ツイートボタンの動作をプレビューしたい場合は[Update]ボタンの下にあるツイートボタンをクリックしてください。

プレビュー自体は即変更内容が適用されるため、変更内容のチェックのたびに[Update]を押す必要はありません。

デフォルトでは、ボタンをクリックしたページの URL とページタイトルのみ表示されるようになっています。

ブログ専用アカウントなど、記事がシェアされるたびにリプライ形式で通知させたい時もあるでしょう。

ハッシュタグの追加もかんたんです。

こちらも一見するとひとつしかハッシュタグを設定できないように見えますが、スペースで区切って追加することで、2つ以上のハッシュタグを登録可能です。

表示されるおすすめユーザーもカスタマイズすることができます。

ツイートするアカウントが「@〇〇さんから」の「@〇〇」をフォローしていない場合は、そのアカウントと1つ目に指定したおすすめアカウントが表示されます。

2つめに指定したおすすめアカウントは、「@〇〇さんから」の「@〇〇」をフォローしている場合にのみ表示さる仕組みです。

ですので、優先度が高いものを1つ目に。「@〇〇さんから」をフォローしている前提に表示するおすすめアカウントは2つめに設定するようにしましょう。

CSSの知識がなくても大きく出来るので、ボタンを少し大きくしたい場合は[Large Button]にチェックを入れるようにしましょう。

ツイートボタンの見た目をオリジナルにしたい場合は、CSSを編集することで行なえますが、ツイートボタンの仕様上、やや上級者向けの方法です。

こちらの方法は公式サイトのツイートボタン作成機能は使えず、直接HTMLを打ち込んで作成することになります。

適切にページURLやテキストを設定する場合は、URLパラメータに関する理解も必要です。「text=」のあとにツイート本文に指定するテキストを、「url=」のあとにツイートするページURLを指定します。

ボタンデザインをカスタマイズするだけというとカンタンですが、実際にやろうと思うと前準備の段階でかなり難しいので注意してください。

また、この方法の場合はページタイトルやURLを自動取得してくれないため、自動取得するプログラムを組み込む必要があります。

出来ない場合はデフォルトのボタンで我慢するか、別途SNSボタンを挿入できるアドオン・プラグインなどの導入をしてみると良いでしょう。

ツイートボタンの実体はただのaタグですので、ここまでの理解が追いつけば自由にカスタマイズ可能です。

このようにデザインのカスタマイズ自体は簡単ですが、ツイートボタンとしての機能をもたせることが難しいので、よくわからない場合は下手に触らないほうが良いでしょう。

ツイートボタンを設置するだけならとても簡単なほか、共有用のシェアボタンとしても活躍するので、SNS系のボタンを一つも設置していない場合は、試しにツイートボタンを設置してみると良いでしょう。