▶【当サイト限定】1000円引きでデリバリーを利用する方法

【はてなブログ】Twitterのフォローボタンにフォロワー数を表示させる方法【画像あり】




こんにちは。とれも(@toremoro33)です。

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

そのため、少しずつですがフォロワー数が増えてきたので今回表示させることにしました。

こんな感じです。

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

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

Twitterのフォローボタンのコードを取得する方法を解説していきます。

Twitter Publish

まずは上記にアクセスします。

アクセスすると「What would you like to embed」と表示されたページが出てきます

f:id:rse3:20171026141951p:plain
TwitterのURLを入力する箇所がありますが、とりあえずこれはスルーします。

f:id:rse3:20171026142010p:plain

下の方にいくと「Or browse your options below」というページが表示されます

f:id:rse3:20171026142919p:plain
「Twitter Button」をクリックします。

一番右にあるやつですね。

クリックすると「Select the button youd like to use」と表示されます

f:id:rse3:20171026143459p:plain
ここで、左から2番目の「Follow Button」をクリックします。

f:id:rse3:20171026144308p:plain

そのあとはこちらの画面が表示されるので、自分のプロフィールのURLツイッターIDを入力して、Previewをクリックします。

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

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

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

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

f:id:rse3:20171026145405p:plain

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

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

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

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

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

補足

アカウントを変更したため、画像とIDが違います

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

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

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

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

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

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

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

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

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

貼る場所は、デザインカスタマイズサイドバープロフィールです。

f:id:rse3:20171026162123p:plain

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

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

最後に

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

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



当サイトおすすめ記事

コメントを残す

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

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