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

Voy a enseñarte cómo puedes instalar Disqus en páginas AMP (Accelerated Mobile Pages) para tener los comentarios de tu WordPress. Y para eso nada mejor que enseñarte paso a paso cómo lo he hecho yo mismo en este blog, en el que (por fin) he instalado el famoso AMP que tanto le gusta a Google. 🙂

¡Vamos al lío!

Cómo habilitar Disqus en páginas AMP

Pues sí, ya tengo configuradas las páginas AMP en los posts de este blog para que se carguen más rápido desde el móvil, algo en lo que lleva haciendo hincapié Google durante meses, erre que erre…

Por si aún no sabes bien qué narices son las páginas AMP, te recomiendo este post donde lo explican a la perfección.

Para resumir, te diré que son páginas HTML muy simplonas (ahí está la clave de que carguen tan rápido), y por esa misma razón verás que en la versión AMP de los posts de tu WordPress… ¡no aparecen los comentarios!

Te has quedado como el perrete, ¿verdad? Así me quedé yo…

Por lo visto es algo “normal” (al menos ya lo he comprobado en varios blogs de WordPress que usan AMP), pero a mí me parece que quitarle los comentarios a un post es como quitarle la merienda a un niño: ¡muy feo!

Porque los comentarios es lo que le da vida a un post, por mucho AMP que tenga, ¿no crees?

Menos mal que a mí me gusta Disqus más que echarme la siesta, y resulta que no hace mucho anunciaron que su sistema de comentarios era compatible con las famosas Accelerated Mobile Pages. ¡Ole! 💃🏻

Eso sí, ya te aviso que lo que hay que hacer es un poco lioso… Pero para eso está este post, para hacértelo más fácil. 🙂

Te explico cómo lo he hecho yo en este blog paso a paso.

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

Bueno, lo primero de todo es que tengas el sistema de comentarios de Disqus instalado en tu WordPress, ¡lógicamente!

Si aún no lo tienes no te preocupes, porque aquí te dejo un buen tutorial para instalar Disqus en WordPress y verás que en pocos minutos lo tienes hecho.

Y por supuesto, también necesitas que tu WordPress tenga configuradas las páginas AMP. Y te voy a ser sincero, esto es lo más sencillo de todo el proceso.

En mi caso me ayudé de esta pedazo de guía de Álex Serrano y de esta otra de Joost de Valk, el autor del famoso plugin Yoast SEO. Si tú también usas este plugin de SEO, los pasos a seguir para tener las dichosas Google AMP en tu WordPress se reducen a esto:

Pasados unos días después de instalar AMP, podrás comprobar desde el informe de Accelerated Mobile Pages de Search Console si Google las está indexando y si tienes algún error que corregir (esto también puedes comprobarlo directamente con este validador de páginas AMP o con el propio validador de Google Search Console).

Y así es como muestra Google las páginas AMP en los resultados de su buscador:

Google señala las páginas AMP en los resultados de búsqueda

👣 Paso 1: crear un fichero HTML

La finalidad de este fichero es que se cargue su código HTML en cada uno de los posts del blog, y recuperar así los comentarios del post en cuestión.

Esto es sencillito, sólo tienes que crear un fichero HTML (desde tu blog de notas, por ejemplo) y añadirle 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() { // DON'T EDIT BELOW THIS LINE
 var d = document, s = d.createElement('script');

 s.src = '//miposicionamientoweb.disqus.com/embed.js';

 s.setAttribute('data-timestamp', +new Date());
 (d.head || d.body).appendChild(s);
 })();
</script>

Te he señalado en rojo el nombre de la cuenta de mi blog en Disqus, porque aquí tendrías que reemplazarlo con el que uses para tu blog en Disqus.

Ahora el fichero lo puedes guardar con el nombre que quieras. En mi caso por ejemplo, como se trata de tener Disqus en páginas AMP, en un alarde de originalidad lo he llamado disqus-amp.html. 🙂

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

Aquí empieza a complicarse la cosa…

Para poder usar Disques en AMP es necesario subir el fichero HTML a un dominio distinto del que usas para tu blog y que además sea un dominio seguro, con certificado SSL.

Como esto de usar otro dominio no me cuadraba mucho y no lo veía muy sensato, probé a usar un subdominio de miposicionamientoweb.es, ya que al fin y al cabo los subdominios se comportan como si fueran dominios distintos.

