HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Tutorial WP paso a paso: crear un widget con tus últimas fotos de Instagram, con cache y sin plugins

Tutorial que explica cómo integrar tus últimas fotos de Instagram en WordPress sin necesidad de plugins.

Hace unos días tuve que hacer un widget para la página de Ladanena en la que se muestran sus últimas fotos subidas a Instagram. Como me he peleado con la API de Instagram, ayudado también por Danilat y por este post de vissit, explico en este tutorial todos los pasos que he seguido para conseguir hacerlo funcionar sin plugins externos.

El ejemplo en producción puedes verlo en la portada de Ladanena.com, :)

Widget de Instagram en Ladanena.com Ejemplo de este tutorial en producción en Ladanena.com.
El resumen de la movida es:
  1. Conseguir un token de acceso a la API de Instagram, para poder hacer las peticiones de las últimas fotos.
  2. Conseguir el ID del usuario de Instagram.
  3. Crear la función del widget.
  4. Modificar esa función para que use la Transients API de WordPress para cachear las llamadas a Instagram.
  5. Usar la función en las plantillas de WordPress.

Así que… vamos darle cera que cuanto antes nos pongamos antes terminamos, :)

1. Conseguir el token de acceso a la API de Instagram

Lo primero que tenemos que hacer es registrar una aplicación nueva en la página de desarrolladores de Instagram. En el formulario, especificaremos un nombre, una descripción, la URL del sitio web y la URL de la redirección OAuth (que puede ser la misma que el sitio web).

Una vez registrada, tendremos una ficha con la información de la aplicación, incluyendo el dato que más nos interesa para generar nuestro token: client ID.

WordPress Instagram widget: client ID Pantalla donde Instagram nos da el Client ID. Lógicamente, en este ejemplo las claves son falsas, :)

Abrimos un navegador web y en la barra de direcciones tecleamos esta dirección:

https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]&response_type=token

En la que tendremos que sustituir:

  • [clientid] por el valor de nuestro Client ID de la aplicación de Instagram.
  • [callbackuri] por el valor de nuestra URL de redirección OAuth de la aplicación de Instagram.

Al acceder a esa web, se nos abrirá una página de inicio de sesión mediante OAuth de Instagram. Iniciamos sesión, confirmamos que le damos permiso de la aplicación y nos redirigirá a la web que hayamos puesto en el campo URL de la redirección OAuth, pero habrá añadido al final de la URL el parámetro access_token seguido del valor que estamos buscando.

Ese es el valor de nuestro token de acceso, así que lo copiamos y lo guardamos como sea.

2. Conseguir el ID del usuario de Instagram

Si lo que queremos es crear un widget con las últimas fotografías de un usuario, necesitaremos hacer una llamada a la API con el ID de ese usuario en Instagram. Hay varias formas de conseguir conocer el ID, pero una bastante sencilla es acceder a esta web:

Nos pedirá un inicio de sesión en Instagram y nos mostrará una página con el ID del usuario, lo copiaremos y lo guardaremos para usarlo en el último paso.

3. Crear el widget

Ya tenemos todos los datos necesarios para crear el widget: el token de acceso a la API y el ID del usuario de Instagram, así que ya podemos programar la función que hace la consulta a y se trae las imágenes que queramos.

En el fichero functions.php de nuestro theme:

  1. /****** GET THE LAST INSTAGRAM PHOTOS *******/
  2. /*
  3. Replace "XXXXX" with the Instagram user ID and "ZZZZZ" with the Instagram Dev-App access token
  4. */
  5. function get_user_instagram_photos($user_id=XXXXX, $count=6, $width=180, $height=180){
  6. $url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent/?access_token=ZZZZZ&count='.$count;
  7. $jsonData = json_decode((file_get_contents($url)));
  8. $result = '';
  9. foreach ($jsonData->data as $key=>$value) {
  10. $result .= '\t'.'<a title="'.htmlentities($value->caption->text).' ('.htmlentities(date("d/m/Y", $value->caption->created_time)).')" href="'.$value->images->standard_resolution->url.'">';
  11. $result .= '<img src="'.$value->images->low_resolution->url.'" alt="'.$value->caption->text.'" width="'.$width.'" height="'.$height.'" />';
  12. $result .= '</a>';
  13. }
  14. return $result;
  15. }

Reemplazando en el código la cadena "XXXXX" por el ID del usuario de Instagram y la cadena "ZZZZZ" por el access_token que hemos conseguido anteriormente.

4. Configurar la cache usando la Transients API de WordPress

Como estamos en WordPress, podemos usar su sistema de cache nativo para almacenar temporalmente las consultas a la API de Instagram. En nuestro caso, haremos que sólo las consulte una vez cada día, es decir, con la primera visita hace la descarga real y al resto, durante 24 horas, les muestra las que ya tiene descargadas de la primera visita. Esto es importante porque:

  • La API de Instagram puede resultar lenta, por lo que si hacemos la petición de las fotos en cada visita tendremos un tiempo de espera para el usuario.
  • La API de Instagram tiene restricciones de número de peticiones, como cualquier otra. No tiene mucho sentido pedir las fotos 1000 veces al día (suponiendo una web con 1000 visitas), si en realidad solemos subir una sola foto nueva cada día.
  • El inconveniente es que cuando publiquemos una nueva foto, no aparecerá directamente en la web sino que le costará unas horas (hasta el siguiente chequeo real evitando la cache).

Modificaremos la función anterior para que finalmente quede así:

  1. /****** GET THE LAST INSTAGRAM PHOTOS WITH CACHE *******/
  2. /*
  3. Replace "XXXXX" with the Instagram user ID and "ZZZZZ" with the Instagram Dev-App access token
  4. */
  5. function get_user_instagram_photos($user_id=XXXXX, $count=6, $width=180, $height=180){
  6. $result = get_transient('last_instagrams');
  7. if ($result == false){
  8. $url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent/?access_token=ZZZZZ&count='.$count;
  9. $jsonData = json_decode((file_get_contents($url)));
  10. $result = '';
  11. foreach ($jsonData->data as $key=>$value) {
  12. $result .= '\t'.'<a title="'.htmlentities($value->caption->text).' ('.htmlentities(date("d/m/Y", $value->caption->created_time)).')" href="'.$value->images->standard_resolution->url.'">';
  13. $result .= '<img src="'.$value->images->low_resolution->url.'" alt="'.$value->caption->text.'" width="'.$width.'" height="'.$height.'" />';
  14. $result .= '</a>';
  15. }
  16. set_transient('last_instagrams', $result, 60*60*24);
  17. update_option('last_instagrams', $result);
  18. }
  19. return $result;
  20. }

5. Uso en las plantillas

Una vez tengamos la función, podremos usarla fácilmente en cualquier plantilla de nuestro theme o plugin con el código:

<?php echo get_instagram(); ?>

Mola, ¿no? :)