Instagram、人気ですよね。
女子とかに人気ですよねっ。ユーザーの6割は女子ですって。
そんなInstagramをWEBサイトに表示していれば・・・
そんな淡い期待を抱きながら、チョチョイのチョイでやってみようと思います。
SnapWidgetを使います
InstagramをWEBサイトに表示する方法は大きく分けて2通りあります。
1つ目はInstagramAPIを使用して表示する。
この方法は自由度も高く、出来ることも多いですがプログラムの知識がないと難しいので初心者には敷居が高いと思いますので、今回は「SnapWidget」というサービスを使います。
使い方
SnapWidgetにアクセスして少し下にスクロールすると「Embed your photos and videos」という見出しがあります。
選択しがいくつかありますが、今回はユーザー登録も無し有料も無しでやってみたいと思いますので、左上が右下でやってみます。
※左上・・・複数枚Instagramの写真を並べられます。
※右下・・・1枚づつフェードイン・アウトします。
※ハッシュタグで絞り込みたい場合は「SIGN UP FOR PRO TODAY」を選択して月$7の有料会員になる必要があるみたいです。
今回は複数枚の方を選択していきます。
「CREATE YOUR FREE WIDGET」をクリックします。
設定項目を入力していきます。
まずは「Username」
UsernameのテキストボックスをクリックするとInstagramの認証画面が表示されますので、認証してください。
その他の設定
| Thumbnail Size | サムネイルのサイズ |
|---|---|
| Layout | 何列、何行でレイアウトするかを入力 |
| Photo Border | 写真に枠線をつけるかどうか |
| Background Color | 背景色(16進数) |
| Hover Effect | 写真にマウスオーバーしたときの処理 |
| Sharing Buttons | シェアボタンを表示するかどうか |
| Responsive | レスポンシブにするかどうか |
設定が完了したら「GET WIDGET」をクリックしてコードを取得しましょう。
コードをコピーしてWordPressのウィジェットに貼るもよし、テンプレートに貼るもよし。
まとめ
当サイトのサイドバーにデモとして貼り付けてあります。（外しましたw）
設定はほとんどいじってませんが勝手にレスポンシブしてるようです。
※サイドバーは300pxしかありませんが390pxが丁度サイズではまってますね・・・
色々なSNSと連携するのが当たり前となったWEBですが、こういうサービスをじゃんじゃん活用してすばらしいWEBサイトを作っていきたいですねと、思ったり思わなかったりです。
