アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

3分でできた!はてなブログにインスタグラムのフィードを表示させる方法

f:id:simpledancer:20170130013241j:plain

 

もともとアメーバブログで作っていた個人のダンスの告知ブログを

せっかくはてなブログproにしたこともあり、はてなに変更しよう!と決めて

新たに1つブログをまた作ることにしてみました。

 

自分のダンスの活動用のブログなので

  • 写真が多い方がいい
  • フォロワーが欲しいのでインスタグラムのフィードを埋め込みたい
  • お問い合わせページを作りたい

というのをまず決めて、インスタを表示する方法を調べてみました。

 

一番簡単な方法

まず、サイドバーに表示をさせたかったのですが、幾つか方法がありましたが

2種類やってみたのですが、一つ目の方が私はうまく表示できなかったのと

InstagramのユーザーID、アクセストークンをInstagramdeveloperから取得しなくてはならなくて結構時間がかかるかなと思ったので(もともとアプリの制作のために取得はしていたのですが)

snapwigitというサイトから作る方が恐ろしく簡単。だったのでご紹介します

 

SnapWidgetでフィードを埋め込む方法

1.まずSnapWidgitにアクセスします。

SnapWidget | Instagram Widget

ログインはFBのアカウント持ってたら色々入力しなくて済むので楽。

f:id:simpledancer:20170219113548p:plain

2.ログインしたら、Get Your Free Widgetを押して自分のインスタアカウント名を入れます。あと希望の設定を入れていきます。私はもともとの設定をとりあえず変えずに。

f:id:simpledancer:20170219113845p:plain

 

3.

表示形式が色々出てくるので

私は文章とかはいらないので写真のみの

3段表示で見やすくしたかったのでGRIDを選択しました。そしてGetwidgetをポチります。

f:id:simpledancer:20170219114148p:plain

4.そのあと貼り付け用のコードが生成されるのでそれをコピーして自分のはてなブログの デザイン>カスタマイズ>サイドバー>モジュールの追加>

でHTMLを選択してコードを貼り付け→適用。

f:id:simpledancer:20170219114534p:plain

こんな感じで表示が成功しました!

表示数を増やしたければ2のLayoutの数字を変更したりすると良いです。

ITエンジニアの無料カウンセリング【ポテパンフリーランス】

参考にさせていただいたブログ

 

もう少し時間がかかるかなと思ったのですが、意外にもあっけなく簡単に終わりました。

参考にさせていただいたブログはこちらです↓すごくわかりやすかったです!

www.mukaikaze.net