Cómo instalar Disqus en páginas AMP de WordPress

1638797850 Como instalar Disqus en paginas AMP de WordPress

Te voy a mostrar como puedes instalar Disqus en páginas AMP (Páginas móviles aceleradas) para tener sus comentarios de WordPress. Y para eso, nada mejor que enseñar pasito a pasito de qué forma hice este weblog, en el que instalé (por último) el conocido AMP que tanto le agrada a Google. 🙂

¡Vamos a meternos en líos!

Índice

    Cómo habilitar Disqus en páginas AMP

    Bueno, sí, ya tengo las páginas AMP configuradas en las publicaciones de este weblog para cargar mas rápido celular, algo que Google lleva meses destacando, sale mal ...

    Es como cuando escuchas una canción en la radio y dices: boah que carajo. Y al final de percibir tanta música todo el tiempo acabas diciendo: ¡Es la mejor canción que he escuchado!

    (Sí, aun si es Justin Bieber ...)

    En caso de que todavía no sepas precisamente qué demonios son las páginas AMP, te invito a este blog post donde lo explican con perfección.

    En resumen, te afirmaré que son páginas HTML muy simples (Ahí está la clave que cargan tan veloz), y por esa razón vas a ver que en la versión AMP de tus publicaciones de WordPress ... ¡No aparecen comentarios!

    Has sido como el cánido, ¿verdad? Así es como llegué ...

    Aparentemente es "normal" (cuando menos lo he comprobado en múltiples weblogs de WordPress que utilizan AMP), mas me da la sensación de que suprimir comentarios de una publicación es como comer un bocadillo para niños: ¡feísimo!

    Porque los comentarios son los que dan vida a una publicación, no importa cuántos AMP tenga, ¿no crees?

    afortunadamente me agrada Diales más que echarse una siesta, y resulta que no hace mucho anunciaron que su sistema de comentarios era compatible con el conocido Móvil acelerado Páginas. ¡Hola! 💃🏻

    Por supuesto, ya te advertí que lo que debes hacer es un tanto confuso ... Pero para eso está este blog post, para ponértelo más simple. 🙂

    Explico como lo hice en este weblog paso a paso.


    👣 Paso 0: Requisitos para tener páginas AMP con Disqus

    Bueno, en primer sitio, ¡debes tener el sistema de comentarios Disqus instalado en tu WordPress, lógicamente!

    Si todavía no lo tienes, deja de preocuparte, acá tienes un buen tutorial para instalar Disqus en WordPress y vas a ver que en unos minutos va a estar listo.

    Y, lógicamente, asimismo precisa WordPress para configurar las páginas AMP. Y voy a ser franco contigo, esto es el pero simple de todo el proceso.

    En mi caso usé esta guía de Álex Serrano y esta de Joost de Valk, autor del conocido complemento SEO de Yoast. Si asimismo utiliza este complemento de posicionamiento en buscadores, los próximos pasos para tener Google AMP feliz en su WordPress dismuyen a esto:

    1. Instale y active el complemento AMP para WordPress.

    Con eso, ya vas a tener activadas las páginas AMP y vas a poder revisar si al final de la URL de alguna de tus publicaciones que agregues / amp / (O bien ? amperio = 1 si no tiene los links permanentes habilitados en su WordPress, lo que aconsejo al cien%).

    También en el menú del panel de control de WordPress Apariencia> AMP puede escoger el tono del texto del encabezado y su color de fondo. No es mucho, mas es algo ...

    1. Instale y active el complemento Glue para Yoast posicionamiento en buscadores & AMP.

    En realidad, es una extensión del complemento Yoast que añade la capacidad de personalizar un tanto más las páginas AMP: colores, logo, estilos CSS, código de Google Analytics para AMP, etc.

    En mi caso, lo empleo eminentemente para poner el código de Google Analytics (lo que hace de forma automática si empleas el complemento Google Analytics de MonsterInsights como lo hago) y para poner ciertos estilos CSS auxiliares que más me agradan.

    ¡Y es eso! 🙂

    Unos días después de instalar AMP, puede contrastar el informe de páginas móviles aceleradas en Search Console si Google las está indexando y si tiene algún fallo que corregir (asimismo puede contrastar de manera directa con este validador de páginas AMP o bien el validador en sí mismos. Consola de busca de Google)

    Y de esta manera es como Google muestra las páginas AMP en los resultados de los motores de búsqueda:

    Google marca las páginas de AMP en los resultados de búsqueda

    👣 Paso 1: Crea un fichero HTML

    El propósito de este fichero es tener su código HTML cargado en cada una de las publicaciones del weblog, y de esta manera recobrar los comentarios del blog post en cuestión.

    Es simple, solo precisa crear un fichero HTML (de su weblog de notas, por servirnos de un ejemplo) y añadir este código HTML:

    <div id="disqus_thread"></div>
    <script>
    window.addEventListener('message', receiveMessage, false);
    function receiveMessage(event)
    {
     if (event.data) {
     var msg;
     try {
     msg = JSON.parse(event.data);
     } catch (err) {
     // Do nothing
     }
     if (!msg)
     return false;
    
     if (msg.name === 'resize') {
     window.parent.postMessage({
     sentinel: 'amp',
     type: 'embed-size',
     height: msg.data.height
     }, '*');
     }
     }
    }
    </script>
    <script>
     function getQueryVariable(variable) {
     var query = window.location.search.substring(1);
     var vars = query.split("&");
     for (var i=0;i<vars.length;i++) {
     var pair = vars[i].split("=");
     if(pair[0] == variable){return pair[1];}
     }
     return(false);
     }
     var disqus_config = function () {
     this.page.url = decodeURIComponent(getQueryVariable("url")); // Replace PAGE_URL with your page's canonical URL variable
     this.page.identifier = decodeURIComponent(getQueryVariable("identifier")); // Replace PAGE_IDENTIFIER with your page's unique identifier variable
     };
     (function()  d.body).appendChild(s);
     )();
    </script>

    Indiqué en colorado el nombre de mi cuenta de weblog en Disqus, por el hecho de que acá deberías reemplácelo con lo que utiliza en su weblog en Disqus.

    Ahora puede guardar el fichero con el nombre que desee. En mi caso, por servirnos de un ejemplo, por el hecho de que tiene Disqus en páginas AMP, en una demostración de originalidad que llamé disqus-amp.html. 🙂

    👣 Paso 2: Cargue el fichero a un dominio con certificado SSL

    Aquí las cosas comienzan a complicarse ...

    Te puede Interesar  ¿cuál es el mejor servicio de hospedaje?

    Para utilizar Dials en AMP, debe cargar el fichero HTML en un dominio diferente al que empleas para tu blog y que asimismo es un dominio seguro, con certificado SSL.

    Cómo utilizar otro dominio que no me agrada mucho y no me pareció muy prudente, procuré utilizar un subdominio de miposicionamientoweb.es, por el hecho de que al fin y a la postre, los subdominios se comportan tal y como si fuesen dominios diferentes.

    Aclaración:

    Te dejo un blog post que hice por si acaso no lo tienes clarísimo que son dominios y subdominios.

    Y en este vídeo puedes ver cómo puede crear de manera fácil un subdominio de su alojamiento con cPanel, el panel de control de la mayor parte de los alojamientos:

    Entonces me transformé en el subdominio ssl.miposicionamientoweb.es y después cargué mi fichero HTML: https://ssl.miposicionamientoweb.es/disqus-amp.html.

    Pero falta una cosa: este subdominio debe tener un certificado SSL a fin de que los comentarios funcionen en AMP.

    Los certificados SSL pueden valer desde veinte € por año más o menos, mas merced a vamos a cifrar puedes tener uno certificado ssl gratis. El único inconveniente que tienen es que expiran después de tres meses, mas para algo tan simple como eso (no estamos configurando una tienda en línea ni nada semejante) nos marcha bien.

    La buena nueva es que la mayor parte de los distribuidores de alojamiento están empezando a instalar este certificado SSL gratis. En Raiola Networks, por servirnos de un ejemplo, lo activan de forma automática, y en Webempresa puedes activarlo mismo con un simple click.

    Y también mismos renuevan tu certificado cada tres meses, ¿qué más se puede solicitar?

    Si no tiene su alojamiento con ellos, siempre y en toda circunstancia puede ponerse en contacto con su distribuidor de alojamiento y solicitarles que activen el certificado SSL gratis de vamos a cifrar para su nuevo subdominio.

    En mi caso ya tengo mi subdominio con el certificado gratis, que vas a ver por el hecho de que ahora la URL comienza con https (la 's' es para A salvo -> Seguro). ⁇

    https: //ssl.miposicionamientoweb.es

    Certificado SSL gratuito en subdominio

    Certificado SSL gratis en subdominio

    👣 Paso 3: Cargue Disqus en WordPress

    Aquí está la chicha de todo.

    ahora debes agregue un código en la versión AMP de sus publicaciones para ir al fichero HTML que creamos previamente y cargar los comentarios.

    Pero no se preocupe, no debe ir uno por uno. Puede añadir el código de manera directa al fichero. functions.php de su plantilla de WordPress y lo añadirá de forma automática a la versión AMP de sus publicaciones.

    Importante:

    Antes de tocar cualquier cosa en el fichero functions.php Es esencial hacer una copia de seguridad de (puede copiar todo el contenido del fichero y guardarlo en su computador).

    Porque si tocas algo acá que no debes o bien no debes pegar el código que examiné bien, tu weblog podría dejar de marchar.

    ¡Y no deseamos sustos! 😱

    solo ve al menú Apariencia> Editor de su WordPress y escoja el fichero functions.php de su modelo actual.

    Editor de apariencia de WordPress

    Editor de apariencia de WordPress

    Ve al final del fichero y añade este código PHP que dejo aquí:

    //Agrega la entidad amp-iframe en el head de las AMP
    add_action( 'amp_post_template_head', 'xyz_amp_add_iframe' );
    function xyz_amp_add_iframe( $amp_template ) {
     ?>
     <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
     <?php
    }
    
    //Agrega comentarios Disqus en la version AMP
    if ( ! function_exists( 'add_disqus' ) ) {
     function add_disqus( $content ) {
     if(is_amp_endpoint()) {
     $post = get_post();
     $content .= '
     <amp-iframe width=600 height=140
     layout="adaptable"
     sandbox="allow-scripts allow-forms allow-same-origin allow-modals allow-popups"
     resizable
     frameborder="0"
     src="https://miposicionamientoweb.es/disqus-en-paginas-amp-wordpress/https://ssl.miposicionamientoweb.es/disqus-amp.html?url=".urlencode(get_permalink())."&identifier=".urlencode($post->ID . " ' . $post->guid).'"
     >
    <div overflow="" tabindex="0" role="button" aria-label="Más comentarios"></div>
     </amp-iframe>';
     }
     return $content;
     }
    }
    add_action( 'the_content', 'add_disqus' );

    Si miras de cerca, el código tiene dos partes:

    1. Una parte que añade código a la etiqueta. de publicaciones en la versión AMP y carga la biblioteca de elementos 'iframe-amp' para poder utilizarlo.
    2. Otra parte que añade código donde se utiliza el factor. 'iframe-amp' y esto "llama" al fichero HTML creado previamente para cargar los comentarios de Disqus. Lo he marcado en colorado por el hecho de que esta URL es la que debes reemplácelo con la URL de su fichero HTML (en dominio con certificado SSL).

    Una vez que haya terminado, puede guardar los cambios efectuados en el fichero haciendo click en el botón azul que tiene bajo el editor:

    actualizar archivo

    Así es como se ve en mi fichero. functions.php; y como pueden ver, en mi weblog utilizo el modelo Metro Pro del framework Genesis:

    Editando el archivo functions.php de la plantilla de WordPress

    Editando el fichero functions.php de la plantilla de WordPress

    👣 Paso 4: Toques finales

    Si en el paso dos NO ha empleado un subdominio como hice y utilizaste un dominio diferente al de tu weblog, precisas hacer una cosa más.

    Ingrese la configuración avanzada de Disqus en https: //.disqus.com / admin / settings / advanced / (Reemplaza lo que marqué en colorado con el nombre de tu cuenta de weblog en Disqus, exactamente el mismo que utilizaste en el paso 1).

    Aquí va a ver una sección llamada dominios de confianza donde debe añadir el dominio que empleó, para decirle a Disqus que es un dominio fiable.

    Nuevamente, solo precisa hacer esto si empleó un dominio diferente al de su weblog, si empleó un subdominio, no es preciso..

    Dominios de confianza en Disqus

    Dominios de confianza en Disqus

    Y por último, si utiliza un sistema de almacenaje en caché o bien un complemento en su weblog, le recomiendo que vuelva a cargar la caché de su weblog a fin de que se apliquen los cambios que efectuó.

    🏁 ¡Listo!

    🙌 ¡Ya tienes comentarios de Disqus en tus páginas AMP! 🙌

    Así es como aparecen los comentarios, por servirnos de un ejemplo en un Artículo de AMP desde mi weblog, visto desde mi teléfono celular:

    Comentarios marcados en páginas AMP

    Comentarios marcados en páginas AMP

    Moooola ¿eeehhh?

    Bueno, bien sabes, si te atreves a poner comentarios de Disqus en tu Páginas móviles aceleradas este tutorial puede resultar útil.

    Y si lo haces ¡No vaciles en comentar tu experiencia!

    Porque seguro que puede ser útil para otros lectores y juntos podemos facilitarlo, ¿no crees?

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información