Posicionamiento web | Vivir de un blog

🚀 Blog de Posicionamiento web, Marketing Digital y Blogging ✓ Todo lo que necesitas para crear un blog, sobre SEO y vivir de un blog sin pelos en la lengua

  •  Te ayudo 
    • ¿Qué es un blog?
    • Cómo crear un blog
    • ¿Qué es un hosting?
    • ¿Qué es el SEO?
    • ¿Qué es WordPress?
  •  Recursos blog 
    • Recursos y herramientas web para tu blog
    • Hosting más barato
    • Bancos de imágenes gratis
    • Libros de marketing digital más vendidos
  •   Contacto 
Cómo configurar Disqus en páginas AMP de WordPress

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

73 comentarios

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…

 

Esto es como cuando escuchas una canción en la radio y dices: buah, vaya mierda. Y al final de tanto escuchar la canción a todas horas acabas diciendo: ¡Es la mejor canción que he escuchado nunca!

(Sí, aunque sea de Justin Bieber…)

 

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
  • 👣 Paso 1: crear un fichero HTML
  • 👣 Paso 2: subir el fichero a un dominio con certificado SSL
  • 👣 Paso 3: cargar Disqus en WordPress
  • 👣 Paso 4: últimos retoques
  • 🏁 ¡Ya está!


 

👣 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:

 

  1. Instalar y activar el plugin AMP para WordPress.

Con esto ya tendrás las páginas AMP activadas, y puedes comprobarlo si al final de la URL de cualquiera de tus posts añades /amp/ (o ?amp=1 si no tienes activados los enlaces permanentes en tu WordPress, cosa que te recomiendo 100%).

 

Además desde el menú del panel de control de WordPress Apariencia > AMP puedes elegir el color del texto de la cabecera y su color de fondo. No es mucho, pero algo es algo…

 

  1. Instalar y activar el plugin Glue for Yoast SEO & AMP.

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

 

En mi caso sobre todo lo uso para meter el código de Google Analytics (cosa que hace automáticamente si usas como yo el plugin Google Analytics by MonsterInsights) y para meter algunos estilos CSS extras que me gustan más.

 

¡Y ya está! 🙂

 

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

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.

 

Aclaración:

Te dejo este post por si no tienes muy claro qué es eso de los subdominios.

 

Y en este vídeo puedes ver cómo puedes crear un subdominio fácilmente desde tu hosting con cPanel, el panel de control de la mayoría de los hostings como los que ofrecen Raiola Networks o Webempresa:

 

 

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?!

 

Si no tienes tu hosting con ellos, siempre puedes contactar con tu proveedor de hosting y pedirles que te activen el certificado SSL gratuito de Let’s Encrypt para tu subdominio nuevo.

 

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

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.

 

Importante:

Antes de tocar nada en el fichero functions.php es importante que hagas una copia de seguridad del mismo (puedes copiar todo el contenido del fichero y guardarlo en tu PC).

 

Porque si tocas algo aquí que no debas o no pegas bien el código que te paso, tu blog podría dejar de funcionar.

¡Y no queremos sustos! 😱

 

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

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:

Actualizar archivo

 

 

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

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

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

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?

 

Actualizado el 9 febrero, 2020

Empieza a vivir de tu blog 📝

Apúntate y te guiaré por 5 lecciones en vídeo para ayudarte a empezar

Acepto tu Política de Privacidad
     Tus datos + protegidos que el Área 51     
Responsable » Rubén Alonso Corral (a sus pies)
Finalidad » enviarte la guía para vivir de un blog y mi newsletter (así de sencillo)
Legitimación » tu consentimiento (como dice Amaral, sin ti no soy nada)
Destinatarios » tus datos los guardará ActiveCampaign, mi proveedor de email marketing, que cumple con el nivel de seguridad que pide el RGPD, más protegidos que el Área 51
Derechos » por supuesto tendrás derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos (tú pide por esa boquita)

¡Compártelo y dame tu puntuación!
Me meo en tu post 🚽Vaya 💩No está mal... 😐¡Qué chulo! 👏¡¡Te haría un hijo!! 😘 (8 votos. Media: 5,00 de 5)
Cargando...
Avatar de Rubén Alonso

Rubén Alonso

Bloguero y SEO lover, porque me gusta más el SEO que echarme la siesta. Y llámame loco (¡loco!) pero a día de hoy vivo de mi blog. 😳

Aquí los datos de tus comentarios están seguros (política de privacidad)
     + info aquí
Responsable » Rubén Alonso Corral (a sus pies)
Finalidad » moderar los comentarios (que a veces dejan cada uno que...)
Legitimación » tu consentimiento (como dice Amaral, sin ti no soy nada)
Destinatarios » tus datos los guardará Disqus, mi sistema de comentarios, que cumple con el nivel de seguridad que pide el RGPD. Vamos, que tus datos están más vigilados que el tupé de Donald Trump
Derechos » por supuesto tendrás derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos (tú pide por esa boquita)

¿Quién es Rubén Alonso?

Rubén Alonso - Sobre mí
  •              
  •              

Seguir a @rubenalonsoes

Bloguero, o al menos vivo de ello...

Vamos, que me paso el blog por el forro del SEO

Empieza a vivir de tu blog 📝

Apúntate y te guiaré por 5 lecciones en vídeo para ayudarte a empezar


Acepto tu Política de Privacidad
     Tus datos + protegidos que el Área 51     
Responsable » Rubén Alonso Corral (a sus pies)
Finalidad » enviarte la guía para vivir de un blog y mi newsletter (así de sencillo)
Legitimación » tu consentimiento (como dice Amaral, sin ti no soy nada)
Destinatarios » tus datos los guardará ActiveCampaign, mi proveedor de email marketing, que cumple con el nivel de seguridad que pide el RGPD, más protegidos que el Área 51
Derechos » por supuesto tendrás derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos (tú pide por esa boquita)

Últimos articulos

  • Cómo crear un blog - Hacer un blog

    Cómo crear un blog paso a paso

    17 febrero, 2021
  • El hosting más barato de calidad

    ¿Cuál es el hosting más barato y de calidad?

    15 febrero, 2021
  • Vivir de un blog resumen mensual del blog

    Vivir de un blog - Resumen de enero 2021

    1 febrero, 2021
Auditoría SEO con SE Ranking

Contenido

  • 👣 Paso 0: requisitos para tener páginas AMP con Disqus
  • 👣 Paso 1: crear un fichero HTML
  • 👣 Paso 2: subir el fichero a un dominio con certificado SSL
  • 👣 Paso 3: cargar Disqus en WordPress
  • 👣 Paso 4: últimos retoques
  • 🏁 ¡Ya está!
  • DMCA.com Protection Status

Copyright © 2021 Mi Posicionamiento Web      

Aviso legal | Política de privacidad | Política de cookies | Condiciones de contratación