StudioでInstagramの投稿を埋め込む方法を解説

「クライアントにStudio内に投稿を埋め込めるか質問された」「お店の投稿をStudio内に埋め込みたい」

そんな方も多いのではないでしょうか。

この記事では、Studioを使ってInstagramのフィードを簡単に埋め込む方法を解説します。

具体的な手順について詳しく説明していきますので、ぜひ参考にしてください。

StudioでInstagramフィードを埋め込む手順

SnapWidgetの使い方

SnapWidgetを使ってInstagramフィードを表示するための基本的な使い方を紹介します。

SnapWidgetは、Instagramフィードを簡単にウェブサイトに埋め込むことができるサービスです。

StudioでInstagramフィードを埋め込む際にSnapWidgetを利用すると、コードを記述することなく視覚的にフィードをカスタマイズできます。

SnapWidgetでアカウントを作成する

まず最初にSnapWidgetのアカウントを作成しましょう。

SnapWidgetのウェブサイトにアクセスし、アカウント作成ページから必要事項を入力してアカウントを作成します。アカウントを作成したら、Instagramフィードを埋め込むためのウィジェットを作成します。

SnapWidgetのアカウントを作る

Instagram用のウィジェットを選ぶ

まずはSnapWidgetにある「CREATE A NEW WIDGET」をクリックします。

そうするとウィジェットが一覧表示されていおるページに遷移するので、そこでInstagramに対応しているウィジェットの中からお好みのデザインを選びます。

プランごとに選ぶことができるウィジェットが異なるため注意が必要です。今回は「Instagram Grid」を選択します。

Instagramアカウントと連携する

選択したウィジェットをInstagramアカウントと連携します。

SnapWidgetのウィジェット設定画面でInstagramアカウントのユーザー名またはアカウントIDを入力して連携します。

連携が完了するとウィジェットにInstagramフィードが表示されます。

ウィジェットのカスタマイズ

SnapWidgetでウィジェットの表示設定やデザインをカスタマイズしましょう。

ウィジェット設定画面ではフィードの表示件数、表示順序、画像のサイズ、ウィジェットの背景色やフォントなどを調整できます。

今回は以前運営していたトイレ探しアカウントと連携します。

Studioに埋め込む方法

コードの取得

SnapWidgetから埋め込み用のコードを取得します。

SnapWidgetのウィジェット設定画面にある「UPDATE & GET WIDGHT」をクリックし、「COPY TO CLIPBOARD」を押して埋め込みコードをコピーします。

このコードをStudioのプロジェクトに貼り付けることで、Instagramフィードを表示できます。

StudioのプロジェクトでHTMLブロックを使用する

サイドバーのEmbedリストにある「Blank」を選択し、キャンバス上に配置します。

その後、右側のサイドパネルを開き、埋め込みコードの部分に先程コピーしたコードを貼り付けます。

表示の確認

コードの埋め込みが終わったら、Instagramのフィード投稿が正しく表示されているか確認しましょう。

Studioのプレビュー機能を使ってInstagramフィードが正しく表示されているか確認します。

問題があればSnapWidgetのウィジェット設定画面で修正を行い、コードを更新すると良いでしょう。。

API連携を使った高度な設定

API連携の準備

StudioでAPI連携を行うための基本的な準備について説明します。

API連携では、InstagramAPIを使って、より高度な機能を実現できます。

例えば、特定のハッシュタグの投稿を表示したりユーザーの投稿をリアルタイムに更新したりすることができます。

しかし、Facebookのプロアカウントにする必要があったり呼び出し制限数があるなどいくつかの注意点もあります。

Instagramのアクセストークンを取得する

Instagram APIのアクセストークンを必要に応じて取得します。

InstagramAPIを利用するには、アクセストークンが必要です。アクセストークンは、Instagramの開発者アカウントで取得できます。

StudioでAPIのURLを設定する

StudioでInstagram APIのURLを正しく設定する方法を解説します。

Studioのプロジェクトで、InstagramAPIのURLを設定します。APIのURLはInstagramの開発者ドキュメントで確認できます。

レートリミットの回避方法

API利用時にレートリミットを回避するためのヒントを紹介します。

InstagramAPIには1時間にアクセスできる回数に制限があり、レートリミットを超えると、APIへのアクセスが制限されます。

レートリミットを回避するためにアクセス間隔を調整するなどの工夫が必要です。

まとめ

この記事ではStudioにInstagramのフィード投稿を埋め込む方法について解説しました。

飲食店やECサイトを運営している事業者で自社のサイトに運営しているInstagramの投稿を埋め込みたいという方も多いでしょう。

そんな方は、ぜひ今回ご紹介した方法を試してみてください。