Twitterのフォローするボタンの設置方法！公式サイトが新しくなっています！

こんにちは！

TATSUです。

今回はよく見かけるこのボタンの設置方法です！

よく見かけますよね？
このボタン。
ブログサイトのサービスで設置できるボタンとは違ってフォロワーを増やすことができるかもしれないボタンなので設置しておけるといいですよね！

目次

Twitterの公式サービス

このTwitterのフォローするボタンですが、実は公式のサービスなんです。
以前とサイトのアドレスや、デザインが変わっているのでこちらで確認していただければと思います。

ボタン作成サイト
Twitter Publish

まだ日本語サイトに対応していないのか英字で表記されます。
なのでサイトを翻訳して使用しましょう。

サイトのデザインが結構奇抜なバックカラー。
真ん中のボックスに何をしたいか入れるとそのコンテンツのコードを作ってくれるようです。

もしくはサイトを下に進めるとこんな表示がありますので
右側のTwitterボタンを選択しましょう。

使用するボタンを選択します。
今回はフォローボタンなので左から二番目を選択。

そうするとこのようなボックスが出てきますのでここに自身のTwitterのユーザー名を入力しましょう。

あなたが望む場合を除き、私たちが必要なのはこれだけです。
変な日本語ですねw
翻訳機能なんてこんなものですねw

ここにHTMLのコードが出てきますのでこれをコピーして
自身のサイトに貼り付けましょう。

【 フォローする】の横に人数を表示しよう！

これでフォローボタンの設置は完了です！
でもこれだけだと実は私のサイトに設置してあるような表示にはなりません。

実はコードを少しでもいじるだけでこの人数を表示ができてしまうんですね。

先ほどコピーしたコードの中に”false”というコードが含まれています。

私のアカウント名のところは伏せてありますが、コピーするとこんなコードになっています。

＜a href="https://twitter.com/✖︎✖︎✖︎✖︎?ref_src=twsrc^tfw" class="twitter-follow-button" data-show-count="false">Follow @✖✖✖✖＜/a＞＜sript async src="https://platform.twitter.com/widgets.js" charset="utf-8"＞＜/script＞

上記の斜体になっている部分です。

ここをtrueに変更しましょう。

ここのコードを変更することによってフォローするボタンの横に吹き出しで〇〇人にフォローされています。という表示が出ます。

なんとなく表示されていた方がいいですよね。

こんな感じで簡単にフォローするボタンが作れてしまいますので自分のサイトに貼り付けてみてはいかがでしょうか？