北西9000km

写真で振り返る生活

【InstaWindow】はてなブログのサイドバーにInstagramのフィードを表示したい

デフォルトではPC版のサイドバーにSNSを掲載できない

久しぶりにはてなブログにログインすると、サイドバーにどこか寂しさを感じた。

ちょうど写真用のInstagramアカウントを作成したところだったので、そこに最新の投稿を乗せられるか調べてみることにした。

 

調べてみるとどうやらLightwidgetInstaWidgetが主流のようだ。

しかし、LightWidgetは無料版だとHTTPSに対応しておらず($10で可能)、InstaWidgetはどうやら終了している?らしい。

Instagramをサイドバーに表示する方法

そこで代替案として、InstaWindowを使用した。

insta-window-tool.web.app

 

f:id:around7pm:20200629234529p:plain

こういったことにあまり詳しくない私にとっても、やり方は至って簡単だった。

 

ユーザー名のところに表示させたいアカウントのIDを入力し、好みに合わせて数字やチェックボタンを調整する。

プレビューを更新、というボタンをクリックすると、

f:id:around7pm:20200629235240p:plain

このようにブログで表示される形でのプレビューを確認することができる。

あとは下に表示された埋め込みコードをコピー

 

はてなブログの「デザイン」→「カスタマイズ」→「サイドバー」を選択し、「モジュールを追加」をクリック。

f:id:around7pm:20200629235937p:plain

 

「モジュールを追加」→「</>HTML」から、先ほどコピーしたものをペーストするだけだ。タイトルは適当にInstagramとでもしておく。

f:id:around7pm:20200630000229p:plain

 

「適用」をクリックして変更を保存すれば、サイドバーには既にInstagramのフィードが表示されているはずだ。

 

終わりに

このブログは白と黒のシンプルなデザインテーマを利用しているため、サイドバーにフィードを表示することで少しだけではあるが華やかさを添えることができたような気がしている。

 

このサービスは現時点(2020年6月30日)では無料で利用することができるが、Freeプランの対象は月間3万PVまでという縛りがあるようだ。

f:id:around7pm:20200630000746p:plain

 

こちらもどうぞ

 

around7pm.hatenablog.com

around7pm.hatenablog.com