snapwidgetでInstagramの画像をギャラリー風に表示する

今回やりたいこと

nuxtで作成しているサイトにインスタにアップしている写真一覧を表示したい。

いくつかやり方がありそうでしたが今回は手軽なsnapwidgetで実装していこうと思います。

https://snapwidget.com/

1. サインインorログイン

スクリーンショット 2020-04-18 21.08.17.png

2. アカウントを作成する

スクリーンショット 2020-04-18 21.08.33.png

3. 表示したいSNSを選択する

スクリーンショット 2020-04-18 21.09.18.png

4. 表示したいレイアウトを表示する

今回は画像のみ表示したいので左上のグリッドのレイアウトを選択する。

スクリーンショット 2020-04-18 21.09.31.png スクリーンショット 2020-04-18 21.09.50.png

5. サムネイルのサイズと縦横で表示する数を選択する

スクリーンショット 2020-04-18 21.27.31.png

6. コードが表示されるのでこちらをコピーする

スクリーンショット 2020-04-18 21.28.00.png

7. コードをサイトに埋め込んで完成

スクリーンショット 2020-04-18 21.31.14.png

これだけで埋め込むことができました。

このままWordPressに埋め込むことも可能です。

埋め込み時のスタイルの指定を外すことでCSSでのカスタマイズも可能です。

frontendの記事一覧へ戻る