Prezi en WordPress con oEmbed


En un artículo anterior contábamos cómo aprovechar el protocolo oEmbed soportado por WordPress para incrustar vídeos de YouTube en nuestro sitio, y también dedicamos otro a explicar una manera de evitar que las cookie«galleta», pequeño archivo de información que envía un sitio web, y que se almacena en tu navegador
cookie
s de estos vídeos se instalaran sin remedio en los equipos de nuestros visitantes. En esta entrada, utilizaremos el mismo protocolo para incrustar una presentación de Prezi.

prezi

Probablemente ya sabes que Prezi es un sitio web de presentaciones para explorar y compartir ideas sobre un documento virtual basado en la informática en la nube. Una vez te registres en la plataforma, puedes realizar presentaciones interactivas, partiendo de modelos predefinidos, combinando algunos de ellos y/o creando nuevos elementos. Después, la gente puede visitar directamente tu presentación en el sitio de Prezi, pero también, como hemos hecho aquí, puedes insertarla en tu propia página web, para lo cual debes utilizar una marca <iframe> cuyo origen sea la dirección de la misma. Por ejemplo, la siguiente es la presentación de nuestra empresa, APLICACIONez®, que puedes ver arriba, pero también haciendo clic en el siguiente enlace:

https://prezi.com/qrmyem1yryur/aplicacionez-emprendemos-juntos/

En realidad, la última parte de la dirección es simplemente para hacerla amigable, porque lo que identifica nuestra presentación, aquello que en realidad la distingue de otra, inequívocamente, es el llamado identificador, qrmyem1yryur, por lo cual bastaría con una dirección más corta:

https://prezi.com/qrmyem1yryur/

Y la marca que necesitamos para incrustarla en cualquier documento HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
sería semejante a esta:

<iframe width="600" height="300" src="https://prezi.com/embed/qrmyem1yryur/"></iframe>

 

 

Prezi y oEmbed

Lo que nos interesa ahora es insertar presentaciones de Prezi en WordPress sin tener que construir una marca así cada vez, escribiendo simplemente la dirección, como hicimos anteriormente con los vídeos de YouTube, gracias al protocolo oEmbed. Es decir: queremos escribir únicamente en cualquiera de nuestras entradas, en el editor de WordPress, una línea parecida a esta,

https://prezi.com/qrmyem1yryur/

 

y que la presentación aparezca en la propia entrada, ante nuestros visitantes, y estos puedan interactuar con ella.

El problema radica en que, como ya dijimos, el protocolo oEmbed solo puede utilizarse directamente con aquellos recursos que sean servidos por sitios que lo soporten. Y si atendemos a las páginas de WordPress dedicadas a este tema, en la que se listan estos sitios, descubriremos que Prezi no aparece entre ellos. Puede que esto cambie en el futuro, por lo cual hemos querido copiar —y traducir en lo posible— de la dirección  https://codex.wordpress.org/Embeds  la siguiente tabla:

Servicio Tipo Desde
Animoto Vídeos WordPress 4.0
Blip Vídeos WordPress 2.9
Cloudup Vídeos, Galerías, Imágenes WordPress 4.4
CollegeHumor Vídeos WordPress 4.0
DailyMotion Vídeos WordPress 2.9
Flickr Vídeos & Imágenes WordPress 2.9
FunnyOrDie.com Vídeos WordPress 3.0
Hulu Vídeos WordPress 2.9
Imgur Imágenes WordPress 3.9
Instagram Imágenes WordPress 3.5
Issuu Documentos WordPress 4.0
Kickstarter Proyectos WordPress 4.2
Meetup.com Varios WordPress 3.9
Mixcloud Música WordPress 4.0
Photobucket Imágenes WordPress 2.9
PollDaddy Encuestas y Sondeos WordPress 3.0
Reddit Entradas y Comentarios WordPress 4.4
ReverbNation Música WordPress 4.4
Scribd Documentos WordPress 2.9
SlideShare Presentaciones WordPress 3.5
SmugMug Varios WordPress 3.0
SoundCloud Música WordPress 3.5
Speaker Deck Presentaciones WordPress 4.4
Spotify Música WordPress 3.6
TED Vídeos WordPress 4.0
Tumblr Varios WordPress 4.2
Twitter Redes sociales WordPress 3.4
VideoPress Vídeos WordPress 4.4
Vimeo Vídeos WordPress 2.9
Vine Vídeos WordPress 4.1
WordPress.tv Vídeos WordPress 2.9
YouTube Vídeos WordPress 2.9

 
Un vistazo nos dará la conclusión de que no podemos usar oEmbed para incluir presentaciones Prezi en nuestro sitio, por lo menos en teoría. Esto no ocurre con las de SlideShare, y Speaker Deck, como puedes ver en la tabla, y con medios de otros sitios que ofrecen vídeos, imágenes, galerías, encuestas y sondeos, etc., y que sí están listados en la misma. Con ellos, este artículo no es necesario.

 

