CULTUREどっとねっと

現代文化とカルチャーと時々音楽を主に発信していく場。

MENU

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

スポンサードリンク

おすすめ記事1.土日暇なら何をする?有意義な休日の過ごし方を紹介します。
2. 世界の歌姫Bjork(ビョーク)を1500円で見た話。
3.今はアプリでお金が貯まる時代!おすすめ無料節約アプリを紹介します!
4. 『Nintendo Switch』おすすめゲームソフト10選!迷ったらこれ!

f:id:rse3:20171026165031p:plain

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

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

こんな感じです。

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

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


目次

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

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

Twitter Publish

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

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

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

f:id:rse3:20171026142010p:plain

4.Twitter Buttonsを選択します

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

5.Select the button you'd like to useと表示されます

f:id:rse3:20171026143131p:plain

6.Follow Buttonを選択します

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

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

f:id:rse3:20171026143841p:plain

8.Paste 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のフォローボタンをフォロワー数を付けて表示する方法を紹介しました。

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