雑記ブログ卒業

生活に役立つ雑記ブログ

簡単!はてなブログにTwitterのフォローボタンを設置する方法

こんにちは。「ざっきぶろぐ」です。

 

皆さんの中には、はてなブログを使っている方が多いと思います。更新したらTwitterでファンの方にお知らせしたいですよね。でも、サイト内にフォローボタンがなければ、誰もフォローしてくれません。

 

そこで今回の記事では、「はてなブログにTwitterのフォローボタンを設置する方法」をご紹介します。手慣れている人は5~10分もあればできますので、ぜひ試してみてください。

 

f:id:zakkiblog:20190415165809p:plain

 

フォローボタンを設置した完成形

私自身このサイトで、フォローボタンを設置しています。はてなブログの「読者になるボタン」と一緒にTwitterのフォローボタンを設置しました。完成形はこんな感じです。

 

f:id:zakkiblog:20190415165249p:plain

 

私はサイドバーに設置しています。クリックするとTwitterの画面に飛びます。はてなブログの場合、Twitterのコードさえ取得すれば、あとは貼り付けるだけなので、とても簡単です。

 

STEP1 埋め込みコードの取得

まずはフォローボタンの埋め込みコードを取得します。

下記の「Twitter publish」の検索画面に自分のTwitterのURLを入力します。

 

Twitter Publish

 

f:id:zakkiblog:20190415082629j:plain

Twitter publish

 

ここに入力するURLはアカウントではありません。

TwitterのURL、https://twitter.com/zakkiblog の一番後ろの一単語だけ入力します。

 

/ の後ろの文字です。私の場合はzakkiblogと入力します。

 

そのまま下の方にスクロールし、

 

f:id:zakkiblog:20190415083917p:plain

Twitter publish

 

Twitter Buttons を選択します。

Embedded Timeline はタイムライン形式の埋め込みコードを作りたい人向けです。

今回は、フォローボタンの設置なので、Twitter Buttonsです。

 

f:id:zakkiblog:20190415084520p:plain

Twitter publish

 

Follow Button を選択します。

再度、URLを入力し、Copy Code(コピーコード)をクリックすればコードのコピーが完成です。

 

f:id:zakkiblog:20190415173034j:plain

コピーできるとこの画面が出ます。

 

では早速、完成したコードをサイトに貼り付けましょう。

 

STEP2 コードの貼付け

私の場合、サイドバーのプロフィールに貼り付けました。

 

サイドバーに貼り付けるには、

はてなブログのダッシュボード > デザイン > カスタマイズ > サイドバー > モジュールを追加 > HTML に貼り付けるとできます。

 

f:id:zakkiblog:20190415171519j:plain

 

このコードがあれば、はてなブログの本文中にも挿入可能です。HTML編集で、このコードを貼り付ければ、フォローボタンをどこでも表示させることができます。

 

まとめ

今回は、はてなブログにTwitterのフォローボタンを設置する方法についてまとめてみました。この記事通りに行えば誰でも簡単に設置できるので、ぜひ試してみてください。

 

もしこの記事が良いと思った方は、Twitterのフォローお待ちしています!

それではこの辺で、おしまい。