%402x.svg){kind=icon}
.png)
1st Daysはこちら→【1日30分/21日】放課後の30分でWebデザイナーになろう！
「WebflowにInstagramをはめ込みたいけど､やり方がわからない｡Instagramの更新に合わせて自動で更新させる方法はないのかな？」
と悩んでいる方のために今回はWebflowにInstagramを埋め込む方法と埋め込んだInstagramを自動更新させる方法を解説していく｡
Instagramを自動更新させる方法とは以下の2つだ｡
- カスタムコードを使用する方法
- WebflowのCMSを使用する方法
俺がおすすめする方法は①である｡その理由はランニングコストを削減できるからだ｡
②の方法ではWebflowのCMSプラン月16ドルの購入が必須になるため､月々の管理料が高くなってしまう｡カスタムコードで実装すれば､月12ドルのWebflowの最安価格でInstagramを埋め込み自動更新させることができる｡
今回はおすすめ方法①のみを解説する｡
【コピペで完了】ノーコードWebflowに埋め込んだInstagramを自動更新させる方法
この方法を実践するのに参考にしたサイトは以下の3つだ｡
- https://toriton.link/coding/insta_embed/
- https://yamatk12.net/instagram-api-embed/
- https://navymobile.co.jp/instagram-graph-api
WebflowではPHPは一切使うことができないのでJSの方法を使用する必要がある｡以上の2つの参考サイトはどちらの方法でも対応できるため､好きなデザインを選び使用してほしい｡
このセクションでは以上の内容をWebflowにあわせて解説していく｡手順は以下の通りだ｡
- 【STEP1】Instagramをプロアカウントにする｜参考サイト①
- 【STEP2】Facebookアカウントと連携させる｜参考サイト①
- 【STEP3】Facebook for Developersにログインして各コード取得｜参考サイト①
- 【STEP4】アクセスコードを延長｜参考サイト③
- 【STEP5】WebflowにJSを記載｜独自
- 【STEP6】Webflow内でデザインを変更｜独自
「参考サイトばっかじゃん！」と思うかもしれないが､この記事を軸にして参考サイトを見ながらじっくり進んで見てほしい｡
最後のWebflowに記載する工程は「公開するだけ」と思いきや､デカイ落とし穴があったので俺の経験を基に落とし穴の回避方を紹介する｡
それでは､早速作業していこう｡
【STEP1〜3】WebflowにInstagramを埋め込みために必要な工程を完了させる
「Instagram Graph API」というものを使用してInstagramを自動更新させていく｡このステップは参考サイト①のSTEP1〜3とほぼ同じなので参考サイト①参考に作成してほしい｡
STEP3のアクセス許可は以下の項目を使用した｡これは参考サイト②と同じものである｡
- pages_show_list
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_manage_posts
【STEP4】Instagramのアクセストークンを延長する
アクセスコードの延長は参考サイト③を使用して延長できる｡参考サイト③の“有効期限無制限のアクセストークンを取得"の項目を探し､有効期限無制限のアクセストークンを取得しよう｡
すぐ下にInstagramプロアカウントIDの取得方法が記載されているので､併せて確認するとスムーズに進められる｡
ここまでで以下のコードをメモしていること確認しよう｡
- InstagramプロアカウントID
- アクセストークン(期限：無制限)
【STEP5】Instagram読み込むJSコードをWebflowに記入する
参考サイト①②好きな方のJSコードをWebflowに記入して該当の項目にここまでで取得したコードを記入する｡
記入するJSコードは必ず､ページの詳細設定を開き､Before </body> tagの項目に記入しよう｡
【STEP6】Webflow内でInstagramの写真表示箇所を作成する｡
今回使用するJSコードは指定したHTMLコードに画像を自動で読み込むものです｡そのため､Webflow上でDivを入れて指定のクラスを作成する必要があります｡
・Webflow内の作業
Divブロックを入れてクラスを参考サイト①の場合「insta_list」､参考サイト②は「Instagram」にする
・カスタムコードを入れる場所
ページの詳細設定を開き､Before </body> tagの項目にJSを記入｡JSはここ以外に使用してもうまく動作しません｡
今回導入したコードではWebflow内では動作の反応が見えないため､サイトを公開してから動作チェックする必要がある｡
コードを知らない人に簡単に今回のカスタムコードを簡単に説明するとしたら以下のような図になっている｡
- 親<div>
子 <img> ←自動でInstagramの写真が読み込まれる
〜〜〜〜〜〜↓指定した数
子 <img>
親</div>
親は最初にWebflow内で作成した「Instagram」のクラスを持ったDivブロックのことである｡
子は自動で読み込まれるInstagramの投稿写真である｡
子の見た目を変える(CSS)場合はカスタムコードでInstagram img と指定する必要があるがコードに慣れていないとCSSを記入するのもひと苦労だろう｡参考サイト①②ではCSSのコードも記載されているのでそのままコピーして使用するのもひとつだ｡
レイアウトだけだが､カスタムコードを回避する案を用意した｡
カスタムコードを使用せず､レイアウト変更する方法
親「Instagram」を使用してレイアウトを完結させる方法だ｡方法は簡単､親を「Grid」にして一枠の大きさを指定する方法だ｡
まぁとても単純で誰でも思いつく方法だが､俺はこの方法が一番おすすめだ｡理由はWebflow内部で完成のデザインが想像しやすいから｡
実際に以下の写真は俺が友人のサイトを作成した際に使用した方法だが空欄になっている部分に写真が入るとわかりやすくなっている｡
まとめ：ノーコードWebflowに埋め込んだInstagramを自動更新させる方法
Instagramをの導入は今後さらに需要がますと思われる｡そのため今のうちからやり方を把握しておこう｡
ちなみにこの情報はWebflow質問コーナーでも回答がでていないもので､多くの方に需要があると思われる｡「どうにか英語記事にできないか」､そんあことを思いつつ最近は日本一周を楽しんでいる｡
もしあなたがノマドワーカーに興味があれば俺のライフスタイルの記事も読んで見てほしい｡案外今より固定費が下がるかもしれないぞ｡
Webflowの制作依頼なども受けつけているので制作に困った方はフォームより質問・依頼などをしていただければ幸いだ｡それではまた｡
