【無料】ノーコードWebflowにInstagramを埋め込む方法

くりたまさと
Masato Kurita
栗田将人
【無料】ノーコードWebflowにInstagramを埋め込む方法
【無料】ノーコードWebflowにInstagramを埋め込む方法

「WebflowにInstagramをはめ込みたいけど、やり方がわからない。Instagramの更新に合わせて自動で更新させる方法はないのかな?」

と悩んでいる方のために今回はWebflowにInstagramを埋め込む方法と埋め込んだInstagramを自動更新させる方法を解説していく。

Instagramを自動更新させる方法とは以下の2つだ。

  1. カスタムコードを使用する方法
  2. WebflowのCMSを使用する方法

俺がおすすめする方法は①である。その理由はランニングコストを削減できるからだ。

②の方法ではWebflowのCMSプラン月16ドルの購入が必須になるため、月々の管理料が高くなってしまう。カスタムコードで実装すれば、月12ドルのWebflowの最安価格でInstagramを埋め込み自動更新させることができる。

今回はおすすめ方法①のみを解説する。

【コピペで完了】ノーコードWebflowに埋め込んだInstagramを自動更新させる方法

この方法を実践するのに参考にしたサイトは以下の3つだ。

  1. https://toriton.link/coding/insta_embed/
  2. https://yamatk12.net/instagram-api-embed/
  3. 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の項目に記入しよう。

【STEP5】Instagram読み込むJSコードをWebflowに記入する

【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の制作依頼なども受けつけているので制作に困った方はフォームより質問・依頼などをしていただければ幸いだ。それではまた。

情報追加はツイッターで告知します。

Webflowの最新情報や使い方は新しくなる度に更新していく予定です。

情報の更新や便利な使い方はツイッターでつぶやきます!

是非フォローお願いします!

2023年1000万チャレンジ中↓
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup

併せて読むとおすすめの記事▼

【全3パターンまとめ】Webflowにフォントを追加する方法

Webflowでフォントを追加する方法を知りたいですか?本記事ではWebflowにフォントを追加する方法を全3通りをまとめて解説しています。Google、Adobe、カスタムフォントの追加方法を知りたい方は是非ご覧ください。

Read more...

【Webflow】今日から使える無料のテンプレート10選

Webflowで初心者でもスグに使えるテンプレートを知りたいですか?本記事ではWebflowの今日から使えるテンプレートをジャンル別にまとめました。Webflowでテンプレートを使用して自社サイトを自作してみましょう。

Read more...

【日本旅・持ち物】宿のサブスクADDressで日本一周するのに必要な持ち物

こんにちは、今年の4月から宿のサブスクを利用しながら日本一周旅行を始めたカナです。※宿のサブスク「ADDress」の詳細はこちらの記事で紹介しています↓リンク本記事のテーマは旅に関する大きな悩みのひとつ持ち物。ぜひご覧ください。

Read more...
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。