2017/06/29
SnapWidgetを使って、ブログやホームページにインスタグラムを表示！
クリエイター様や企業様におすすめしたいインスタ活用術、写真を簡単にまわりと共有できるSNS、インスタグラムをホームページ上に簡単にアップさせる方法をご紹介します。
Contents
SnapWidgetでコードを作成
PCブラウザからSnapWidgetにアクセスします。
画面下のEmbed your photos and videosから赤枠のFREE、INSTAGRAMの表示のあるレイアウトを選択。
PROのものを使用すると有料になるがさまざまな機能が追加したレイアウトを使用できるが、今回は無料で使えるサービスを紹介なので割合します。
CREATE YOUR FREE WIDGETをクリックすると作成画面に切り替わるので作成したいページに合うようにカスタマイズしていきます。
作成手順
Username
クリックするとポップアップが表示されるのでinstagramアカウントにログインします。
Thumbnail Size
サムネイルサイズ、画像の表示サイズを設定
Layout
レイアウト、初期設定では3×3になっているので好きなレイアウトを設定
Photo Border
画像にボーダーをつけるかつけないかの設定
Bacground Color
背景色を16進数で設定
Photopadding
画像と画像の間の余白を設定
Hover Effect
画像の上にカーソルを合わせたときのエフェクトを設定
Sharing Buttons
シェアボタンの表示をするかしないかの設定
Responsive
レスポンシブ設定、スマホなど画面が小さくなったとき自動的にサイズ調整をするかしないかの設定
GET WIDGETをクリックするとコードが作成されます。
コードの貼り付け
作成したコードをホームページやブログに貼り付けをします。
HTMLの<body>タグの中好きな場所にコードを張り付けると以下のように表示され、
このようにタグを張り付けるだけで簡単にインスタグラムにアップした写真を表示することができます。
よければフォローもお願いします。