Así que me hice el subdominio ssl.miposicionamientoweb.es y ahí he subido mi fichero HTML: https://ssl.miposicionamientoweb.es/disqus-amp.html.

Pero falta una cosa, y es que este subdominio tiene que tener un certificado SSL para que funcionen los comentarios en AMP.

Los certificados SSL pueden costar desde 20€ al año más o menos, pero gracias a Let’s Encrypt puedes tener un certificado SSL gratis. La única pega que tienen es que caducan a los 3 meses, pero para algo tan sencillo como esto (no estamos montando ninguna tienda online ni nada por el estilo) pues nos viene de perlas.

Lo bueno es que la mayoría de los proveedores de hosting están empezando a instalar este certificado SSL gratuito. En Raiola Networks por ejemplo lo activan automáticamente, y en Webempresa lo puedes activar tú mismo con un simple clic.

Y además ellos mismos te renuevan el certificado cada 3 meses, ¡¿qué más se puede pedir?!

En mi caso ya tengo mi subdominio con el certificado gratuito, cosa que verás porque ahora la URL empieza por httpS (la ‘s’ es de Secure -> Seguro). 🙂

https://ssl.miposicionamientoweb.es

Certificado SSL gratis en subdominio

👣 Paso 3: cargar Disqus en WordPress

Aquí está la chicha de todo.

Ahora hay que añadir un código en la versión AMP de tus posts para que acceda al fichero HTML que hemos creado antes y cargue los comentarios.

Pero tranquilo, no hay que ir uno por uno. Puedes añadir el código directamente en el fichero functions.php de tu plantilla de WordPress y él lo va añadiendo automáticamente a la versión AMP de tus posts.

Basta con ir al menú Apariencia > Editor de tu WordPress y seleccionar el fichero functions.php de tu plantilla actual.

Editor de Apariencia en WordPress

Ves al final del fichero y añade este código PHP que te 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="responsive"
 sandbox="allow-scripts allow-forms allow-same-origin allow-modals allow-popups"
 resizable
 frameborder="0"
 src="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 te fijas bien, el código tiene 2 partes:

1. Una parte que añade un código en la etiqueta <head> de los posts en versión AMP y que carga la librería del elemento ‘amp-iframe’ para poder usarlo.
2. Otra parte que añade el código donde se utiliza el elemento ‘amp-iframe’ y que “llama” al fichero HTML que creaste antes para cargar los comentarios de Disqus. Lo he marcado en rojo porque esta URL es la que tienes que reemplazar por la URL de tu fichero HTML (en el dominio con certificado SSL).

Una vez que lo tengas listo ya puedes guardar los cambios que has hecho en el archivo haciendo clic en botón azul que tienes debajo del editor:

Así es como queda en mi propio fichero functions.php; y como puedes ver, en mi blog uso la plantilla Metro Pro de Genesis framework:

Editando el fichero functions.php de la plantilla WordPress

👣 Paso 4: últimos retoques

Si en el paso 2 NO usaste un subdominio como hice yo y usaste un dominio distinto al de tu blog, necesitas hacer una cosa más.

Entra a los ajustes avanzados de Disqus en https://<nombredetucuenta>.disqus.com/admin/settings/advanced/ (reemplaza lo que he marcado en rojo por el nombre de la cuenta de tu blog en Disqus, el mismo que usaste en el paso 1).

Aquí verás un apartado llamado Trusted Domains donde tienes que añadir ese dominio que has usado, para indicarle a Disqus que se trata de un dominio de confianza.

Repito, sólo tienes que hacer esto si usaste un dominio distinto al de tu blog, si usaste un subdominio no hace falta.

Dominios de confianza en Disqus

Y por último, si usas algún sistema o plugin de caché en tu blog te aconsejo que recargues la caché de tu blog para que se apliquen los cambios que has hecho.

🏁 ¡Ya está!

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

Así es como se ven los comentarios por ejemplo en un artículo AMP de mi blog, visto desde el móvil:

Comentarios Disqus en páginas AMP

Moooola ¿eeehhh?

Pues ya sabes, si te animas a poner comentarios Disqus en tus Accelerated Mobile Pages este tutorial puede venirte de perlas.

Y si lo haces, ¡no dudes en comentar tu propia experiencia!

Porque seguro que le puede ser útil al resto de lectores y entre todos podemos hacerlo más sencillo, ¿no crees?