Cómo crear ventanas modales de Instagram

¿Buscas que los usuarios de tu web puedan interactuar con tu Instagram sin necesidad de salir de la página? Uno de nuestros clientes requería poder implementar esta funcionalidad en su tienda, añadir un sistema de ventana modal para visualizar cada una de las publicaciones de Instagram mostradas en la Home. Si tú también estás pensando cómo hacerlo, presta atención a este artículo donde te lo explicamos paso a paso.

Brief del cliente

Crear ventanas modales para que el usuario pueda interactuar desde la Home (ver publicaciones, darle a like, comentar, compartir…) las publicaciones de Instagram de la marca.

Estrategia de Iniciativatec

Siempre al comenzar un nuevo proyecto realizamos parte de investigación y análisis para saber si podemos adaptar a nuestras necesidades alguna funcionalidad ya diseñada en el mercado. Así, después de analizar diferentes librerías de javascript y jQuery, decidimos utilizar el complemento izi-modal porque es el que dispone de las funcionalidades necesarias y más control sobre el diseño nos permitía. Además, su desarrollo es bastante sencillo.

Cómo crear ventanas modales de Instagram en tu web

Paso 1. Cargar la librería

En primer lugar, tenemos que cargar los componentes de la librería js. Para ello, utilizamos una función para cargar la ruta de la librería:

function js_modal_izi(){
    wp_register_script( 'izi-script', plugin_dir_url( __FILE__ ) . '/js/iziModal.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'izi-script' );
}

Luego hacemos que lo encole con los demás js en el head:

add_action('wp_enqueue_scripts', 'js_modal_izi');

Paso 2. Cargar los estilos

En segundo lugar, hacemos lo mismo para cargar los estilos CSS de la librería, hacemos la llamada al archivo CSS mediante la siguiente función:

function css_modal_izi(){
    wp_register_style( 'izi-styles',  plugin_dir_url( __FILE__ ) . '/css/iziModal.min.css' );
    wp_enqueue_style( 'izi-styles' );
}

Y la encolamos en la carga de CSS de head:

add_action('wp_enqueue_scripts', 'css_modal_izi');

Paso 3. Controlar los clicks de las publicaciones

Por último, hemos desarrollado una función que controla el evento de clic en cada uno de los elementos (publicaciones Instagram) y le pasa los parámetros de visualización de la ventana modal para que se muestre con todos los datos de dicha publicación:

function izi_jane_func() { ?>
<script> 
    jQuery( document ).ready( function( $) {
        $(document).on('click', '.trigger', function (event) {
            event.preventDefault();
            $('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
        });
        $('#modal-iframe').iziModal({
            title: 'Instagram',
            headerColor: '#11294d',
            iframe: true,
            closeOnEscape: true,
            closeButton: true,
            iframeHeight: <?php echo (wp_is_mobile()) ? 600 : 800;?>
        });
    });
</script>

Esperamos que este caso te haya resultado de tu interés. Puedes ver otras estrategias interesantes en la sección de Proyectos. Y recuerda, estamos a tu disposición para cualquier consulta o presupuesto desde nuestro apartado de Contacto.

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