En el siguiente tutorial vamos a crear un plugin que muestre la fotografías más populares del feed principal de Instagram. Para ello, nos ayudaremos de nuestro ingenio, de la API de Instagram y sobretodo de PHP. ¿Estás listo? Pues vamos a ello...
El plan
Nuestro plugin trabajará con el shortcode [instagradam]. Puedes insertarlo en cualquier sitio donde se pueda introducir código HTML, ya sea dentro de una plantilla, o bien dentro del editor de texto. Eso ya depende de donde quieras mostrar las imágenes. Este shortcode mostrará una serie de 10 o 15 miniaturas enlazadas a su enlace principal de Instagram. El núcleo del plugin se basa en un feed remoto, por lo que vamos a necesitar el uso de la Function API de WordPress.
La lista de datos funcionales se verá así:
/* theluxurystyle --- http://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122000a9e0727_5.jpg jaredleto --- http://distilleryimage8.s3.amazonaws.com/21d07bce781c11e2adc122000a1f9ace_5.jpg balloop --- http://distilleryimage11.s3.amazonaws.com/4fe04e66781411e2890222000a1fb0b2_5.jpg pinkshosho --- http://distilleryimage10.s3.amazonaws.com/abaef1b4781b11e2a2ce22000a1fa411_5.jpg */
Obteniendo el client ID y el client Secret
Este paso es necesario para cada nuevo plugin. Regístrate en Instagram para obtener tu cliente_id y tu cliente_secret. El nombre del plugin debe contener solamente caracteres alfanuméricos, por ejemplo, en nuestro caso la hemos llamado programnet.
Información del plugin
Este es el lugar idóneo donde describir los datos base de tu nuevo plugin, es decir, el nombre, la url, el número de versión y el autor.
/* Plugin Name: Instagradam Plugin URI: http://wp.tutsplus.com/ Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed! Version: 1.0 Author: Adam Burucs Author URI: http://burucs.com/ */
Registrando el shortcode
Esto definirá el shortcode [instragradam], que se ejecutará basándose en la función instagradam_embed_shortcode.
// register shortcode add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );
Definiendo la función principal del shortcode
Aquí definiremos el núcleo principal de operaciones de nuestro plugin. El $atts y el $content deben definirse como ves aquí, pero no los usuaremos para este artículo.
// define shortcode
function instagradam_embed_shortcode( $atts, $content = null ) {
// ...
}
Creando variables
Vamos a necesitar una variable auxiliar para hacer el output de nuestra función y un recuperador de datos que utilice la Function API de WordPress. Esos son $str y $result, respectivamente:
// define main output $str = ""; // get remote data $result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );
Gestionando errores del feed
La selección principal controla los errores del feed (en algunos casos podemos obtener errores SSL, pero no es una solución para lo que describimos más adelante en este artículo).
Si hay algún error hacemos un echo en la página: Something went wrong....
if ( is_wp_error( $result ) ) {
// error handling
$error_message = $result->get_error_message();
$str = "Something went wrong: $error_message";
} else {
// processing further
// ...
}
Más variables
La variable $result contendrá los datos principales, para el procesamiento creamos otra auxiliar llamada $main_data. Necesitaremos también un contador para la iteración.
// processing further $result = json_decode( $result['body'] ); $main_data = array(); $n = 0;
En el bucle (parte 1)
Este bucle recorrerá todos los nombres de usuario y todas las miniaturas que necesitemos. Previamente he analizado el feed principal (la estructura del feed), para descubrir cómo obtener los datos que quiero. Es por eso que este paso es importante y no hay que olvidar que la estructura del feed de Instagram puede variar posteriormente.
Para este caso necesitaremos albergar el $d->user->username y el $d->images_>thumbnail->url
// get username and actual thumbnail
foreach ( $result->data as $d ) {
$main_data[ $n ]['user'] = $d->user->username;
$main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
$n++;
}
En el bucle (parte 2)
El la siguientes líneas, creamos el código HTML que contendrá las imágenes y enlaces del feed principal de Instagram. Estos links se abrirán en una nueva ventana, con el atributo target=”_blank”. Atento al espacio al final del string principal, básicamente es para hacer una separación.
// create main string, pictures embedded in links
foreach ( $main_data as $data ) {
$str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
}
La parte fácil
El shortcode estándar devolverá el contenido principal tal que así:
return $str;
Problemas con el SSL
En algunos casos, la función wp_remote_get puede funcionar mal. Para resolver esto necesitamos usar este código antes de las secciones principales del código.
// fix SSL request error
add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
function no_ssl_http_request_args( $args, $url ) {
$args['sslverify'] = false;
return $args;
}
Código completo
El código acabado debería verse así:
/*
Plugin Name: Instagradam
Plugin URI: http://wp.tutsplus.com/
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/
// fix SSL request error
add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
function no_ssl_http_request_args( $args, $url ) {
$args['sslverify'] = false;
return $args;
}
// register shortcode
add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );
// define shortcode
function instagradam_embed_shortcode( $atts, $content = null ) {
// define main output
$str = "";
// get remote data
$result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );
if ( is_wp_error( $result ) ) {
// error handling
$error_message = $result->get_error_message();
$str = "Something went wrong: $error_message";
} else {
// processing further
$result = json_decode( $result['body'] );
$main_data = array();
$n = 0;
// get username and actual thumbnail
foreach ( $result->data as $d ) {
$main_data[ $n ]['user'] = $d->user->username;
$main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
$n++;
}
// create main string, pictures embedded in links
foreach ( $main_data as $data ) {
$str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
}
}
return $str;
}
Fuente: Adam Burucs