jQuery前回の記事で「SnapWidget」というサービスを使ってインスタグラムの写真や動画を読み込む方法を書きましたが、今回はAPIを使用して読み込んでみたいと思います。APIを使った方法なのか?と言うと先日、このブログに読み込んでるインスタグラムが表示できてないという自体に陥ってたからです。「SnapWidget」は無料(一部有料)のサービスなのでいつ終わってもおかしくないと思い、今回はAPIを利用する方法を書き留めて置こうと思った次第です。IDを取得していきます。PCからInstagramにアクセスします。ページ下の「API」をクリックします。Application」をクリックします。Client」をクリックします。Clients」は何もありません。必要事項を入力します。Name・・・アプリの名前ですが適当に自分が分かる名前を付けましょう。Description・・・アプリの説明ですがこれも適当に自分が分かるように。Name・・・会社名ですが、個人のサイト名やブログ名で構いません。URL・・・自分のサイト、ブログのURLを入力。URIs・・・最終的にアクセストークンを取得するわけですが、そのときに必要になるリダイレクト先です。写真や動画を貼り付けるサイト、ブログのURLを入力しておきましょう。URL・・・未入力で構いません。email・・・自分のメールアドレスを入力、または未入力でも構いません。OAuth:」のチェックを外します。OAuth:」のチェックを外すのを忘れるとアクセストークンを取得するときにエラーになります。キャプチャの文字列を入力して「Register」をクリックします。‘アプリ名’」が表示されればクラアント登録は成功です。Mode」とはAPIのテスト機能のようなもので利用には制限があります。扱えるユーザー数は10人まで最新の投稿は20投稿まで取得可能1時間に500リクエストまでと制限があります。設定の変更やSecurityの変更をしたいときは「MANAGE」をクリックすると変更は可能です。URIs」が必要になります。この2つを下記のURLに代入してブラウザでアクセスします。http://hoge.comだった場合https://instagram.com/oauth/authorize/?client_id=123456789&redirect_uri=http://hoge.com&response_type=tokenとなります。入力した情報が正しければ以下の表示されますので「Authorize」をクリックします。URIs」で指定したURLにリダイレクトされます。この時のアドレスバーに表示されているのがアクセストークンになります。大事にメモって保存しておきましょう。ユーザーIDを取得する最後にユーザーIDの取得です。IDにアクセスしユーザーIDを取得します。IDをクリックするとユーザーIDの取得は完了です。instafeed.jsを使って写真を表示するinstafeed.jsでダウンロードします。通常のダウンロードとgithubでのダウンロードがありますが、どちらでも構いません。コピペできるようにhtmlを全て貼り付けておきます。ユーザーIDを入力します。アクセストークンを入力します。表示枚数を入力します。写真サイズを入力します。表示したようにhtmlを書きます。alt=""></a><span>いいね({{likes}})</span><span>コメント数({{comments}})</span></div>上記のように書いてますが{{キーワード}}というキーワードがいくつか用意されていて、それを組み合わせて書いていきます。その他のキーワードはこちらにあります。まとめいかがでしたでしょうか?めんどくさいですけど、難しくはないと思います。APIでやっちゃうメリットは何と言ってもレイアウトが自由に作れる点にあると思います。slick.jsなどのスライダー系のjqueryプラグインと組み合わせてInstagramの写真を読み込んでスライドさせるとかできちゃいますね。関連記事[CSS,CSS3]box-sizing(border-box)でborder、paddingを気にしないスローライフな生活を送ろう!そんな大層なことですか。生活に絡んでくるようなことですか。楽になるんだからいいじゃない。一度は経験したことがあるであろう...記事を読む商用利用OKの無料ピクトグラム最近WEBデザインにしろペーパーデザインにしろピクトグラムを使うことが多くなりました。...記事を読む[css、css3]cssで矢印を作る!コピペは卒業してちょっと解説を交えながら矢印自由自在!タイトルの通りです。※オレ用に久しぶりの更新ですがな。今回はbox-shadowでよく使うものをメモっておこうと思います。Part.2前回の続きです。Flexboxの色々なプロパティを見ていきましょう。「flex-direct...記事を読む[SnapWidget,Instagram]インスタグラムのタイムライン、ハッシュタグをWEBサイトに表示するInstagram、人気ですよね。女子とかに人気ですよねっ。ユーザーの6割は女子ですって。Designer」を試してみた。操作はFLA...記事を読む[CSS]奇数とか偶数とかn番目とか忘れてしまうのでメモ。tableで交互に色つけてーとかn番目の要素だけ背景色変えてーとか、よく忘れます・・・歳ですもん。ことで、今回は筆者の本当のメ...記事を読む[CSS]CSSでアイコンを実装できるICONOを使ってみた。CSSだけでアイコン付けれるっていいじゃない。WEBフォントとか使わなくていいなんてステキじゃない。ノーブラの日ってサイコーじゃない。