Foro de elhacker.net

Quiero que al entrar al login pida el nombre de usuario de Instagram, y que al escribirlo y darle submit me aparezca la foto de perfil del nombre de usuario que escribí.

Dejo este video para que entiendan mejor, no se como expicarlo bien..

https://mega.nz/#!hwh0QKia!mo9AdjrbwkGI-kiDlO_4VpQU66N91EOfCGvTWbDo0vk

En el video escribo "cristiano" y al darle siguiente me aparece la foto de perfil que tiene Cristiano, si escribo neymarjr me aparece la foto de perfil de Neymar y así.

Quiero el script que al poner el nombre de usuario de cualquier persona de Instagram me aparezca la foto de pefil de ésta persona.

sabes manejar el api de instagram?

tampoco has aclarado lenguaje ni nada

La imagen de perfil es bastante facil obtenerla y además no hacen falta tokens de la API de Instagram.


Eso te retorna un JSON con la info publica del usuario. De ahí puedes usar graphql.user.profile_pic_url o graphql.user.profile_pic_url_hd para sacar la imagen de perfil.

Ejemplo:

https://jsfiddle.net/drvy/n0ma1vr7/1/


Saludos

Busqué el insta de CR y le puse view-source: antes de la url para ver el código. view-source:https://www.instagram.com/cristiano/

Busqué usando las herramientas del navegador las imágenes. Puse .jpg en la herramienta y me encontré lo siguiente:

<meta content="207.7 millones seguidores, 440 seguidos, 2,777 publicaciones - Ve las fotos y los vídeos de Instagram de Cristiano Ronaldo (@cristiano)" name="description" />
 
<meta property="og:image" content="https://scontent-mad1-1.cdninstagram.com/v/t51.2885-19/s150x150/67310557_649773548849427_4130659181743046656_n.jpg?_nc_ht=scontent-mad1-1.cdninstagram.com&_nc_ohc=geHFAnAow1cAX8jbZud&oh=a8685994dd8c5f2ceb711f1210ab4e7f&oe=5EA58B2D" />

La url es totalmente random/no predecible asique hay que seleccionar utilizando un selector de DOM. Hay librerías para todos los lenguajes. En PHP y js te vienen incluidas por defecto. En node.js tienes jsdom y cheerio que te tienes que descargar, jsdom me va perfecto con document.querySelector.

Te pongo el ejemplo en javascript pero el selector es multiplataforma.

Utilizas el selector para obtener una referencia el elemento.

Una vez tienes una referencia al elemento accedes al valor del atributo que tiene el enlace. En este caso content.

document.querySelector('meta[property="og:image"]').getAttribute("content")

Ahora haces lo que quieras con él.

avascript:alert(document.querySelector('meta[property="og:image"]').getAttribute("content"));

Cuando te pidan el perfil de alguien le zumbas esa linea y ya sacas el link de la imagen. Tienes que sacar el código fuente de instagram. Para ello o usas tu servidor y pides el código con por ejemplo CURL en PHP, el módulo request o http en node.js o usas el server de Cors-Anywhere que hay online desde javascript.

Después creas una imagen, le añades el link como atributo y la muestras.

avascript:i=document.createElement("img");i.src=document.querySelector('meta[property="og:image"]').getAttribute("content");document.write(i.outerHTML);

Falta la j de javascript porque el foro lo bloquea por seguridad.

Puedes ir al instagram de cualquiera y escribir ese código en la barra de direcciones y ves la imagen de perfil.

Por si tienes curiosidad og:image se utiliza para tener una imagen cuando compartes un link. Es decir, que si compartes el link del instagram de alguien por whatsapp, se va a ver una preview de la imagen de su perfil. Haz la prueba, es esa imagen la que estoy seleccionando. Si la página está bien echa no tiene sentido que tenga más de 1 og:image por lo que siendo instagram no te hace falta comprobarlo.


Mod: Obligatorio el uso de etiquetas GeSHi para código.