Image

Obtener las publicaciones de Instagram vía Ajax

Alguna de las funciones más solicitadas en los últimos proyectos que he visto y/o creado es obtener las publicaciones de Instagram. Lo anterior ya sea que pueda ser utilizado para crear una pequeña galería a mostrar en el header, footer o sidebar de un proyecto web.

A continuación dejo una función sencilla para obtener estas publicaciones sin recurrir a plugins extensos.

Cosas a tener en cuenta antes de obtener las publicaciones de Instagram

  • Se obtienen de una cuenta pública de Instagram
  • La URL de consulta es: https://www.instagram.com/[usuario]/?__a=1
  • Esta consulta de limita a 12 publicaciones por llamada. Regresa un JSON con datos de la cuenta y publicaciones.
  • Dependeremos de jQuery

Con lo anterior en mente, ahora veamos la función:

Con lo anterior vemos que usando jQuery hacemos una llamada vía Ajax a la URL de consulta de Instagram a la cual la añadimos el parámetro y valor __a=1.

Esta llamada nos devuelve un JSON con una buena diversidad de datos tanto de la cuenta del usuario como de sus publicaciones.

En este JSON accesdemos a graphql, luego a user, en seguida a edge_owner_to_timeline_media y por último a edges (edges = data.graphql.user.edge_owner_to_timeline_media.edges;)

Los edges son las publicaciones de Instagram que pueden ser fotos y/o videos. Regresa las últimas doce publicaciones. Enseguida recorremos cada uno de estos edges para obtener la información de las publicaciones.

En esta imagen vemos algunos datos que podemos obtener de cada edge. Nuestra función requiere sólo dos de estos datos.

imageSrc = element.node.thumbnail_resources[4].src;
Se accede a thumbnail_resources[4] y luego a src. Donde [4] se refiere al tamaño del thumbnail, en este caso necesito el de 640px.

imageCode = element.node.shortcode;
Es el código de la publicación de Instagram. Indispensable para acceder vía URL a esa publicación.

imagePageLink = externalURL + imageCode;
Esto último sólo forma la URL de la publicación

El resto de la función lo que hace es tomar los datos de cada publicación, construir un elemento de lista (li) con una imagen vinculada a la publicación de Instagram. Luego cada elemento de lista lo va añadiendo a una lista (UL).

Accediendo al raw de la función, puedes copiarla y pegarla en tus funciones de JavaScript y después llamar a la función de la siguiente manera.

instagramAjaxFeed(‘juliocolunga’,5)

Donde el primer parámetro es el nombre de usuario de una cuenta públíca de Instagram y el segundo parámetro es el número de publicaciones a traer con un límite de doce.

Puedes saber más revisando la información de Instagram para desarrolladores y la documentación de jQuery.ajax().

Actualización: Este método de consulta a la API de Instagram dejó de funcionar en los primeros días del mes de Abril del año 2018. Acerca.

Obtener las publicaciones de Instagram vía PHP