オカンTECHロゴ
iPadほしい人!買う前に絶対見てほしい

はてなブログにTwitterフォローボタンを設置してフォロワー数を表示する方法

サイト内に一部広告を含みますがすべての商品・サービスはおかぺーが自信持っておすすめします!

 


f:id:beaber:20210628164354p:plain













はてなブログからTwitterアカウントにリンクを貼れるけどフォロワー数を表示することはできるのかしら?

f:id:beaber:20210628164402p:plain







貼り付けるHTMLコードの一部を変えるだけで簡単に表示できるよ

 

このページでは「はてなブログにTwitterのフォローボタン(フォロワー数を表示)を埋め込む方法」を中心に紹介。

フォロワー数を表示しない通常のフォローボタンの埋め込み方と合わせて紹介します。

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • ブログからTwitterに集客したい
  • Twitterのフォロワー数を目立たせたい
  • フォロワー数非表示版のフォローボタンしか使えない

 

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

完成イメージ

 

「はてなブログにTwitterのフォローボタン(フォロワー数を表示)を埋め込む」

 

今回は以下のようなボタンを表示させていきます。

 

 

Twitterフォローボタンの埋め込み手順

まずはデフォルト設定で埋め込む

※この先の手順はパソコンで操作してください。

STEP
Twitter Publishにログイン

Twitter Publishにアクセスする。

https://publish.twitter.com/#

STEP
プロフィールURLを入力
自分のTwitterのプロフィールURLを入力し「→」を押す。
例:https://twitter.com/★ユーザーIDに変更★

f:id:beaber:20211210001821p:plain

STEP
Twitter Buttonsを選択
右側の「Twitter Buttons」を選択する。

f:id:beaber:20211210002105p:plain

STEP
Follow Buttonを選択
左側の「Follow Button」を押す。

f:id:beaber:20211210002246p:plain

STEP
コードをコピー
「Copy Code」を押し、埋め込み用コードをコピーする。

f:id:beaber:20211210002401p:plain

STEP
HTML編集ページを表示
はてなブログの記事編集を開き「HTML編集」を押す。

f:id:beaber:20211114065050p:plain



STEP
コードの貼り付け
先ほどコピーした埋め込み用コードを張り付ける。

f:id:beaber:20211210211944p:plain

STEP
表示確認
プレビューを押し、フォローボタンが表示されていることを確認する。
手順終了です。お疲れさまでした。

f:id:beaber:20211210211958p:plain

 

フォロワー数を表示するためのひと手間

デフォルトの設定では「@〇〇さんをフォロー」というフォローボタンのみが表示されます。このコードのオプションを書き換えてフォロー数を表示させます。

 

STEP
オプション書き換え後のコードを貼る
HTML編集モードに切り替え、以下のようにコードを書き換える。
<a href="https://twitter.com/DemoOkan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">
 ↓
<a href="https://twitter.com/DemoOkan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">

f:id:beaber:20211210212438p:plain

STEP
表示確認
プレビューを確認するとフォロー数が表示されています。以上で終了です。お疲れさまでした。

f:id:beaber:20211210212451p:plain

 

 

フォロワー数は権威性になる!?

f:id:beaber:20211210011333p:plain

Googleの評価の指針に有名な「E-A-T」(Expertise(専門性)、Authoritativeness(権威性)、 Trustworthiness(信頼性))があります。

 

このうち、権威性は「誰が言っているのか」を重視しています。

この権威性を測るために、GoogleがSNSのフォロー関係(たとえばインフルエンサーからフォローされているかどうか)を見ている。という噂があります。

 

もし、本当にSNSの中にまでGoogleが踏み込んでいる場合、フォロワー数は権威性の一つになると考えられます。

 

この他、以下の記事で「E-A-T」について複数の仮説を立てていて大変参考になります。

 

oreno-yuigon.hatenablog.com

 

 

まとめ

はてなブログの記事にTwitterのフォローボタンを埋め込むには、Twitter Publish(公式のHTMLコード)を利用します。

さらに、オプションを一部変更することでフォロー数を表示することができます。

 

せっかくSNS運営をしているなら、ブログとSNSで相互にリンクを張って相乗効果を狙いましょう。

 

SNSの他、ブログ運営を始めてから試したこと、実際に収益につながったものは以下の記事で紹介しています。

 

www.okan-tech.com

 

最後までありがとうございました。

ITハンドブック
初めてのオカンにはまずはこれ!

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック?

これだけ読めばお悩み解決!オカンがIT迷子にならないためのハンドブック


入れておきたい定番スマホアプリ

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

インスタグラマー御用達!CanvaProの30日間無料トライアルの登録方法

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで解説

タクシーアプリGOを陣痛タクシーとして利用してみた!登録から使い方まで

実家のオカンに教えた得する情報

安過ぎて鼻血が出そうになる中古Apple製品買い方

安過ぎて鼻血が出そうになる中古Apple製品買い方

CanvaProの30日間無料トライアルの登録方法!期間の延長は可能?

家事との相性バツグン!Audibleを使って読みたかった本を読破

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

iPhoneでYouTubeをバックグラウンド再生する無料アプリ

オカンでも出来るインスタ攻略

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

スマホアプリだけでインスタの文字投稿を作成する方法【初心者でも簡単】

Instagram片思いチェックアプリReports Followers

Instagram片思いチェックアプリReports Followers

人気記事

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

Canvaで画像編集できるならココナラで出品して稼ごう【スマホを使った始め方】

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

【衝撃】ジブリとジャニーズの作品がネット配信されない理由は?

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

Canvaアプリで別アカウントに画像を引き継ぐには?複数登録は可能?データ移行方法を解説!

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

現役はてなブログカスタマイズ9選!トレンドはSWELL風デザインとSNS連携?

ブログ:オカンTECHの紹介

ーパソコンでわからないことがあるわ。息子が次に実家に帰ってきたら聞こう。
ースマホのプランを変えたいけどよくわからないわ。携帯ショップに問い合わせしよう。

このブログではこういった時に誰かに頼らずに自分で答えに辿り着けるオカンの「IT的自立」を目指します。


新着記事
オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2020-2024 オカンTECH Powered by Hatena Blog