宮崎のホームページ制作会社Tedinc | Instagram

menu 0982-60-1084

TEDINC OFFICIAL BLOG

こんにちわ、Tedincの林田です。

今回はInstagramの写真を取得しWEBサイトに反映させる上で手こずった項目について書いていきます。

Instagram反映までの流れ

1、Instagramのdeveloperのページに進みアプリケーションを登録
2、ユーザーIDとアクセストークを取得する。
3、Instafeed.jsとjQuery simplyScrollを使ってサイトに反映

今回の記事は1、2の項目にてこずった為、1と2について詳しく書いています。


1、Instagramのdeveloperのページに進みアプリケーションを登録


1,Instagramのdeveloperのページに進み、「Register Your Application」をクリック

deve



2,項目全てを入力して「Sign Up」をクリック

your website:あなたが使うWebサイト名
Phone number:電話番号の登録
What do you want to build with the API?:使用するAPIの目的
deve2



3、developerのページに戻るので、右上のメニューバーから「Manage Clients」へ進む

deve3



4、Manage Clientsのページで「Register a New Client」をクリック

deve4



5、Register new Client ID のページで全ての項目を入力

Application Name:アプリケーションの名前
Description:アプリケーションの説明
Company Name:会社名
Website URL:使用するサイトURL
Valid redirect URIs:Website URLと同じでOK
Privacy Policy URL: プライバシーポリシーの記載があるURL
Contact email:メールアドレス
deve5



6、Securityタブをクリックし、「Disable Implicit OAuth」のチェックを外す。

deve7-1


ここにチェックが付いていると、アクセストークンを発行するときに、エラーで返されます。

{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}


7、Manage Clientsのページに戻りデベロッパーの登録は完了。

表示されているCLIENT IDとREDIRECT URIを【ユーザーIDとアクセストークを取得する。】で使用するのでコピーします。

deve6


2、ユーザーIDとアクセストークンを取得する。


Instafeed.jsでユーザーIDとアクセストークが必要となります。

https://instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【REDIRECT URI】&response_type=token

1、上記URLの【CLIENT ID】と【REDIRECT URI】変更しブラウザでURLにアクセス

Manage Clientsのページに記載されている自分の情報に書き換え、URLをクリックすると下記のページが表示されるので「Authorize」をクリック
deve8



2、反映させるサイトが表示されるのでURLの中の文字をコピー

Instagramを反映させるサイトが表示されますが、URLを見ると
deve9
になっています。
この【access_token=】以下の文字を使用します。自分の文字を例にすると
ユーザーID(userId):48875156
アクセストークン(accessToken):48875156.64b8f1c.48d8baef107b438d8b4d98a8c51cb003
になります。


3、Instafeed.jsとjQuery simplyScrollを使ってサイトに反映

【Instafeed.js】



Instafeed.js


http://instafeedjs.com/
Instagramで最新のfeedを取得してくれるjQueryプラグイン
オプションが細かく設定できるすぐれたプラグインです。

【jQuery simplyScroll】



simplyScroll


横方向に自動スクロールしてくれるjQueryプラグイン
http://logicbox.net/jquery/simplyscroll/

この項目については詳しく載っている記事を掲載いたします。
参考記事:
jQueryでInstagramのフィードを取得して自動スクロールさせる





反映したもの


    まとめ

    今回は【jQuery simplyScroll】も使いたかったので、上のようなレイアウトにしましたがInstagramを使ったフォトギャラリーも【Instafeed.js】を使いCSSでレイアウトを行えば様々な見せ方を行えます。 よかったら参考にしてみてください。


    参考記事一覧

    Instagram のユーザー情報を取得+写真をサイトに表示+それを自動スクロールする jQuery
    InstagramのAPIで写真を取得する【準備編】
    jQueryでInstagramのフィードを取得して自動スクロールさせる


    CONTACT US

    お気軽にお問い合わせ下さい

    お問い合わせはコチラ