Cómo diseñar un Plugin de Instagram a medida

¿Necesitas que en tu tienda o en tu web se muestren sólo las publicaciones de Instagram que tú quieres? En ocasiones, en Instagram no sólo publicamos contenido relacionado con los productos de nuestra empresa, si no también imágenes inspiracionales o divulgativas que poco tienen que ver con el canal de venta.

Hace poco trabajamos en un proyecto donde nuestro cliente quería tener el control de todas las publicaciones que se mostraban de Instagram en la Home, es decir, necesitaba elegir qué contenido se visualizaba y cuál no. Además, este proyecto también requería la integración con otros productos de WooCommerce para que la presentación de la tienda fuera integral. ¿Quieres conocer cuál fue la solución que le ofrecimos?

Brief del cliente

Poder seleccionar aquellas imágenes de Instagram que se quieren mostrar en la Home e integrar el plugin con los productos de WooCommerce.

Estrategia de Iniciativatec

Antes de comenzar con el proyecto, estuvimos analizando muchos plugins del mercado, los que eran sencillos no ofrecían un diseño atractivo que se integrara con la tienda, otros eran demasiado complejos para su uso o tenían un elevado coste. Tras un exhaustivo análisis y conociendo la API creímos que la mejor opción era diseñar un plugin a la medida de las necesidades de nuestro cliente.

Cómo desarrollar un plugin de Instagram a medida paso a paso

Paso 1. Crear un Token

La primera parte reconocemos que fue la más compleja. Tuvimos que generar un Token en la zona de Desarrolladores. Primero fue en Instagram y luego se tuvo que modificar por la de Facebook Developers.

Paso 2. Recopilar la información de la fuente

En el momento tuvimos el Token, el siguiente paso fue recoger la información de Instagram. Esto se realiza mediante el siguiente código:

$your_token= "TU-TOKEN-GENERADOR-EN-FACEBOOK-DEVELOPERS";
$remote_wp= wp_remote_get( "https://api.instagram.com/v1/users/self/media/recent/?access_token=". $your_token );

Y utilizamos json_decode que nos convirtió un string codificado en JSON a una variable:

$instagram_response= json_decode( $remote_wp['body'] );

Paso 3. Disponer de los datos básicos

Con todos estos procesos, sólo nos quedaba recorrer mediante un bucle el Array y ya contamos con los datos básicos:

foreach( $instagram_response->data as $m) {
    $m->link; $m->id; $m->images->standard_resolution->url;
}

Recuerda que puedes controlar si la respuesta es correcta desde el servidor mediante:

if($remote_wp['response']['code'] == 200){...}

Paso 4. Elegir las publicaciones a mostrar

Por último, agregando HTML + CSS y controlando la cantidad de las publicaciones que se quiere mostrar queda algo así:

$html = '<section class="homePage-instagramMoments">
    <aside class="background-deco background-deco-left jn-border-c-goldenrod" style="top: 0px">
    </aside>
    <div class="container">
    <div class="homePage-instagramMoments-title">
    <span class="homePage-instagramMoments-title-text">#Iniciativatec Moments</span>
    <span class="homePage-instagramMoments-title-icon">
    <i class="i-jn-instagram"></i>
    </span>
    </div>';

$your_token = 'TU-TOKEN-GENERADOR-EN-FACEBOOK-DEVELOPERS';   
$ig_user_id = 'self';
$remote_wp = wp_remote_get( "https://api.instagram.com/v1/users/" . $ig_user_id . "/media/recent/?access_token=" . $your_token);
$instagram_response = json_decode( $remote_wp['body'] );
$number = 1;
if( $remote_wp['response']['code'] == 200 ) {
    $html .= '<div class="homePage-instagramMoments-gallery row">';
    foreach( $instagram_response->data as $m ) {
        if($number<=4){
            $html .= '<div class="col-sm-3 instagramMoments">
            <a href="' . $m->link . 'embed" data-iziModal-group=" instagramMoments" id="media-' . $m->id . '" class="type-' . $m->type . ' trigger">
            <div class="homePage-instagramMoments-gallery-item" style="background-image: url(' . $m->images->standard_resolution->url . ')">
            </div></a></div>';
        }
        $number++;
    }
    $html .= '</div>';
} elseif ( $remote_wp['response']['code'] == 400 ) {
    $html .= '<b>' . $remote_wp['response']['message'] . ': </b>' . $instagram_response->meta->error_message;
}
$html .= '</div>
</section>';

return $html;

Como puedes ver, éste es el código base. Una vez lo tengas puedes poner en una función, crear un shortcode, integrarlo con un modal, aplicarle una cache por Transients de WordPress y unas cuantas cosas más.

Esperamos que te haya resultado útil este caso práctico que aplicamos a uno de nuestros clientes. Recuerda, si quieres saber alguna cosa más, sólo tienes que preguntarnos.

Deja una respuesta

 

¿Hablamos?

Para contactar directamente, haz click en el icono

o rellena el siguiente formulario y te contactamos a la mayor brevedad posible