CODEWITHSUNDEEP
phpiframeembedinstagraminstagram-api
Xeen
Xeen

Reputation: 7003

How to embed instagram profile?

I have found literally hundreds of ways to embed instagram gallery in a website, but what I need is to embed the whole profile, t.i. if you look at this profile for example: https://www.instagram.com/exampleprofile/ there's a profile image, about, title and a follow button.

How can I embed the profile with this header information as well not only the images in its gallery? Is it even possible?

Upvotes: 10

Views: 46586

Answers (3)

jakeonfire
jakeonfire

Reputation: 85

You can do this using the new Facebook Graph API: https://developers.facebook.com/docs/instagram-basic-display-api/reference/media

You'll need a developer account with an Application and Instagram "Basic Display" permissions. From there, much of Omar Alahmed's answer is still applicable, including authorization via OAuth at https://api.instagram.com (this part of the API was not deprecated).

Upvotes: 1

Omar Alahmed
Omar Alahmed

Reputation: 1602

Actually, there is no straightforward way to do that, you need to:

  1. Create an Instagram Client application

  2. Get your client details

  3. Authenticate

1. Create an Instagram Client application

You have to create your own instagram application here:

2. Get your client details

In your Instagram Developer account, click "Manage Clients" and take note of the "Client ID", "Client Secret" and "Redirect URI" because you'll need them soon. Make sure you are using a complete URL for your Redirect URI, such as "https://drupal.org".

3. Authenticate

3.a Using CURL First, add this into your browser:

https://api.instagram.com/oauth/authorize/?client_id=YOUR-CLIENT-ID&redirect_uri=YOUR REDIRECT-URI&response_type=code&scope=public_content Note that the REDIRECT-URI above should be URL encoded, such as https%3A%2F%2Fdrupal.org.

You'll then be redirected to the url you redirected to. Take note of the url as this is where you receive the code you need:

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

Now open up your terminal and paste in this (adding your specific id, secret, redirect uri, & code):

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

You should receive something that looks like this:

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

3.b Using browser Build the following url and paste it on your browser:

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

You may see the following error "Implicit authentication is disabled". If so, then you have to edit your Instagram Client, go to the Security tab, and disable the option Disable implicit OAuth, you can enable this back once you get to the following point.

If everything went well you should have been redirected to an URI that looks like this 

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

On the access_token key, the "x" part (all before the first period) is your User Id.

4. Create request for Instagram API and then parse the response object

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

The source: https://www.drupal.org/node/2746185

Upvotes: 1

Tomahock
Tomahock

Reputation: 479

The right way to do this is to use the API. You can get user information with this endpoint:

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

Upvotes: 1

Related Questions