はてなブログでTwitterのフォローボタンをフォロワー数を付けて表示する方法をわかりやすく説明します【画像あり】

SPONSORED LINK



こんにちは。とれもです。

今までツイッターのフォローボタンにフォロワー数を表示させていなかったのですが、フォロワー数が多いとフォローしてみようという心理があるらしいので、少しずつですがフォロワー数が増えてきたので今回表示させることにしました。

こんな感じです。

そこまでフォロワー数は多くないですが笑

備忘録の為にTwitterのフォローボタンをフォロワー数を付けて表示する方法を画像付きで詳しく紹介していきます。

 

目次

Twitterのフォローボタンコード取得方法

1以下のサイトにアクセスします

Twitter Publish

2What-would-you-like-to-embedと表示されたページが出てきます

f:id:rse3:20171026141951p:plain
とりあえずこれは気にしないで下にスクロールします

3Or-browse-your-options-belowというページが表示されます

f:id:rse3:20171026142010p:plain

4Twitter-Buttonsを選択します

f:id:rse3:20171026142919p:plain
一番右にあるやつですね。

5Select-the-button-youd-like-to-useと表示されます

f:id:rse3:20171026143131p:plain

6Follow-Buttonを選択します

f:id:rse3:20171026143459p:plain
左から2番目のやつです。

7Follow-Buttonのページが表示されます

f:id:rse3:20171026143841p:plain

8Paste-a-profile-URL-or-usernameに入力

f:id:rse3:20171026144308p:plain
自分のプロフィールのURLツイッターIDを入力して、Previewをクリックします。

※どちらでも表示は同じです。

自分のプロフィールのURLを入力したい場合はこちら

f:id:rse3:20171026145102p:plain
PCで操作していますが、上のURLをコピーする。

例として僕のプロフィールのURLを使用します。

から始まるツイッターIDを入力したい場合はこちら

f:id:rse3:20171026145405p:plain
こちらも例として僕のプロフィールのURLを使用します。

ツイッターIDは@~と書かれているやつです。(@もちゃんとコピーしましょう)

①か②のどちらかを入力して、Previewをクリックしるとコードが表示されます。

9コードが表示されます

f:id:rse3:20171026150410p:plain
Copy Codeをクリックするとコピーされます。

10ブログ内の貼りたいところに貼る

ブログ記事にそのまま貼れば表示されます。


貼ってみたのがこちらです。

ただ、これだけではフォロワー数が表示されません。

以下でフォロワー数を表示させる方法を紹介します。

 

フォロワー数を表示させる方法

先ほど取得したコードの「data-show-count=”false“」falsetrueに変換するだけです。

変換したコードがこちらです↓
「data-show-count=”true“」

 


貼ってみたのがこちらです。

フォロワー数が表示されていますね。

 

サイドバーに表示させる方法

f:id:rse3:20171026160823p:plain
サイドバーにはこのように表示されています。

デザインカスタマイズサイドバープロフィール

f:id:rse3:20171026162123p:plain
ブログの説明のところに先ほど取得したコードを貼り付けます。

また、その際にフォローボタンの表示するのチェックを外します。

そうするとこのように表示されます。
f:id:rse3:20171026160823p:plain

 

まとめ

Twitterのフォローボタンをフォロワー数を付けて表示する方法を紹介しました。

ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)