Dar de alta otro sitio

Pero, como también dijimos en anteriores capítulos de esta serie, mediante la función wp_oembed_add_provider()  es posible dar de alta en WordPress cualquier sitio que no haya sido definido por defecto, siempre que soporte oEmbed. Por tanto, habrá que averiguar, en primer lugar, si Prezi lo soporta o no, a pesar de no aparecer en la tabla anterior, algo que podemos consultar en las páginas de los desarrolladores del protocolo, donde aparecen algunos que sí prestan este servicio:

http://oembed.com/#section7

 

No hace falta que busques en esa lista Prezi, porque ya lo hemos hecho, y podemos decirte que no se encuentra en ella. Por tanto, la función que acabamos de citar no nos sirve en este caso, y no perderemos más tiempo explicando qué otros problemas deberíamos solucionar antes de poder usarla.

 

Instruyendo a WordPress

La primera buena noticia es que en WordPress siempre hay más de una forma de hacer las cosas.  La segunda, que admite también el uso de sitios que no soporten directamente oEmbed, aunque para eso debamos escribir un poco más de código, instruir al sistema en la manera correcta de comunicarse con esos sitios. Para eso contamos con una función que nos permite registrar un nuevo manejador (handler) de recursos, y cuya firma es esta:

wp_embed_register_handler( $id, $regex, $callback, $priority )

 

La función requiere tres parámetros ($id$regex y $callback) y admite uno opcional ($priority). El primero, $id, es un identificador que debe ser único para el proveedor que deseamos registrar, y que en nuestro caso llamaremos imaginativamente prezi:

wp_embed_register_handler('prezi',
                    $regex,
                    $callback,
                    $priority );

 

El segundo argumento, $regex, debe contener una expresión regularUna expresión regular es una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones.
regular expression→regex
que permita a WordPress reconocer la dirección del sitio y del recurso en cuestión, así como cada una de sus partes. Puesto que explicar en detalle el significado de una expresión regular excede el ámbito de este artículo, te aconsejamos que hagas lo que hace todo el mundo con una expresión regular: copiarla tal cual. En concreto, la que necesitamos para la dirección de Prezi es la siguiente:

/.*prezi\.com\/(.+?)\/.*/

 

Así que la llamada a la función, con los dos primeros parámetros quedaría ahora de este modo (no olvides entrecomillar también la expresión regular):

wp_embed_register_handler('prezi', 
                  '/.*prezi\.com\/(.+?)\/.*/', 
                  $callback,
                  $priority );

 

Ahora necesitamos nombrar un procedimiento callbackEn programación de computadoras, una devolución de llamada o retrollamada es una función \"A\" que se usa como argumento de otra función \"B\". Cuando se llama a \"B\", esta ejecuta \"A\".
callback
donde digamos a WordPress qué marca HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
deberá añadir a nuestras páginas para que realmente se muestre la presentación que queremos incrustar. Más tarde definiremos las acciones de este procedimiento, pero ahora nos basta con darle un nombre, que en este caso será aplicacionez_embed_prezi, y que añadimos como valor del tercer parámetro, $callback :

wp_embed_register_handler('prezi', 
        '/.*prezi\.com\/(.+?)\/.*/', 
        'aplicacionez_embed_prezi',
         $priority );

 

Si olvidamos el argumento $priority, que ya hemos dicho es opcional, podemos considerar que ya tenemos completa la llamada a la función:

wp_embed_register_handler('prezi', 
        '/.*prezi\.com\/(.+?)\/.*/', 
        'aplicacionez_embed_prezi' );

 

Pero no funcionará, al menos todavía. Si la añadimos al fichero functions.php de nuestro tema obtendremos un error del intérprete de PHPpreprocesador de hipertexto
PreHypertext Processor
porque WordPress será incapaz de encontrar la función callbackEn programación de computadoras, una devolución de llamada o retrollamada es una función \"A\" que se usa como argumento de otra función \"B\". Cuando se llama a \"B\", esta ejecuta \"A\".
callback
  aplicacionez_embed_prezi, ya que esta todavía no existe. Aunque vamos a arreglar eso en un momento, definiéndola de este modo:

function aplicacionez_embed_prezi( $matches, $attr, $url, $rawattr ) {
    $id = $matches[1];
    $embed = '<iframe src="https://prezi.com/embed/' .
            $id . '/"' .
            ' width="860"' .
            ' height="645">' .
            '</iframe>';
    
    return apply_filters( 'embed_prezi', 
            $embed, $matches, 
            $attr, $url, $rawattr );
}

 

 

No me he inventado los parámetros de la función, sino que son los que utiliza oEmbed para cargar cualquier medio, y los he tomado del código de wp-includes/embed.php . Aunque no utilizaremos hoy más que uno de ellos, $matches, en la línea 2, en una instrucción que se encarga de obtener el identificador de nuestra presentación de la dirección que escribamos en el editor de WordPress. Después, las líneas 3 a 7 se ocupan de construir la marca <iframe> necesaria, con una anchura (width="860") y altura (height="645") predeterminadas. Y, finalmente, la última instrucción retorna el resultado de aplicar un filtro (filter), que es el responsable de insertar la marca <iframe> en el contenido HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
.

 

El código completo

Si quieres poder escribir a partir de ahora solamente la dirección de una presentación de Prezi en tus publicaciones con WordPress, debes incluir en el archivo functions.php de tu tema este código:

function aplicacionez_embed_prezi( $matches, $attr, $url, $rawattr ) {
    $id = $matches[1];
    $embed = '<iframe src="https://prezi.com/embed/' .
            $id . '/"' .
            ' width="860"' .
            ' height="645">' .
            '</iframe>';
    
    return apply_filters( 'embed_prezi', 
          $embed, $matches, 
          $attr, $url, $rawattr );
}


wp_embed_register_handler( 'prezi',
          '/.*prezi\.com\/(.+?)\/.*/',
          'aplicacionez_embed_prezi'  );

 

Y ya está. Edita una entrada, e incluye una línea como esta en cualquier parte, la que quieras, de tu contenido:

https://prezi.com/embed/qrmyem1yryur/

 
WordPress se ocupará del resto. Probablemente antes de guardar la entrada ya estarás viendo, incluso en el propio editor, la presentación.

 

Sobre las cookies de Prezi

Quizá ahora te preguntes si la inclusión de una presentación como la nuestra deja una serie de cookie«galleta», pequeño archivo de información que envía un sitio web, y que se almacena en tu navegador
cookie
s en los computadores de nuestros visitantes, sin que podamos recabar su consentimiento, como sucedía con los de YouTube. Y así es: nada menos que 21 cookie«galleta», pequeño archivo de información que envía un sitio web, y que se almacena en tu navegador
cookie
s. Pero no es un problema, o por lo menos lo tenemos solucionado, porque en el artículo anterior  de esta serie explicamos cómo añadir un filtro (filter) a nuestro tema para que cualquier medio insertado mediante oEmbed —no solamente los vídeos de YouTube, como era el caso entonces, sino cualquier otro recurso— no se muestren si el usuario no ha aceptado la política de privacidad. Basta con añadir a nuestro archivo functions.php el código que expusimos en dicho artículo, y que para tu comodidad reproducimos también aquí, aunque cambiando el nombre original de la función, prueba_cookies_youtube, por uno que se ajusta más a su carácter general, prueba_cookies_oembed:

function prueba_cookies_oembed (  $output  ) {
    $myStr= '';
        if( isset( $_COOKIE['blogapliezCook'] ) ) {
            $myStr= $output;
        }
    return $myStr;  
  }
add_filter( 'embed_oembed_html', 'prueba_cookies_oembed'  );

 

El cambio obedece únicamente a nuestra corrección o decoro como programadores, ya que el código funcionará igual con el nombre original. En definitiva, lo importante es que con él capturamos el momento en que va a insertarse un medio externo y, solamente lo insertamos si el usuario ha aceptado las cookie«galleta», pequeño archivo de información que envía un sitio web, y que se almacena en tu navegador
cookie
s y en su sistema se encuentra una que lo demuestra.

 

Conclusión

Por supuesto, podríamos complicar más la función que hemos escrito para instruir a WordPress en la inserción de medios de Prezi. Por ejemplo, para que la presentación no ocupe una anchura y una altura predeterminadas, sino variables, a voluntad del editor de la entrada. O para que se adapte a los distintos dispositivos de los internautas (responsive web design). Solo habría que jugar con la expresión regular y con algunos de los argumentos de nuestra función aplicacionez_embed_prezi().

¿Te atreves a probar por tu cuenta? Si es así, agradeceríamos que nos enviaras tu contribución para publicarla en estas páginas. Por nuestra parte, hemos decidido vadear el problema, en vez de solucionarlo en PHPpreprocesador de hipertexto
PreHypertext Processor
,  con algo de JavaScriptlenguaje de programación de guiones. Lo veremos en una futura entrega.



2 comentarios a “Prezi en WordPress con oEmbed”

Puedes dejar una respuesta o hacer Trakback para esta entrada.
  1. It is the best time to make some plans for the longer term and it’s time to be happy.
    I’ve read this submit and if I may just I wish to suggest you some attention-grabbing issues or advice.
    Maybe you could write next articles relating to this article.

    I wish to learn even more things about it! http://yahoo.net

  2. I simply want to mention I’m all new to blogging and seriously savored this blog site. Most likely I’m want to bookmark your blog . You actually come with exceptional article content. Thanks a bunch for sharing your web page.

Escribe una respuesta o un comentario

Tu dirección de correo no será publicada.