web-dev-qa-db-ja.com

Instagramプロファイルを埋め込む方法は?

InstagramギャラリーをWebサイトに埋め込む方法は文字通り何百もありますが、必要なのはプロファイル全体を埋め込むことです。たとえば、このプロファイルを見ると: https://www.instagram.com/exampleprofile/ プロフィール画像、概要、タイトル、フォローボタンがあります。

ギャラリーの画像だけでなく、このヘッダー情報をプロファイルに埋め込むにはどうすればよいですか?それも可能ですか?

8
Xeen

これを行う正しい方法は、APIを使用することです。このエンドポイントでユーザー情報を取得できます。

https://www.instagram.com/developer/endpoints/users/#get_users

1
Tomahock

実際、それを行う簡単な方法はありません。

  1. Instagramクライアントアプリケーションを作成する

  2. クライアントの詳細を取得する

  3. 認証する

1。 Instagramクライアントアプリケーションを作成します

独自のinstagramアプリケーションを作成する必要があります here

2。クライアントの詳細を取得します

Instagram開発者アカウントで[クライアントの管理]をクリックし、[クライアントID]、[クライアントシークレット]、[リダイレクトURI]を書き留めます。すぐに必要になるためです。 「 https://drupal.org 」など、リダイレクトURIの完全なURLを使用していることを確認してください。

3。認証

3.a CURLの使用まず、これをブラウザーに追加します。

https://api.instagram.com/oauth/authorize/?client_id=YOUR-CLIENT-ID&redirect_uri=YOUR REDIRECT-URI&response_type = code&scope = public_content上記のREDIRECT-URIはURLエンコードする必要があり、 https%3A%2F%2Fdrupal.orgなど。

その後、リダイレクト先のURLにリダイレクトされます。必要なコードを受け取る場所であるため、URLに注意してください。

http://your-redirect-uri?code=YOU-NEED-THIS-CODE

ターミナルを開いて、これを貼り付けます(特定のID、シークレット、リダイレクトURI、およびコードを追加):

curl -F 'client_id=YOUR CLIENT_ID HERE' \
-F 'client_secret=YOUR CLIENT_SECRET HERE' \
-F 'grant_type=authorization_code' \
-F 'redirect_uri=YOUR AUTHORIZATION_REDIRECT_URI HERE' \
-F 'code=THE CODE YOU RECEIVED' \
https://api.instagram.com/oauth/access_token

次のようなものを受け取るはずです。

{
"access_token": "fb2e77d.47a0479900504cb3ab4a1f626d174d2d",
"user": {
    "id": "1574083",
    "username": "snoopdogg",
    "full_name": "Snoop Dogg",
    "profile_picture": "..."
}
}

3.b browserを使用して、次のURLをビルドし、ブラウザーに貼り付けます。

https://api.instagram.com/oauth/authorize/?client_id=[your client id]&redirect_uri=[your redirect uri]&response_type=token

次のエラーが表示される場合があります「暗黙的な認証が無効になっています」。その場合、Instagramクライアントを編集し、[セキュリティ]タブに移動して、オプションを無効にする必要があります暗黙のOAuthを無効にする次のポイントに到達します。

すべてがうまくいけば、次のようなURIにリダイレクトされているはずです

https://my_redirect.uri/#access_token=xxxxxxxxxx.yyyyyyy.zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Access_tokenキーでは、「x」部分(すべて最初のピリオドの前)はユーザーIDです。

4。 Instagram APIのリクエストを作成し、レスポンスオブジェクトを解析します

https://api.instagram.com/v1/users/xxxxxxxxxx/media/recent/?access_token=xxxxxxxxxx.yyyyyyy.zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Instagram API: https://www.instagram.com/developer/endpoints/users/#get_users

ソース:https://www.drupal.org/node/2746185

1
Omar Alahmed