こんにちは。
emiです。
今回は、先日使用したインスタグラムの画像を
無料で 簡単に いい感じに
サイトに表示できるサービスを紹介します。
作れるもの
SnapWidget無料サービスを使用しています。
インスタの画像をクリックした先は、SnapWidgetのページとなります。
（Instagramに直接リンクさせたい場合は、6.60USD/月程度の課金が必要です。）
See the Pen SnapWidget by emi (@emi-jp) on CodePen.
メリット・デメリット
SnapWidgetを使用するメリットは、
・コードの取得・設置が簡単なこと。
デメリットは、
・レイアウトがPCとスマホで同じになること。
（3×2個の表示設定すると、PCもスマホも同じとなる。）
（スマホ用のウィジェットを別に設置して、PC用を非表示にすれば一応解決できそうですが、
変更方法ご存知の方教えていただきたいです…!）
・無料版だとリンク先がSnapWidgetのページになること。
デメリットは、課金することでカバーできます。
準備するもの
- Instagramログイン情報
- SnapWidgetのアカウント（これから説明）
SnapWidgetの使い方
主な使い方は、
「①アカウント登録」→「②ウィジェットの設定」→「③取得コードを貼付」
です。
①SnapWidgetのアカウント登録
(1)SnapWidget公式ページにアクセスし、画面右上の「SIGN UP」から登録開始
(2)登録情報を入力して「SIGN UP」ボタンをクリック
②ウィジェットの設定
(3)「CHOOSE A SERVICE」をクリック
(4)「INSTAGRAM」をクリック
(5)レイアウトを選ぶ（今回はウィジェットレイアウト）
(6)「CONFIGURE WIDGET」をクリック
(7)下方の「Continue」から次へ進みます。
14日間無料お試しの案内が出ますが、私は登録しませんでした。
下方の「Continue」から次へ進みます。
(8)Instagramへ接続する
「Username」をクリックすると、Instagramへ接続するように案内が出ます。
(9)「SIGN IN WITH ●●」からインスタグラムに接続
個人アカウントの場合は、「SIGN IN WITH INSTAGRAM」からインスタグラムに接続
（ビジネスアカウントの場合は、「SIGN IN WITH FACEBOOK」から接続）
(10)ここまでで投稿した画像のウィジェットが表示されます。
設定はそのままでも表示されますが、下方の「Responsive」を「ON」にしておくのがおすすめです。スマホなどの小さい画面で確認する時も画面からはみ出ないように調整してくれます。
③貼付コード取得
(11)「GET WIDGET」からコード取得
設定はそのままでも表示されますが、下方の「Responsive」を「ON」にしておくのがおすすめです。スマホなどの小さい画面で確認する時も画面からはみ出ないように調整してくれます。
SnapWidgetを使用しない方法
Instagram Graph APIを使ってWebサイトに表示できます。
下記記事などを参考にしながら、設置できますが、初めはかなり難しかったです。
まとめ
インスタグラムの画像表示があると、サイトが華やかに見えるので、
最近は設置をお願いされることが多いです。
無料サービスを使用するとすべてが思い通りにはならないこともありますが、
簡単なのでお客様に納得いただけるようであればこの方法が
時間やコストの削減につながり良いのではないかと思います。
以上です！
