• 2015年10月10日08:59

超簡単コピペで出来たwordpressにInstagramのapiを使って撮った写真を表示する方法

この記事を書いた管理者について少しだけ!

このサイトはスニーカー好きの愛知の大学生が管理しています。

Jordan,Yeezyがお気に入りです。

メルカリ、ラクマにてコレクションの販売も行っています。

詳しくはaboutページにて

超簡単コピペで出来たwordpressにInstagramのapiを使って撮った写真を表示する方法

insta-developer

今回はプログラマーの方からTwitterでwebエンジニアを目指すならポートフォリオを持っているといいと言われたので改めて自分のポートフォリオをかっこ良く作っていみようと思ったのですが…
まずTwitterで言われた時に、ポートフォリオというのがいまいちなんなのかわからなかったので調べてみると、wordpressの自作テーマがポートフォリオに当たると言われたのでもう持ってるからいいやと思っていたのです。

しかし見ていただければわかると思うのですがまだこのサイトの未完成なんです。リンクを設定していない箇所やモバイルに対応していない箇所があったり穴だらけです。コードに関しては必要のないcssの指定やhtmlもかなり雑で汚いです。

それを改善して行こうとのことでとりあえず手始めに固定のAboutページのデザインを作り直して(なぜそうなる!?ほかにやっておくことたくさんあるのに…)行こうと思って、旅行に行くたびに撮ってinstagramに上げている旅行の写真をAboutページに表示すればなんとかページの尺を稼げるとし有効活用出来ると思ったので今回それに挑戦してみました。
apiを使うのは初めてなのでよくわからなかったのですがなんとか今はうまく表示出来ています。

長い前置きはこれくらいにして

1.まずはinstagramのアカウントを取得する。

これがなければ何も始まりません。僕は元々持っていたので作る必要はないのですが、まだ持っていない方は登録の方をお願いします。

2.Instagram Developerに登録しよう。

ここでapiを使う許可をもらいます。
apiを使わせていただく手順を初めてしたのでちょっとおどおどしながら登録をしていきました。

instagram-account

登録の仕方はInstagramのアカウントを作った方はwebサイトのInstagramにログインして自分のアカウントページにアクセスし下の方にAPIと言う箇所があるのでそこからDeveloperページに移動します。

instagram-api
移動するとRegister Your Applicationをクリックします。

insta-developer

そこで
Developer Signupに移動しAPIを使う理由などを入力して行きます。
そこで
Your website:APIを使うwebsiteのURLを入力します。
Phone number:電話番号
What duo you want to build with the API?:APIの使用理由を例えば I want to make my photo gallery.
I accept the API:利用規約に同意の上、チェックを入れてDeveloperにsign upは完了です。
次に右上にある歯車のアイコンをクリックしていただくとその下に
Register a New Client があるとおもうのでそこからAPIのアクセストークンの取得に入ります。
そこで以下の入力を求められます。

Application Name:アプリケーションの名前です。例 My photo gallery
Description:アプリの説明 例 For show my Instagram pictures.
website:自分のInstagramのapiを使う連携先のwebサイト 例、僕はここのサイトでapiを使いたいのでhttp://ltomu.minibird.jp/で登録しました。

OAuth redirect_url:問題はここです。後で下の参照元の所に今回参考にしたURLを貼っておくのですがここの説明が詳しくされておらず、僕みたいな初心者はOAuthとはなんだ!ってところから始まると思うのですがOAuth認証とはこのページのコメント欄もそうなんですがTwitterやFacebookやGoogle plusでログインする事で新しくアカウントを作らずにそのwebサービスの機能が使えるようになる。認証の機能みたいな感じです。たぶん…
ですがこの話はあまり今回は関係ないので忘れてください。
そういう訳かどうかわからないのですが他のページをみると認証後にリダイレクトする場合、遷移させるURLやここは適当でOKや「OAuth redirect_url」には、アプリ認証用のプログラムの配置先のURLなど何やら難しい事ばかりかつ”適当でOK”って初心者からしたらえっじゃあgoogleのURLでもいいのとか思っちゃうわけです。(たぶんそれは僕だけ)そこで知恵袋に助けを求める詳しい方が優しく丁寧に教えてくれました。一応お役に立てばと思い

URL:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14150450204

