2017/06/29

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


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

 

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>タグの中好きな場所にコードを張り付けると以下のように表示され、

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

 


マイカバ!インスタグラムアカウント

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

           
%d人のブロガーが「いいね」をつけました。