How to get general Instagram information without using the Graph API

[klaas.vanhoeck1]

Hi,

I have searched for a long time for an easy way to get general information about an Instagram user (#followers, name, bio, pic, etc) because the Graph API was too much hassle. I founded a way to do it with the Toolbox plugin.

Steps:

1. Instal the Toolbox plugin.
2. Make a button with the workflow: run javascript.
3. Put a JavascripttoBubble element on your page for each piece of data you want to extract.
4. Put the following code in the run javascript workflow:

let url = “https://www.instagram.com/**[username]**”;
$.ajax({
type: ‘GET’,
url: url,
error: function () {
//…
},
success: function (data) {
data = JSON.parse(data.split(“window._sharedData = “)[1].split(”;”)[0]).entry_data.ProfilePage[0].graphql;
console.log(data.user);
bubble_fn_insta(data.user.edge_followed_by.count);
}
})

5. Change the [username] to the user you want to search
6. Change the bubble_fn_insta to the name of your JavascripttoBubble element
7. You can extract all data attached to data.user. To check the syntax, just run the workflow once with a valid username and check your console which displays all data you can extract and put into a JavascripttoBubble element.
   
   

Now you have that data in your Bubble app without having to use the Graph API.

Cheers!

[cyrus]

Hi @klaas.vanhoeck1

Thanks! Very cool!

Cyrus

[hugo_ctn]

Wonderful
Thanks a lot @klaas.vanhoeck1 !

Would you have a similar script to extract a random image from the link we get with the “copy link” option in Instagram ?

[klaas.vanhoeck1]

Could you PM me an example of such a link. I will see what I can do!

[Christophe_HK]

Awesome tips! Many thanks!

Do you know if there’s a way to do the same with Facebook?

[klaas.vanhoeck1]

I tried the same thing. But the shareddata which is exposed on the instagrampage is not visible on facebook. I think it is doable but I’m not such a coding guy.

[Christophe_HK]

Many thanks for your feedback @klaas.vanhoeck1 ! I will have a look. This really is a need I have for both Insta and FB, and your how to for Insta is a real game changer. So up to me to discover the how to for Facebook, and if I do, I will share the steps!

[everymail3]

Hey! I followed all the steps but i don’t know how to extract the data? Where is this data getting stored? Sorry but i have no experience in coding.

Here is the workflow part:

[klaas.vanhoeck1]

You should use the full name of the javascript to bubble element. So the 4th last line in your run javascript would be bubble_fn_JavascripttoBubble. Then it will be stored in that element which you can see in the debugger.

[klaas.vanhoeck1]

This works for all accounts

[everymail3]

Sorry to bug (pun intended) you like this but I don’t know why but i am still getting an error. This is my editor:

Here’s my workflow:

Here’s the error:

Here’s the debugger set to element A

Here’s my console:

This is the code i entered:

let url = “https://www.instagram.com/tomcruise”;
$.ajax({
type: ‘GET’,
url: url,
error: function () {
//…
},
success: function (data) {
data = JSON.parse(data.split(“window._sharedData = “)[1].split(”;”)[0]).entry_data.ProfilePage[0].graphql;
console.log(data.user);
bubble_fn_A(data.user.edge_followed_by.count);
}
})

I changed the url from dynamic (based on input) to static just to debug. But neither case seems to work. Thank you for your help

[kevin16]

@klaas.vanhoeck1

bubble_fn_insta(data.user.edge_followed_by.count);
}
})

you need to go into the Rich Text Editor in the Workflow and replace every " or ’ with a new " or ’ and then run it. It will work. The problem is the copy and pasting over is putting the wrong kind of " or '. Found it on a stack overflow forum entry about the error code.

[everymail3]

Worked like a charm. You are a lifesaver my man.
But i got a new problem. When i use a text box to display this data this error shows up:

This is the data for the number of followers. I think as javascript to bubble element converts it to a text, this data type being a number is causing problems. Any idea how to solve this? I want to pull this number of followers data and use it as input in my form.

[kevin16]

Make sure that the text box is filled using Dynamic Data “JavascripttoBubble’s value”, you can go one further and do it formatted as: and choose Number of something else.

[sergio.evermain]

@kevin16 @klaas.vanhoeck1 .vanhoec Hi have a problem:

VM15058:9 Uncaught TypeError: Cannot read property ‘0’ of undefined
at Object.success (eval at (PLUGIN_Toolbox-action–Run-javascript-.js:NaN), :9:95)
at i (x10:2)
at Object.fireWith [as resolveWith] (x10:2)
at A (x10:4)
at XMLHttpRequest. (x10:4)

Error is on this line:
data = JSON.parse(data.split(“window._sharedData = “)[1].split(”;”)[0]).entry_data.ProfilePage[0].graphql;

[klaas.vanhoeck1]

Can you show me the full javascript you wrote?

[sergio.evermain]

@klaas.vanhoeck1 that is

[klaas.vanhoeck1]

Maybe it has something to do with the indents . Mine looks like this and it works.
I also see you don’t have the after the split()

[kevin16]

Make sure to go into rich text editor and replace all the ’ and " with new ones. It’s a weird glitch but it worked for us.

[getannouncr]

@kevin16 @klaas.vanhoeck1
Hey there! I have a weird issue with the js script. Here is the error:

I am using the same code provided, and I switched out the ’ and " as well. Any ideas on how I can solve this? It is an issue with the CORs policy, but not sure if I can do anything about that in bubble.