カテゴリー別アーカイブ: WEB制作

InstagramのAPIでアクセストークンとユーザーIDを取得

画像を読み込んでホームページ内に一覧表示させるために、InstagramからAPIでアクセストークンとユーザIDを取得してみる。(2019年5月 現在)

 

1:インスタグラムにログインする

画像を読み込むインスタグラムのアカウントにログインします。

 

 

2:アプリケーション登録

ログインしたら一番下のフッターメニューの「API」をクリック。

画面がかわるので、Developer Signupで対象サイトURLなどを入力。初回は電話番号が必須らしい。

 

登録申請すると、管理画面から[Resister Your Aplication]でアカウント作成して、Register new Client IDで新しいアカウントを作成します。

基本項目はなんでもよいのですが、Valid redirect URIs:(基本的に読み込ませたいサイトURL)は覚えておきます。

 

3:アカウント作成

アカウントを作成すると[Manage Clients]にinsta_appが追加されるので、Client ID xxxxxxxxxxxを確認。

以下のアドレスにアクセスして、CLIENT-ID(取得したクライアントID)とREDIRECT-URI(登録時のValid redirect URIs)の部分を作成したアカウント情報でアクセス。

 

https://www.instagram.com/oauth/authorize/?client_id=CLIENT-ID(取得したクライアントID)&redirect_uri=REDIRECT-URI(登録時のValid redirect URIs)&response_type=token

 

このとき、エラーメッセージなどが表示される場合は、引数が間違っているので正確にコピペしてつなげる必要がある。

 

 

例)リダイレクトURLが登録したものと違っている。

error_message “Redirect URI does not match registered redirect URI”

 

 

4:API認証

情報が正しいと、This app is in sandbox mode and can only be authorized by sandbox users.という認証画面に遷移するので、承認ボタンをクリックで完了。

 

そうするとリダイレクトサイトURLに移動するので、アドレスバーにアクセストークンが表示される。

 

https://リダイレクトURL/#access_token=xxxxxxxxx.xxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxx(アクセストークン)

 

これでアクセストークンは取得できる。

 

 

 

5:ユーザーIDの取得

以前はユーザーIDは登録時に生成されていたが、APIが終了してしまったというこで、アクセストークンで取得しなければならない。

 

以下のようにアクセスすることで、APIから情報が取得できるので、一番上のID情報がユーザーIDになる

 

https://api.instagram.com/v1/users/self/?access_token=xxxxxxxxx.xxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxx(アクセストークン)

 

 

 

ホームページ内にインスタグラムの画像を表示させるために必要なアクセストークンとユーザーIDは以上の手順で取得できました。

 

 

 

 

 

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。

font awesomeがローカル環境で表示されない対処方法

サーバーからページに名前を付けて保存した場合に、font-awesome.cssは読み込まれているのにフォントアイコンが表示されないで□みたいになり表示されないとき。

 

 

CDNなど最新を読み込んでも表示されない場合があります。
その場合はfont awesomeのクラス名があるバージョンのcssファイルをCDNで読み込んでみます。

 

 

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

 

 

今回はこのケースである程度、ローカル環境でもWebフォントでアイコンを表示させることができました。一部、表示されないものがある場合は、別のバージョンで試してみると表示されるかもしれません。

 

 

基本的にはclass=”fa fa-xxxxxなどからはじまるセレクタ名をヒントに探していくとよいでしょう。

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。

安全なページ上で (安全でない) 混在表示コンテンツ

「安全なページ上で (安全でない) 混在表示コンテンツ」。WebサイトをSSL化をしたあとにFirefoxのコンソールに表示された警告文。

原因は、SSL対応したページ内にhttp://~開始されるURLでの参照が混じっている場合が多い。

大抵は外部画像や直接ファイルなどを絶対パスで参照している画像などが原因となる。

ブラウザによっては画像が表示されなくなるケースなどもあるので注意が必要。

 

 

 

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。