仕事でinstagramに関する相談や問い合わせが増えてきているのでツールなどを調べています。今まで知らなかったツールが色々出てきたのでまとめて更新しちゃいます。

最初はinstagramの写真を、ウィジェットにして簡単にブログやサイトに設置できる『SnapWidget』について、使い方や設置方法を紹介します。

SnapWidgetとは?

SnapWidgetは登録などの必要もなく無料でinstagramのウィジェットを生成できるツールです。使い勝手はFacebookの公式ウィジェットのような感じで一瞬でウィジェットを作成できます。

写真にホバーした時のフェードイン・フェードアウトや枠線など、ちょっとしたカスタマイズも一緒に行うことができます。

使い方も簡単なので、今すぐ設置したい!という時にピッタリのツールですね。

SnapWidgetの使い方・設置方法

1.SnapWidgetへアクセス

さっそくSnapWidgetへアクセスしてみます。

SnapWidget-3

【Get Your Free Widget】と書かれたボタンをクリックすると、ページ下部にあるフォームへアンカーされています。

SnapWidget-4

基本的には、最初の2項目のどちらかを入力するだけで利用できます。

instagramアカウントに関連する写真を表示したい場合は『Username』に該当のアカウント名を、instagram内でハッシュタグで検索した際に表示される写真を表示したいときは『Hashtag』にキーワードを入力します。

さっそく自分でも作ってみますね。

2.ウィジェット作成に必要な情報を入力

SnapWidget-5

自分は下記のように入力しました。

Username : tada.san
Layout : 5×2
Photo Border : Yes
Hover Effect : Fade Out
Sharing Buttons : No
Responsive : Yes

さっそくプレビューで確認してみましょう!

SnapWidget-6

特に問題無さそうですね。

それではいよいよサイト内に設置してみようと思います。

3.コードをサイト内にコピペする

【Get Widget】ボタンをクリックするとコードが表示されます。

SnapWidget-7

後はこのコードをサイト内の任意の場所に設置するのみ!Wordpressで記事内に設置するときは、codeで囲むのを忘れないように。

instagramウィジェット作成ツール『SnapWidget』のサンプル1

どうでしょう?簡単な割にしっかりしていて個人的にはいい感じかなと思います。見出しは自分で加えないといけませんね。

※やっぱり後からソーシャルボタンも表示しました。

instagramウィジェット作成ツール『SnapWidget』のサンプル2

こちらは『#mushroom』で作成してみました。世界中のきのこ好きの写真が表示されます。趣味のブログなどには良いかもしれませんね!

『SnapWidget』の良いところ・悪いところ

『SnapWidget』の良い点

  • 表示だけならHTML・CSSの知識不要
  • 無料で利用可能
  • 5分もかからず設置できるくらい簡単

とりあえず簡単だってところが一番ですね。ホバー時のフェードや写真のボーダーなどもウィジェット作成時に指定できるのも非常に便利なところ。

『SnapWidget』の悪い点

  • ウィジェットに対する見出しや枠は自分で作成しないといけない
  • リンク先がinstagramではなく、SnapWidgetで生成されたページ
  • Responsive選択時はjsのコードも発行されるので、wordpressではcodeで囲む必要あり

最後のは大した問題ではないのですが、初心者だとここで引っかかるかもと思い記載しました。

『SnapWidget』を利用してみた感想

個人的にはこれで充分!という印象です。凝ったレイアウト等は出来ませんが、フリーでこれだけの機能があれば充分かと。

ただ、リンク先がSnapWidget内のページになってしまうので、そういった点を気にしない人には十分なツールだと思います。

http://snapwidget.com/