[SnapWidget,Instagram]インスタグラムのタイムライン、ハッシュタグをWEBサイトに表示する

Instagram、人気ですよね。
女子とかに人気ですよねっ。ユーザーの6割は女子ですって。
そんなInstagramをWEBサイトに表示していれば・・・
そんな淡い期待を抱きながら、チョチョイのチョイでやってみようと思います。

SnapWidgetを使います

InstagramをWEBサイトに表示する方法は大きく分けて2通りあります。

1つ目はInstagramAPIを使用して表示する。
この方法は自由度も高く、出来ることも多いですがプログラムの知識がないと難しいので初心者には敷居が高いと思いますので、今回は「SnapWidget」というサービスを使います。

SnapWidget

使い方

SnapWidgetにアクセスして少し下にスクロールすると「Embed your photos and videos」という見出しがあります。

SnapWidget

選択しがいくつかありますが、今回はユーザー登録も無し有料も無しでやってみたいと思いますので、左上が右下でやってみます。

※左上・・・複数枚Instagramの写真を並べられます。
※右下・・・1枚づつフェードイン・アウトします。
※ハッシュタグで絞り込みたい場合は「SIGN UP FOR PRO TODAY」を選択して月$7の有料会員になる必要があるみたいです。

今回は複数枚の方を選択していきます。

「CREATE YOUR FREE WIDGET」をクリックします。

SnapWidget

設定項目を入力していきます。

まずは「Username」
UsernameのテキストボックスをクリックするとInstagramの認証画面が表示されますので、認証してください。

SnapWidget

その他の設定

Thumbnail Size サムネイルのサイズ
Layout 何列、何行でレイアウトするかを入力
Photo Border 写真に枠線をつけるかどうか
Background Color 背景色(16進数)
Hover Effect 写真にマウスオーバーしたときの処理
Sharing Buttons シェアボタンを表示するかどうか
Responsive レスポンシブにするかどうか

設定が完了したら「GET WIDGET」をクリックしてコードを取得しましょう。

SnapWidget

コードをコピーしてWordPressのウィジェットに貼るもよし、テンプレートに貼るもよし。

まとめ

当サイトのサイドバーにデモとして貼り付けてあります。(外しましたw)

設定はほとんどいじってませんが勝手にレスポンシブしてるようです。
※サイドバーは300pxしかありませんが390pxが丁度サイズではまってますね・・・

色々なSNSと連携するのが当たり前となったWEBですが、こういうサービスをじゃんじゃん活用してすばらしいWEBサイトを作っていきたいですねと、思ったり思わなかったりです。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク