Crear plugins para las entradas: insertar videos

Es algo habitual que pregunten cuál es la forma de automatizar ciertas tareas del blog, sobre todo, aquellas cosas que son rutinarias o repetitivas; por ejemplo, escribir cierto tipo de entradas o darle forma a cierto tipo de contenido sin tener que estar escribiendo códigos extensos. No es algo que pueda ser respondido de modo genérico, las necesidades son infinitas y por lo tanto, las soluciones también.

Plugins, gadgets, no son otra cosa que fragmentos de código que hacen ese tipo de cosas, son limitados, son específicos, tienen las opciones que les otorgó quien lo desarrolló y nada más. Son útiles o inútiles, dependen de cómo los usemos. Son ... indiscutibles.

En Blogger es fácil agregarlos excepto en las entradas, allí, los gadgets no pueden usarse y para simplificar la forma en que los escribimos y automatizar las cosas, no queda más remedio que usar JavaScript que es el único lenguaje que podemos aplicar y, básicamente, siempre haremos lo mismo, usar alguna función que los lea, que interprete ciertas cosas y las cambie.

Si modificamos nuestra plantilla de tal forma de tener identificadas las entradas de manera clara con un ID:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <p><data:post.body/></p>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

podremos ejecutar cualquier función haciendo referencia a ese ID, transfiriéndole el contenido del post y de esa forma podremos modificarlo:

<script type='text/javascript'>mifuncion(&#39;<data:post.id/>&#39;);</script>

En este ejemplo, lo que haremos es agregar videos; la entrada dirá algo así:

<div class="mivideo" rel="youtube" id="BQpZXUGRy1U"></div>

o así:

<div class="mivideo" rel="vimeo" id="33440713"></div>

o así o todo junto:

<div class="mivideo" rel="dailymotion" id="x4v6np_89-2"></div>

Cada uno de ellos es un DIV cuyo atributo class es mivideo, donde colocamos dos atributos extras: rel indicará el tipo de servicio e id será el ID del video que es el que vemos en las páginas de esos servicios.

Si pusiéramos eso en la entrada, no veríamos nada ya que no hay contenido. Así que agregaremos el llamado a la función tal como se indicaba antes:

<script type='text/javascript'>mostrarVIDEOS(&#39;<data:post.id/>&#39;);</script>

y ahora, deberíamos crear esa función y agregarla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
function mostrarVIDEOS(idPOST) {
  var divVerificar = "post-" + idPOST;
  var contenido = document.getElementById(divVerificar);
  // vamos a leer todos los divs del post
  var listaVideos = contenido.getElementsByTagName("div");
  if(listaVideos.length>0){
    for(var i=0; i<listaVideos.length; ++i) {
      // y vamos a buscar aquellos cuya clase sea mivideo
      if(listaVideos[i].className=="mivideo") {
        // si hay uno, extraemos el dato del atributo ID
        var elID = listaVideos[i].getAttribute("id");
        // extraemos el dato del atributo rel
        var elTIPO = listaVideos[i].getAttribute("rel");;
        // de acuerdo al tipo de video, armamos la dirección URL
        if(elTIPO=="youtube") {
          var laURL = "http://www.youtube.com/embed/" + elID + "?rel=0&fs=1&showsearch=0&showinfo=1";
        } else if(elTIPO=="vimeo") {
          var laURL = "http://player.vimeo.com/video/" + elID + "?portrait=0&color=ffffff";
        } else if(elTIPO=="dailymotion") {
          var laURL = "http://www.dailymotion.com/embed/video/" + elID;
        }
        // y creamos el código HTML que en este caso será una etiqueta iframe
        var salida = "<iframe width='480' height='360' marginwidth='0' marginheight='0' allowtransparency='true' align='middle' frameborder='0' scrolling='no' frameborder='0' allowfullscreen src='" + laURL + "'></iframe>";
        // y con esto, colocamos ese código HTML en el DIV que estaba vacio
        listaVideos[i].innerHTML = salida;
      }
    }
  }
}
//]]>
</script>

De ese modo, habremos insertado un video en el post y, como hemos definido todo con una clase, bastaría establecer reglas de estilo para darle forma; algo así:

<style>
  .mivideo {
    background-color: #000;
    border: 5px solid #303941;
    border-radius: 5px;
    box-shadow: 0 0 3px #FFF inset;
    display: block;
    margin: 10px auto;
    padding: 20px;
    text-align: center;
    width: 480px;
  }
</style>

Y el resultado sería el que se ve haciendo click acá.