それで結局どこのURLを書けばいいのかと言うとAPIでInstagaramから返ってくるデータを受け取るページのURLを書けばいいそうです。なのでここのページにInstagramの写真を表示させるつもりなのでhttp://ltomu.minibird.jp/about-this-web-siteここのURLを指定しておきます。
ですが写真を取得するだけなら自分のwebサイト内ならどこでもいいみたいです。例えば、僕の場合http://ltomu.minibird.jp/このURLなら実際にないページでもいいと言うことです。

http://ltomu.minibird.jp/api_get/などでもいいそうです。だから適当という表現がでてきたのだと思います。instagramのapiを使いwebサービスを作る場合をここが重要になってくると思うのでまた勉強したいと思います。

Disable implicit OAuth:ここはチェックを入れたままでいいそうです。チェックするとクライアント側だけで認証ができなくなります。意味は多分サーバーでの認証をしなきゃいけなくなるみたいです。それにAPIの認証でサーバーを使うとなるとSSHで接続を要求されるので費用もかかり面倒なことになるのでチェックをいれたままがおすすめです。
Enforce signed header:チェックするとAPIリクエストに独自の証明書が必要になります。意味はわかりませんが面倒だと言う事はわかります。

captcha:bot対策の奴です。

これで晴れてアプリの登録は完了です。
Manage Clientsに固有のCLLENT ID と CLLENT SERETが発行されていると思います。

instagram-3

これを使ってアクセストークンを取得して行きます。
下記のURLのCLIENT_IDとREDIRECT_URLの部分を先ほど取得したCLIENT_IDとREDIRECT_URLに変えて実行してください。

その際に{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}このようなエラーがでる場合はManage ClientsのEDITをクリックしSecurityのとこにある。Disable implicit OAuthのチェックを外しもう一度ページを更新してみてください。
うまくいくとinstagramのページに飛びAuthorizeと言うのがあるのでそれをクリックしてそのあとに飛んだページのURL: http://REDIRECT_URL#access_token=ACCESS_TOKEN
ACCESS_TOKEN部分が変な文字の羅列になっているのでそれをどこかにメモっておくか写真をとって置いてください。
これがアクセストークンになります。
そしてアクセストークンが取得し終わったらDisable implicit OAuthのチェックを元に戻しておいてください。
そしていよいよ
webページにinstagramから写真を取得して表示して行きたいと思います。
下記のコードをfunctions.phpに貼付けます。

そして表示したいページの箇所にを貼付ければ自分のinstagramの最新の投稿から8件取得してページに表示してくれます。もう少し欲しい方は”$nunber”の7を変えればその数字+1の写真枚数を取得出来ます。
あとはcssで形を整えれば完成です。
今回APIというものを使って見たのですが初めて使ったので気になる所を色々調べて行きながらやってみたのですがAPIというのがすごいってのがわりました。
いろいろなとこのAPIと組み合わせて新しいwebサービスとか作れそうなきがします。

それで一つ考えてみたのがinstagramのapiとを使って写真に写ってるアイテムを本人から購入出来るwebサービスとかどうかなと思ったのですがよく考えたらメルカリじゃんと思いもう他の誰かが作ってると思ったのですが、メルカリにはユーザーをフォローする機能がないから若干違って来ると思います。
というかなんでメルカリにはユーザーをフォローする機能がないのでしょうか?売り手側としてはリピーターとか出来たらいいなと思うのでフォロー機能とかあるといいなとか思います。

あとAPI関連で言うとここ最近このwebサイトのtopページに繋がりにくい状態が続いていましたがどうやら記事のRT数を取得するAPIが10月からなくなってしまって繋がったり繋がらなかったりしていたみたいです。

最初わけがわからず途方にくれていましたが今はRT数表示の機能を外したのでちゃんと表示されています。デザインが少し寂しくなりましたが…まぁほかので埋めたいと思います。

明日の会話作りのために大学、高校の友達にShareする。

他にこんな記事も書いています。

Please coments

コメントの仕方

"コメントを投稿する"をクリックしていただくとDisqus, Facebook, Twitter, Google plusの アイコンが出てきます。アイコンをタップしログイン、もしくはお名前、メールアドレスを入力し アカウントを作成せず投稿するにチェックを入れていただければコメントできます。Disqusのアカウントを取得したい方はパスワードを入力してください。

コメントは何かあればすぐに削除できますのでTwitterまたはコメント欄にてお問い合わせください。

※Twitterでのログインの場合、連携を求められますが変な画像をRTしたりするものではございませんのでご安心を