Cómo usar @Codepen para insertar sus propios Pens o Código en los comentarios de @Blogger 23.7.17
Cómo usar @Codepen para facilitar la inclusión en los comentarios de Blogger de pens y códigos de forma más sencilla para el usuario: conversión automatizada de caracteres no permitidos y supresión de las partes no necesarias.
Cómo usar @Codepen para insertar sus propios Pens o Código en los comentarios de @Blogger
Desde hace ya algún tiempo este blog (hijo de Blogger para lo bueno y malo) permite a sus lectores incluir en los comentarios elementos que por defecto la plataforma no permite. Como Pens de @codepen, código formateado e imágenes.
Ello fue fruto de la colaboración desinteresada de un par de usuarios del blog que con sus aportaciones hicieron posible mi idea y deseo. Principalmente los colaboradores de EsCss
Furoya y Jorge MG.
Por si no conoces este CMS (Blogger) te diré que la dificultad estriba en que es muy restrictivo en el uso de ciertos caracteres en los comentarios de los lectores.
Principalmente con el < (el carácter, no su entidad Html) que lo toma como identificador del elemento inicial para la etiqueta (tag) de apertura de los elementos HTML. Así que si se encuentra uno espera que a continuación haya un elemento Html correctamente formado (cierre incluido).
Esta particularidad en los comentarios tiene dos consecuencias: si se incluye un < tiene que cumplir su expectativa de ser un elemento HTML correctamente formado y ser uno de los elementos que admite en ellos. De no ser así marca error y no se publica el comentario.
Y la lista de elementos que admite en el comentario es muy reducida:
- Enlaces
<a href=...>...</a> - Negritas
<b>...</b> - Itálicas
<i>...</i> - Énfasis
<em>...</em>
Para solventarlo la solución que tomé requiere de dos pasos. La primera la ha de hacer quien comenta y la segunda ya corre por cuenta del Blog:
- El uso de pseudoBBcodes al escribir el comentario para que no sea rechazado por el sistema al guardarlo.
- La sustitución de dicho pseudoBBcode por el elemento Html correspondiente al ser mostrado el comentario en la entrada.
Simple y sencillo ¿no? Eso creía yo. Pero olvidé el 1º corolario de la Ley de Murphy que dice:
Si algo puede salir mal, saldrá mal: si hay dos o más maneras de hacer algo y una de ellas puede resultar en una catástrofe, alguien se decidirá por esta
ergo:
Si el sistema tiene un fallo algún usuario lo pondrá de manifiesto más pronto que tarde.
1º paso: comentarista usa BBcodes
Para imágenes: [img] [/img]
Este es sencillo y no tiene ninguna complicación especial. El usuario sólo tiene que envolver la ruta a la imagen que quiere incluir en su comentario entre [img]aqui-la-ruta[/img] tal que así:
[img]https://2.bp.blogspot.com/mi-imagen.jpg[/img]
Este pseudoBBcode no ha planteado mayor problema. Si bien es cierto que ha sido usado en pocas ocasiones.
Para Código: [code] [/code]
El pseudoBBcode elegido para publicar código fue y es [code]...[/code] y a diferencia del anterior el usuario está obligado a sustituir todos y cada uno de los < por su entidad html <.
<!--El usuario escribe-->[code]
<div>
<p>Hola Mundo</p>
</div>
[/code]
<!--El Blog muestra--><div>
<p>Hola Mundo</p>
</div>
En este caso ya nos encontramos que si quien comenta se olvida de sustituir un solo < tiene asegurado el aviso de error y la no aceptación del comentario por el CMS.
Nadie, excepto el comentarista es consciente de ello. Su despiste sólo le afecta a él aumentando su grado de frustración y cabreo pero con paciencia puede subsanarlo.
Para pens: [pen] [/pen]
Esta es la que más esfuerzo supone para los usuarios y la que suele generar mayor frustración para todos. Comentarista, usuarios y este bloguero.
La razón es que el comentarista se ve obligado además del uso del pseudoBBcode a incluir sólo una parte del código que facilita Codepen para embutir sus pen, que es el siguiente:
<p data-height="268" data-theme-id="299" data-slug-hash="EPzRje" data-default-tab="result" data-user="Kseso" class='codepen'>See the Pen <a href='http://codepen.io/Kseso/pen/EPzRje/'>modal convertir code</a> by Kseso (<a href='http://codepen.io/Kseso'>@Kseso</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
De todo lo anterior sólo hay que tomar los atributos (y sus valores) del párrafo. lo que está dentro de la etiqueta de apertura del párrafo sin incluir <p y y su cierre de apertura>. Tal que así:
[pen]data-height="268" data-theme-id="299" data-slug-hash="EPzRje" data-default-tab="result" data-user="Kseso" class='codepen'[/pen]
<!-- El blog lo convierte a -->
<p data-height="268" data-theme-id="299" data-slug-hash="EPzRje" data-default-tab="result" data-user="Kseso" class='codepen'></p>
Con el tiempo y la ayuda de lectores del blog (especialmente Furoya y Jorge MG) he ido perfeccionando el script de conversión de los pseudoBBcode para asegurar su correcto funcionamiento.
Pero la semana pasada me encontré con un nuevo bug rómpelotodo
: si en el código para insertar los pens hay retornos de carro el sistema los convierte en elementos <br/> que al estar en la etiqueta de apertura de un párrafo significa que la rompen (cierran la apertura del <p>) antes de tiempo y por lo tanto la sustitución por el script falla y eso supone que tampoco el script de Codepen funcione.
[pen]data-height="268" data-theme-id="299" <!--retorno de carro-->
data-slug-hash="EPzRje" data-default-tab="result"<!--retorno de carro-->
data-user="Kseso" class='codepen'[pen]
<!--Se convierte en-->
<p data-height="268" data-theme-id="299" <br=""><!--cierra tag apertura del p-->
data-slug-hash="EPzRje" data-default-tab="result"<br/><!--salto de línea-->
data-user="Kseso" class='codepen'></p>
Usando Codepen para insertar sus pens en los comentarios de Blogger
Todo lo anterior resulta descorazonador tanto para el usuario del blog que ve como su pen no se muestra en el comentario tras tomarse tantas molestias y para mi como administrador del blog.
Así que tras algunos intentos frustrados para corregirlo actuando sólo en el script incluido en el blog para reemplazar los pseudoBBcodes opté por otra vía que incluye el facilitar la vida al usuario del blog:
- Facilitar la conversión de los
<en su entidad Html correspondiente< - Facilitar el código necesario (ni más ni menos) para insertar los pens de Codepen
Y en ambos casos ya encerrados en su pseudoBBcode correspondiente.
Por si estás interesado en implementarlo en tu blog te describo el proceso completo.
1º paso: Script en la plantilla
En primer lugar hemos de incluir en la plantilla del blog el script que realiza la conversión del marcado BBcode a su correspondiente elemento HTML cuando se muestren los comentarios.
Para ello yo he optado por incluirlo al final de todo con un condicional <b:if>...</b:if> para cargarlo sólo en los post y páginas estáticas que es donde se incluyen comentarios.
Se podría optar por hacer uso del condicional con la variable data:post.allowComments incluyendo el código siguiente en los b:includable
que crean los comentarios.
<!-- condicional por tipo de página -->
<b:if cond='data:blog.pageType in {"item","static_page"}'>
<script type='text/javascript'>
//<![CDATA[
(function(){
// id elemento donde se muestran los comentarios
var a=document.querySelectorAll("#comment-holder");
for(i=0;i<a.length;i++){var c=a[i].innerHTML;
// BBcode imágenes
c=c.replace(/\[img\](https?:\/\/.*?\.(jpg|gif|png|bmp).*?)\[\/img\]/gi,'<img src="$1" alt="una imagen en un comentario del blog"/>');
// BBcode pens
c=c.replace(/\[pen\](.*?class=["']codepen["'].*?)\[\/pen\]/gi,'</p><p $1></p><p>');
// BBcode código
c=c.replace(/\[code\](.*?)\[\/code\]/gi,'<code>$1</code>');
a[i].innerHTML=c
}})();
// Insertamos el script de Codepen sólo si en la página (cuerpo del post o comentarios) se inserta algún pen:
addEventListener('DOMContentLoaded', function() {
if (document.querySelector('.codepen') != null) {
var jsPens=document.createElement('script');
jsPens.src='https://production-assets.codepen.io/assets/embed/ei.js';
jsPens.async='true';
document.body.append(jsPens);}});
//]]>
</script>
</b:if>
Con posterioridad a esta realización decidí ampliar el código para que el script de codepen sólo se incluya (y por lo tanto haga la petición) sólo si existe algún pen insertado en la página. Ya sea en el cuerpo del post o en algún comentario. Es la última función del código previo. Gracias, Jorge MG.
2º paso: Convertir códigos para insertar en el comentario
El segundo paso consiste en facilitar la vida al usuario para que pueda realizar la conversión de todos y cada uno de los < y > de su código HTML a sus entidades < y > y para seleccionar sólo lo necesario del código que facilita Codepen para embutir el pen en su comentario sin temor a cometer errores.
Para ello he creado un pen en Codepen que además de convertir los códigos incluye el BBcode correspondiente y da la opción de copiar el resultado al con pulsar el botón Copy Code:
See the Pen modal convertir code by Kseso (@Kseso) on CodePen.
Como ya es proverbial mi ignorancia en Javascript todo es resultado de códigos ajenos que a base de error y equivocación
constante he adaptado para mis necesidades. Tienes los créditos en los pens.
Por qué en un pen exterior y no en el blog
Esta herramienta (pen) la tienes enlazada en el aside de los comentarios en todos los artículos para que puedas hacer uso y abuso de ella.
En el primer borrador y en local en vez de la opción de Copy Code
estaba otro botón para pasar el código generado al textarea del comentario. Mucho más práctico y funcional.
Digo que estaba porque mi intención inicial era en vez de remitirte a un pen crear un nodal (mediante el oportuno icono) en el propio blog con el conversor y la opción de pasar el código al cajetín del comentario.
Pero me topé con otra de las particularidades de Blogger y su forma de hacer: el textarea para escribir comentarios lo genera en un iframe. Así que...
Otra vía que puedes explorar en vez de abrir en el navegador una pestaña nueva con el pen de conversión es hacerlo mediante el oportuno modal que se sobreponga a todo. Para ello posíblemente te venga como anillo al dedo el post en este blog de Jorge MG Generando ventanas modales con Javascript puro. Sólo tienes que quedarte con la parte correspondiente a modal con iframe
Yo personalmente creo que si no puedo automatizar totalmente el proceso para convertir los diferentes códigos con un click e incluirlos en el comentario con otro click no tiene sentido aumentar el peso y peticiones de la plantilla con todos los recursos para generar los dos modales. Mejor sólo un enlace aunque ello suponga un click a mayores.
Espero que os sea de ayuda y ya puestos pediros que, al menos en este artículo, abuséis de ella insertando algún pen o código.
Así la pones a prueba y me das tu opinión al respecto.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
¡Cómo! Si está el conversor en formulario, ¡Ahora falta el bookmarklet!
ResponderEliminar[code]
<body>
<a href="javascript:alfa=prompt('Pegue el código del Pen aquí.','<p ... >').replace('<p','[pen]').replace('\<','').split('>'); prompt('Copie este código para pegar en Blogger.',''+alfa[0]+'[/pen]');void(0)">
!Convierte Pen para Blogger.
</a>
</body>
[/code]
Je. Y después el complemento.
Buen trabajo. No sé si mi opinión vale algo, pero los felicito.
Furoya y compañía:
EliminarSe que está feo además de ser contraproducente para mis intereses desvelar los motivos ocultos e inconfesables que hacen que publique estos engendros de artículos sobre javascript.
Pero como se que no se enterará nadie aquí va:
—— Tengo una idea de bombero
——— Pergeño un horror
———— Lo publico
(aplica la máxima: no preguntes, da una respuesta errónea y te darán la correcta) ;-)
————— Alguno de vosotros, master genius js, me sugerirá la forma correcta.
¡¡¡PROFIT!!!
Un saludo
xD xD xD ;-)
Bueno, yo los felicité a ambos porque Jorge MG y vos estuvieron dando vueltas al asunto hasta que lo resolvieron. En realidad, la mayor congratulación debería ser para vos, porque me consta que no sabías ni medio código de JS hasta hace unos meses, y ahora ya estás ofreciendo formularios de conversión. No me quise meter, porque Jorge sabe de esto mucho más que yo, cuando se me ocurrió una idea ... él ya la había probado y descartado. XP
EliminarAhora se me ocurrió la broma del bukmárklet, y después alguien va a hacer el plug-in o el complemento para navegadores, y ...
Pero yo, no. El BML que puse arriba ni funciona en Chrome. Soy una vergüenza.
Resulta que el prompt de blink sí interpreta los saltos, así que estamos en la misma. Como en su entorno no hay interferencias de Blogger, es más fácil de resolver, así que acá hay una versión mejorada.
[code]
<body>
<a href="javascript:(function(){CPK=prompt('Pegue el código del Pen aquí.','<p ... >').replace('<p','[pen]').replace(/r?\n|\r|\</g,'').split('>'); prompt('Copie este código para pegar en Blogger.',''+CPK[0]+'[/pen]')})()">
!Convierte Pen para Blogger.
</a>
</body>
[/code]
Con mis disculpas.