Webサイトにインスタグラムギャラリーを設置するElfsightアプリ

2022年2月17日2023年4月9日

当ページのリンクには広告が含まれています。

Webサイトにインスタグラムのギャラリーを並べたい時にはwordpressのプラグインやギャラリー用URLを作成し貼り付けるだけで表示してくれるサービスがあります。

調べればいくつか出てくるのですが、この記事で紹介するのはElfsightサービスの中のInstagramフィードといわれるウィジェットです。

※あるのはインスタグラムのウィジェットだけではありません。たくさんの種類のウィジェットがあります！↓↓↓
https://elfsight.com/ja/widgets/

簡単な方法でクォリティ―の高いインスタグラムのギャラリーを設置できるのでご紹介していきます！

Elfsight

Elfsight公式サイト

まずは無料でメールアドレスを登録できるのでしましょう。

ログイン後は上記画像のウィジェット機能を確認できるマイページにつながります。

ちなみに全て英語表記なので、日本語翻訳に変換したほうが分かりやすいです。chromeブラウザで日本語に変換することができます。

画面赤枠のInstagram Feedをクリックして設定開始です。

実際にインスタグラムウィジェットを設定してみる

手順1

Instagram Feedをクリックするとこのページに移ります。

このページはインスタグラムの画像をどのような形で表示させるかのテンプレートを決めることが出来ます。

今回は一番上の左側、上の画像のようなギャラリーで進めていきます。

このギャラリーはスクロールで横にずらしながら複数の画像を閲覧する事が出来ます。

スマホでは横にスワイプして見ることが出来ます。

もちろんレスポンシブに対応済みです。

手順2

SOURCE TYPEの選択画面が3つから選べるので用意できるものを選びましょう。

左から

Business Account(ビジネスアカウント)

FacebookアカウントでInstagramビジネスアカウントを表示したい場合にFacebookに接続後、承認確認されるので、確認後自動的に接続可能の画面に切り替わります。

Personal Account(個人アカウント)

Instagramアカウントにアクセスし承認することで、自動的に接続可能の画面に切り替わります。

Hashtag(ハッシュタグ)

これはハッシュタグをつけた投稿の表示です。

この記事ではインスタグラムでHow to connect an account I don’t own?からURLを依頼者に渡しリンクから承認後、表示させることを例として説明していきます。

※How to connect an account I don’t own?について
各画面の下にアンダーラインでHow to connect an account I don’t own?と書いてあります。
クリックするとURLが出てくるのですが、フェイスブックやインスタグラムの所有者ではない人が接続する場合にそのURLをアカウント本人にクリックしてもらって、アカウント画面で承認してもらうと自動的にギャラリーが設定可能となります。
依頼を受けてギャラリーを設置するときにその依頼者のアカウント情報が必要になるというわけです。