カテゴリー別アーカイブ: 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(アクセストークン)

 

 

 

ページヘッダには以下が必要。

<script type=”text/javascript” src=”js/jquery-2.1.4.min.js”></script>
<script type=”text/javascript” src=”js/instafeed.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
var userFeed = new Instafeed({
target:’instafeed’,
get: ‘user’, //ユーザーから取得
userId: ‘user idをいれる’, //ユーザーID(先ほど確認した’user_id’)
sortBy: ‘most-recent’,//最新記事から順に取得
links: true , //画像リンク取得
limit: 10, //取得する画像数を設定
resolution: ‘low_resolution’, //画像サイズを設定
template: ‘<li><a href=”{{link}}” target=”_blank”><img src=”{{image}}”></a></li>’,
accessToken: ‘access tokenを入れる’ //アクセストークン
});
userFeed.run();
});
</script>

 

 

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

 

※2019年7月時のもので、仕様変更している場合があるので、都度、確認が必要です。

 

 

 

 

 

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

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

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

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

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

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

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

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

 

 

 

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

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

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

WordPressのプラグインTheme My Loginで会員制サイトを制作する

Webの制作過程で会員サイトの作成が必要になったので、ワードプレスのTheme My Loginで制作してみます。
いきなり有料版で希望するものでなかったり、カスタマイズができないと困るので無料プラグインTheme My Loginで設置しています。

 

はじめに

最初の手順としては、まずTheme My Loginをダッシュボードの[プラグイン]の[新規追加]よりインストールします。

 

その次に、

ダッシュボードの[設定]⇒[一般]から、[だれでもユーザー登録ができるようにする]にチェック。
権限は[購読者]のままでよいでしょう。(必要に応じて変更する)

 

最後の手順としては

固定ページで、設定時は各ページが自動生成され、紹介文やショートコードはページ内に記載されているので、それらを確認することで今回は完了です。

 

この工程の流れで気を付けたい事が、設置自体はわりとスムーズにできるが、設定項目が以外とあったりするので、用途に応じてしっかり設定が必要という点について注意する必要があります。

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

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

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