1. マニュアル
  2. 外部サービス連携
  3. 外部サービスとの連携
  4. Instagramの写真をホームページに表示する(ウィジェット/個別投稿)
  5. 方法1:Instagramウィジェットを埋め込む(複数の投稿を一覧表示)

方法1:Instagramウィジェットを埋め込む(複数の投稿を一覧表示)

Instagram(インスタグラム)の投稿をホームページに一覧表示するには、「SnapWidget(スナップウィジェット)」という外部サービスを利用します。

SnapWidgetは、Instagramアカウントの投稿を自動的にウィジェットとして生成し、ホームページに埋め込むことができる無料ツールです。


※無料版では広告が表示されます。有料版を申し込めば、広告を非表示にすることができます。

※ご注意:SnapWidgetをご利用いただくには、Instagramアカウントが「ビジネスアカウント」または「クリエイターアカウント」である必要があります。

個人アカウントでは連携できませんので、必要に応じてInstagramアプリからアカウントの種類を変更してください(無料で切り替え可能です)。

  • 「SnapWidget」はリウムスマイル!外の提供サービスですので、詳しい操作方法や動作保証などに関しては弊社サポート対象外となります。ご了承のうえお試しいただけますようお願いいたします。

操作手順

SnapWidgetに登録して、Instagramのウィジェットのコードを取得する


  1. SnapWidgetにアクセスし、[CREATE YOUR WIDGET]をクリック


  1. 名前、メールアドレス、パスワードを入力して[SIGN UP]をクリック


  1. 上のボタンは無視して、下の[Compare Widgets]リンクをクリック


  1. 左側のFree Widgets の[Get Staretd]をクリック


  1. [Instagram Grid]をクリック


  1. [Username]をクリック
  2. [SIGN IN WITH INSTAGRAM]をクリック


  1. 認証画面が表示されるので、[許可]をクリック


ウィジェットのデザインを調整していきます。

① Thumbnail Size各画像のサイズを設定します。
② Layout縦と横に並べる画像の数を設定します。
③ Photo Dimensions グリッド表示の画像の比率を選択します。(正方形または3:4)
④ Photo Border枠線の表示・非表示を選択します。
⑤ Background Colorカラーコードを入力して、ウィジェットの背景色を変更します。
⑥ Photo Padding画像と画像の隙間を設定します。
⑦ Hover Effectマウスオーバー時のアニメーションを設定します。
⑧ Sharing Buttonsシェアボタンを表示するかどうかを設定します。
⑨ Responsiveスマホに対応したレスポンシブを設定する場合は[YES]を選択します。

すべての設定ができたら、「GET WIDGET」をクリックします。



  1. [COPY TO CLIPBOARD]をクリック

以上で、ウィジェットのコードの取得は完了です。



ホームページにInstagramウィジェットを表示する

SnapWidgetで取得した埋め込みコードを、リウムスマイル!で作成したページに貼り付けて表示します。

  1. リウムスマイル!管理画面の左上[PC版:プレビュー]をクリック
  2. 表示したいエリア(場所)にカーソルを合わせ、表示したい位置にある[+表示追加]をクリック

  1. 表示追加するパーツ選択画面で[+フリーページ]をクリック
  2. [+まっさらから作成する]をクリック

  1. タイトル欄に「Instagram」など、任意のタイトルを入力する
  2. 本文欄をクリック
  3. 上部ツールバーにある[埋め込みコード挿入]をクリック
  4. 黒いウィンドウの入力欄に、先程コピーしたコードを貼り付ける
  5. 黒いウィンドウの右下[埋め込みコードの挿入]をクリック
  6. 作成画面の左下[保存]をクリック

以上で、ホームページにInstagramのウィジェットが表示されます。