2017/06/29

SnapWidgetを使って、ブログやホームページにインスタグラムを表示！

クリエイター様や企業様におすすめしたいインスタ活用術、写真を簡単にまわりと共有できるSNS、インスタグラムをホームページ上に簡単にアップさせる方法をご紹介します。

Contents

SnapWidgetでコードを作成

PCブラウザからSnapWidgetにアクセスします。

画面下のEmbed your photos and videosから赤枠のFREE、INSTAGRAMの表示のあるレイアウトを選択。

PROのものを使用すると有料になるがさまざまな機能が追加したレイアウトを使用できるが、今回は無料で使えるサービスを紹介なので割合します。

CREATE YOUR FREE WIDGETをクリックすると作成画面に切り替わるので作成したいページに合うようにカスタマイズしていきます。

クリックするとポップアップが表示されるのでinstagramアカウントにログインします。

サムネイルサイズ、画像の表示サイズを設定

レイアウト、初期設定では3×3になっているので好きなレイアウトを設定

画像にボーダーをつけるかつけないかの設定

背景色を16進数で設定

画像と画像の間の余白を設定

画像の上にカーソルを合わせたときのエフェクトを設定

シェアボタンの表示をするかしないかの設定

レスポンシブ設定、スマホなど画面が小さくなったとき自動的にサイズ調整をするかしないかの設定

GET WIDGETをクリックするとコードが作成されます。

作成したコードをホームページやブログに貼り付けをします。

HTMLの<body>タグの中好きな場所にコードを張り付けると以下のように表示され、

このようにタグを張り付けるだけで簡単にインスタグラムにアップした写真を表示することができます。

よければフォローもお願いします。