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

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

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

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

Read more...

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

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

Read more...

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

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

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

#
Webflow 使い方
アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。