SnapWidgetって？Instagramのウィジェットを3分で作成できるツールについて

近来、更新感のあるWebサイトが増えてきました。
その方法はニュース一覧をつけたり、ブログ一覧をつけたり、ソーシャルのタイムラインを載せたりと多種多様です。
「このWebサイトは劣化していない」とユーザーに感じてもらうためにも必要になってきますよね。

また、Instagramのウィジェットをトップページにおき、お洒落に更新感を出すWebサイトも増えてきました。
そんなInstagramのウィジェットを3分で設置できる「SnapWidget」を紹介します。

WebサイトやブログにInstagram、Twitter、Facebookの写真を表示するためのヴィジェットを作成するツールです。

Instagram、Twitter、Facebookに新しい写真や動画を投稿すると、ウェブサイトのウィジェットが自動的に新しいコンテンツに更新されるので、投稿の度にHTMLやCSSを触る必要はありません。

SnapWidget は基本的な機能は無料で使えます。
ただ、画像をクリックした先のページはInstagramでは無くSnapWidgetのページに遷移して拡大画像と広告がでるようになっておりますので、広告を消したいのであれば有料版に登録してください。

また、無料版であれば登録せずともヴィジェットが作成できます。

それでは使っていきましょう。

SnapWidget

トップページに遷移して、スクロールしていくと人気のヴィジェットが6つ並んでいるコンテンツがありますので、「CREATE YOUR FREE WIDGET」をクリックしてください。

ヴィジェット作成画面に遷移しますので、ヴィジェットを作成していきます。
「PREVIEW」を押してみましょう。

Instagramへログインするためのポップアップがでてきますので、ログインします。

すると、右上にログインしたアカウントのタイムライン画像が表示されます。

これでヴィジェットの完成です。

「GET WIDGET」をクリックするとWidgetの埋め込みコードが出てきますので、それをWebサイトに埋め込めば、更新感のあるWEBサイトの完成です。

ヴィジェットについての細かい設定もできますので、見ていきましょう。

よく使用する設定だけをピックアップして説明していきます。

① Thumbnail Size
表示されているサムネイルのサイズを変更することができます。
デフォルトでは125pxで設定されていますが、Webサイトに合わせ変更することができます。

② Layout
ヴィジェットの行数と列数を変更することができます。

③ Background Color
ウィジェットの背景色を変更できます。
16進数カラーコードで指定します。

④ Photo Padding
サムネイル間の幅の大きさを変更できます。
デフォルトでは5pxとなっていますが、Webサイトに合わせ変更することができます。

⑤ Hover Effect
サムネイルにホバーした際のエフェクトを選択できます。

Fade In: サムネイルが少しぼかした状態になりホバー時にぼかしが消えるエフェクト

Fade Out: ホバー時にサムネイルが少しぼかした状態になるエフェクト

Zoom In: ホバー時にサムネイル画像が少し拡大するエフェクト

Likes&Comments: ホバー時にサムネイル画像の「いいね！」と「コメント」の数を表示してくれるエフェクト

⑥ Responsive
「Yes」にするとタブレット・スマホサイズにヴィジェットが対応してくれます。

設定を変えると右上のプレビューが自動更新されますので、すぐ確認できます。

Instagramのヴィジェットが簡単に作成できるツール「GET WIDGET」を紹介しました。

FacebookやTwitterのヴィジェットも作成できるらしいですが、使用されている方はInstagramが多いですね。

今回、紹介できなかったおしゃれなヴィジェットのレイアウトも用意されているので、Webサイトに更新感を出したい方は是非、使ってみてください。