方法１：Instagramウィジェットを埋め込む（複数の投稿を一覧表示）
Instagram（インスタグラム）の投稿をホームページに一覧表示するには、「SnapWidget（スナップウィジェット）」という外部サービスを利用します。
SnapWidgetは、Instagramアカウントの投稿を自動的にウィジェットとして生成し、ホームページに埋め込むことができる無料ツールです。
※無料版では広告が表示されます。有料版を申し込めば、広告を非表示にすることができます。
※ご注意：SnapWidgetをご利用いただくには、Instagramアカウントが「ビジネスアカウント」または「クリエイターアカウント」である必要があります。
個人アカウントでは連携できませんので、必要に応じてInstagramアプリからアカウントの種類を変更してください（無料で切り替え可能です）。- 「SnapWidget」はリウムスマイル！外の提供サービスですので、詳しい操作方法や動作保証などに関しては弊社サポート対象外となります。ご了承のうえお試しいただけますようお願いいたします。
操作手順
SnapWidgetに登録して、Instagramのウィジェットのコードを取得する
- SnapWidgetにアクセスし、［CREATE YOUR WIDGET］をクリック
- 名前、メールアドレス、パスワードを入力して［SIGN UP］をクリック
- 上のボタンは無視して、下の［Compare Widgets］リンクをクリック
- 左側のFree Widgets の［Get Staretd］をクリック
- ［Instagram Grid］をクリック
- ［Username］をクリック
- ［SIGN IN WITH INSTAGRAM］をクリック
- 認証画面が表示されるので、［許可］をクリック
ウィジェットのデザインを調整していきます。
| ① Thumbnail Size | 各画像のサイズを設定します。 |
|---|---|
| ② Layout | 縦と横に並べる画像の数を設定します。 |
| ③ Photo Dimensions | グリッド表示の画像の比率を選択します。（正方形または3:4） |
| ④ Photo Border | 枠線の表示・非表示を選択します。 |
| ⑤ Background Color | カラーコードを入力して、ウィジェットの背景色を変更します。 |
| ⑥ Photo Padding | 画像と画像の隙間を設定します。 |
| ⑦ Hover Effect | マウスオーバー時のアニメーションを設定します。 |
| ⑧ Sharing Buttons | シェアボタンを表示するかどうかを設定します。 |
| ⑨ Responsive | スマホに対応したレスポンシブを設定する場合は［YES］を選択します。 |
すべての設定ができたら、「GET WIDGET」をクリックします。
- ［COPY TO CLIPBOARD］をクリック
以上で、ウィジェットのコードの取得は完了です。
ホームページにInstagramウィジェットを表示する
SnapWidgetで取得した埋め込みコードを、リウムスマイル！で作成したページに貼り付けて表示します。
- リウムスマイル！管理画面の左上
［PC版：プレビュー］をクリック - 表示したいエリア（場所）にカーソルを合わせ、表示したい位置にある
［＋表示追加］をクリック
- 表示追加するパーツ選択画面で
［＋フリーページ］をクリック - ［＋まっさらから作成する］をクリック
- タイトル欄に「Instagram」など、任意のタイトルを入力する
- 本文欄をクリック
- 上部ツールバーにある
［埋め込みコード挿入］をクリック - 黒いウィンドウの入力欄に、先程コピーしたコードを貼り付ける
- 黒いウィンドウの右下［埋め込みコードの挿入］をクリック
- 作成画面の左下［保存］をクリック
以上で、ホームページにInstagramのウィジェットが表示されます。
