A continuación 3 códigos diferentes jquery para mostrar (por: ID de usuario, Usuario, Tag) las últimas fotos de Instagram usando su API.

1. Creamos un nuevo cliente de instragram desde: https://instagram.com/developer/ para obtener el valor de “CLIENT ID” que necesitaremos en los scripts.

2. Creamos el elemento en html donde se cargaran las fotos dinámicamente por ajax. En este caso un <ul> vacio con un id:

3. Creamos el script jQuery. 3 ejemplos diferentes:

3 tipo de tamaños para las imágenes que tiene la API de instagram (yo he utilizado “thumbnail” en los 3 ejemplos):

  • thumbnail (150×150 px)
  • low_resolution (320×320 px)
  • standard resolution (640×640 px)

A. Por ID de usuario:

Cambia el valor de la variable “userid” por el id de usuario que quieras. Para obtener el id de un usuario cualquiera puedes utilizar esta herramienta.

Demo:

See the Pen ZbxGxo by Jorge Maiden (@jorgemaiden) on CodePen.

B. Por usuario:

Cambia el valor de la variable “username” por el nombre de usuario que quieras.

Demo:

See the Pen jQuery: Fotos Instagram por “usuario” by Jorge Maiden (@jorgemaiden) on CodePen.

C. Por Tag:

Cambia el valor de la variable “hashtag” por el nombre de hashtag que quieras.

Demo:

See the Pen jQuery: Fotos Instagram por “tag” by Jorge Maiden (@jorgemaiden) on CodePen.