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
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:
- 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…
- 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
👣 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
👣 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
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:
- 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.
- 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
👣 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?
Muy grande Rubén!!
Hacen falta más tutoriales de este tipo, porque la verdad es que AMP viene muy limitado, y en cuanto a la corrección de errores de validación te puedes volver loco :S
Un abrazo!
Gracias @brunoramoslara:disqus !
Así es, de hecho los primeros días me petaron casi todas las páginas AMP por no validarlas… Pero bueno, ahora parece que ya van bien, jeje.
Un abrazo crack!
Amigo, no me sirivio, segui los pasos y no me despliega los comentarios, sera que me puedes ayudar por Skype? Te lo agradeceria
Buenas @todowindows:disqus , lo siento pero no puedo ayudar a todos uno a uno porque entonces se me iría el tiempo…
Revisa que esté todo bien hecho, y sobre todo que subiste el fichero a un dominio o subdominio con encriptación SSL para que la URL que usas en el iframe sea https, ¿ok?
Saludos!
subi el fichero, esta es la direccion: https://arahdezabogados.com/wp-content/uploads/2016/11/disqus-amp.html , aun si no me funciona, me aparece este mensaje abajo del post amp https://uploads.disquscdn.com/images/49d63807bcbe315f1069e750f08e0b8dfb03bc037e5ac96eadea5b2b9031880c.jpg
Mmm, parece que el error es al cargar el html desde donde lo cargas, porque ese error 403 suele ser por permisos que quizá necesitas configurar en Hostgator…
Pásame el artículo AMP desde el que te da ese error de todas formas y si puedo le echo un vistazo, ok?
gracias, aqui te paso el articulo: http://todowindows.net/hp-lanza-la-tercera-actualizacion-de-firmware-para-el-hp-elite-x3-con-windows-10-mobile/amp/ , en todos pasa lo mismo
Ok, creo que sé por qué puede ser.
Al intentar acceder al fichero con los datos de ese post (ésta es la URL de la llamada al fichero https://arahdezabogados.com/wp-content/uploads/2016/11/disqus-amp.html?url=http%3A%2F%2Ftodowindows.net%2Fhp-lanza-la-tercera-actualizacion-de-firmware-para-el-hp-elite-x3-con-windows-10-mobile%2F&identifier=6900+http%3A%2F%2Ftodowindows.net%2F%3Fp%3D6900) me da que el error 403 es porque está intentando acceder a ese fichero que está dentro de otro WordPress y usando variables en la URL.
Intenta colocar el archivo en la carpeta raíz de ese otro dominio en otra carpeta que no sea dentro del WordPress, a ver si así funciona.
ya me funciona, el proveedor del host me ayudo, pero vieras que quiero hacer un comentario y no puedo, cuando le doy al boton de comentar no hace nada… de hecho trate de publicar en amp aqui en tu pagina y tiene el mismo error, que sera?
Genial!! Era algo de permisos entonces?
Pues el caso es que de esto también me di cuenta y me huele que es cosa de Disqus… No estoy seguro pero creo que no deja comentar porque debe usar JavaScript y en AMP no se permite.
Estoy pendiente de que me lo confirmen desde Disqus, por eso no he comentado nada en el post, pero en cuanto sepa algo lo pongo. Aun así, mejor esto que nada, jeje.
Ya sé lo que es!!
En el código del amp-iframe hay que añadir dentro de «sandbox» esto «allow-forms» para que permita enviar formularios y así dejar comentar, y ya funciona! De hecho, este comentario está hecho desde AMP, jeje.
Excelente, ya lo probe y ya funciona, yahooooooooooooo, muchas gracias amigo.
Comentando desde amp tambien, jeje
🙌🙌🙌
amigo, perdon que te moleste tanto, vieras que yo ya tengo amp activado con un plugin, con este que se llama: Accelerated Mobile Pages” (By Ahmed Kaludi, Mohammed Kaludi), pero vieras que no se como activarlo solo para que el amp se muestre en mobile, en web de escritorio tiene que mostrarse la web normal y en movil el amp, como se hara eso?
Lo siento @todowindows:disqus yo uso el plugin «oficial» de AMP. No sabría decirte cómo configurar el otro.
gracias, voy a usar ese a ver como se hace, sabes a que se debera esto?
https://uploads.disquscdn.com/images/5ad4c226f098e78e6a843ab3bfca42f630490a52c4b4f30ee91ad927a1cc31b6.jpg
http://todowindows.net/la-aplicacion-accuweather-se-actualiza-con-accucast?amp
Ni idea, sorry…
el archivo html yo lo subi por medio de la galeria que trae wordpress, no se si hay que subirlo a la raiz o si asi esta bien
sasto, prueba en la raiz a ver. 🙂
¡Brutal Rubén!
Disqus es una maravilla, que se lo digan al señor Gastre, fan nº1 de la aplicación….jajajajaja
El tema de AMP está todavía algo virgen y hay bastante confusión, por ello este contenido viene de maravilla.
Un abrazo Rubén y me gusta como te ha quedado la barra lateral. 😉
Jejeje, gracias @carlosmiana:disqus !
Sí, la verdad es que AMP todavía está en ciernes y por eso cada actualización que pueda haber ahora del plugin de AMP para WordPress se pueden tocar bastante cosas…
De momento yo he optado por lanzarme con ello para estar al día y usando incluso mis propias plantillas HTML en mi theme, para que precisamente estas actualizaciones no me destrocen todo. 🙂
Y Disqus por supuesto no puede faltar, jeje.
Un abrazo!
Wow!!! plas plas plas (aplausos)
Explicas tan bien que me parece fácil hasta a mi jajaja
La cuestión es que llevaba tiempo pensando en el tema del AMP, lo que no sabía es que no aparecían los comentarios!!
El tema es por qué estás tan enamorado de Disqus??? Va cuéntamelo… 😉
Jajaja, muchas gracias @miriamac:disqus !
Pues ya ves cómo me quedé yo cuando también me enteré de que no traía los comentarios, como el perrete, jeje.
Pues Disqus me chifla porque la facilidad de uso que da al gestionar los comentarios, porque permite añadir imágenes cuando comentas, permite compartir los comentarios por separado y sobre todo porque controla mucho más el spam.
¡Ahí es na’! 🙂
¡Grande, Rubén!
Muy buen tutorial. Está muy bien que poco a poco vaya surgiendo opciones para modificar el diseño de las AMP, aunque sin pasarse xD
Me alegro que mi tutorial te fuera de ayuda y gracias por recomendarlo, crack.
PD: soy muy fan de tu gif final jajajaja
¡Un abrazo!
Jajaja, gracias @disqus_7TyA1cCbva:disqus!!
Tu tutorial me vino de perlas, ya lo sabes. 🙂
Y sí, por ahora modificando y probando cosas con las AMP lo justo. Y siempre validando, que la semana pasada toqué cosas y por no validar me dieron errores luego por una cosas del CSS 🙁
Gracias a ti por pasarte a comentar, y me alegro de que te mole el gif! jejejeje.
Un abrazo.
¿Qué tal máquina?
Me encanta que hayas sacado este tema a relucir 🙂 Ya no el de los comentarios de Disqus, que ahora no lo tengo implementado, sino lo de AMP. Según escribo, me surge una duda, ¿los comentarios «normales» de WordPress se mostrarían? ¿o habría que hacer también algo especial?
Bueno, al lío de lo que quería preguntarte, jeje.
Yo llevo tiempo dándole al rum rum para implementarlo pero me surgen dudas, así que como es gratis, vengo aquí y te las hago por si tu lo sabes 😉
Sé que las páginas de amp se ven cuando pones «/amp» al final de cualquier URL. Pero entiendo que eso ahora mismo está generando contenido duplicado porque es la misma web que viendo la versión «completa».
¿Eso lo tratas indicándolo en el search console para que es señor Google no lo trate como duplicado y sirva las otras en caso de ser la visita de móvil? ¿o pones algún tipo de canocical o algo para que sepa cuál es la original?
Lo pregunto porque me he puesto en modo espía a hacer un «site» de tu blog en Google, desde el móvil, y veo que lo que muestra son los resultados normales y no los de amp que serían los mejores para mostrar si estoy buscando desde el móvil ¿no?
¿Sabes cómo está ese tema?
Gracias de nuevo tío, y agradeceré cualquier info al respecto 🙂
¡Un abrazo!
Buenas @javierelices:disqus, qué bueno verte por aquí tío!!
Te respondo según lo que he ido viendo estas semanas sobre AMO ok?
Sobre lo de los comentarios, efectivamente no los muestra porque restringe todo el javascript, y por defecto creo que WordPress lo usa… Lo bueno de Disqus es que los carga en lo que sería un iframe preparado para AMP. 🙂
Respecto al contenido duplicado no te preocupes, en el código de los posts «normales» verás que el plugin de AMP añade una referencia a la versión AMP con link rel=»amphtml»… y como bien dices, en la versión AMP añade un canonical a la versión «normal». De esta forma Google lo tiene controlado.
Buscando el site: no sé si a lo mejor muestra la versión «normal» por tratarse de ese comando, pero luego a la hora de buscar alguna palabra clave por regla general siempre me ha mostrado la versión AMP, aunque en principio Google puede mostrarte la que le salga de las narices según lo vea «conveniente».
Ahora mismo en mi caso habrán desaparecido algunas porque este finde estuve trasteando y por no validar si el código estaba bien, he visto en Search Console que tenían fallos… Y ojo, si Google ve que tienen fallos directamente no las muestra, en esto no se está con leches… Así que siempre validar y validar.
Por cierto, te paso un post muy interesante que lo mismo te crea más dudas, pero mejor que lo sepas todo antes de lanzarte claro, jeje: https://www.alexkras.com/google-may-be-stealing-your-mobile-traffic/
Al final viene a decir que son lentejas de Google, las tomas o las dejas. 🙂
Ya me dirás qué tal!!
Un abrazo crack.
Perfecto, gracias por la respuesta! 🙂
Me empollaré tranquilamente también el otro post, y si al final me decido a dar el paso, seguramente lo haga con alguno de mis nichos por si la lío y medir resultados, pero bueno, en cualquier caso ya te preguntaré 😉
Un abrazo!
Un placer! Ya me dirás qué tal. 😉
Un abrazo!
Coño Rubén!
Houston tenemos un problema ;-(
Aquí está el toca huevos de gastre.
Estaba yo mirando mi comentario para responderte y………..
Ande está mi comentario?
Pues se ha quedado en la versión AMP
Sí, como soy tan «guay» (ni de coña ehh) pues me dió por comentar desde la versión amp y veo que los comentarios de la AMP no aparecen en la versión normal.
Eso es un problema, porque lo que pasa y es que si alguien comenta de la AMP no se ven en la estandar y viceversa y se pierde el hilo.
Me pasó lo mismo cuando hice la versión APP del móvil, integré disqus pero como la url cambia, disqus piensa que son dos entradas diferentes y separa los comentarios.
Hay una opción para unificar dos páginas y mostrar los comentarios combinados, la kk es que hay que hacerlo manual.
Echale una ojeada a ver si a ti te sucede como a mi crack!
Ostras! Pues eso no lo sabía!!
Gracias por avisarme @gastre:disqus!
Oye si puedes pásame la URL del comentario en la versión AMP para verlo, porque los estoy comparando ahora mismo y parece que tienen los mismos comentarios (aunque no ordenados igual, eso sí).
De hecho en la versión AMP salen los comentarios que ha hecho la gente en la versión «normal»… ¿A lo mejor es que tarda en sincronizar?
Y ahora a lo que iba, estaba yo mirando para instalar AMP en blogger, y sí, aunque es posible es una mierda por si alguien se lo ha preguntado. (se puede hacer pero extra oficialmente y da más errores que un windows vista).
Ya de paso quería hacer una reflexion.
AMP está google detrás, blogger es de google, si AMP prospera imagino que google acabará implementandolo de manera muy simple en blogger, cosa que todavía no ha hecho.
Además google, en sus blogs oficiales utiliza blogger, así que estaremos atentos, pero de momento no muevo ficha.
Ya lo he intentado y da más errores que otra cosa, pero llevo tras el AMP un año jjjaja.
S2!
Jajajaja, me ha encantado lo del Windows Vista @gastre:disqus 😂😂
La verdad es que no tiene mucho sentido que Google/Blogger no haya sacado algo ya en este sentido, que por ejemplo con un simple check en la configuración de Blogger decidas tener la versión AMP de tus posts o similar.
Aun así está muy en bragas todo esto. De hecho cada actualización del plugin en WordPress hay que mirarla con mucho ojo, o tener tu propia plantilla AMP como hago yo en mi theme, para tocar lo que quiera. Y siempre validar, validar, validar… ¡Y validar!
En fin, a ver si Google se pone las pilas con Blogger…
Un abrazo!
correcto, lo sacan ellos y lo dejan en pelotas???
Yo creo que les han dejado a los de AMPproject que lo saquen con su consentiemiento a ver cómo va y luego se ponen en serio… 🙂
Si señor! que grande eres.
Esto ya es un tutorial algo avanzado ehhh
Yo en su día puse amp en wordpress, pero no llegué a instalar disqus.
Tenía en mente varias formas para hacerlo, pero sin duda esta es más compleja en un principio, pero más comoda, es una vez y ya está.
Gracias por el enlace crack!!!!
Por cierto, te estoy comentando desde amp
https://miposicionamientoweb.es/disqus-en-paginas-amp-wordpress/amp#disqus_thread
Yeeeahhh, gracias @gastre:disqus !! 🙂
Isso é extremamente difícil. Quando vão começar a facilitar isso? Seu tutorial é ótimo, vou tentar fazer.
No es tan difícil! 😀
De momento es lo más fácil que se puede… Ánimo!
Hola, Rubén. Qué rabia. Es una pena… Lo he hecho todo y cuando trato de añadir el código php a functions.php pincho en actualizar y se me va a «página no encontrada». ¿Sabes qué he hecho mal?
Por si sirve de algo, lo que me pone al final del archivo functions.php es esto: «// Omit closing PHP tag to avoid «Headers already sent» issues.»
También te digo que yo uso Avada y tiene muchos más subdivisiones de ficheros que el tuyo, que según veo en la imagen son cinco. Yo tengo tropecientos. No sé si es que en mi caso debería meter ese código en otra parte. ¡¡¡Qué rabia!!! 😀 Ya casi lo tenía. A ver si puedes ayudarme un poco. Gracias!
Hola de nuevo Rubén!!!
Justo estaba a punto de ponerme con esto para añadir Disqus en AMP, y me encontré con una buena noticia.
El plugin AMP for WP – Accelerated Mobile Pages ya permite añadir de forma nativa Disqus a las páginas AMP. ¡¡Funciona de 10!! Solo tienes que ponerle el enlace y listo. Sin complicaciones 🙂 🙂
Oye, de todas maneras, gracias por el tuto, ¡ya te digo que estaba a punto de seguirlo!
Un saludo crack
Ostras qué bueno @adrianleira:disqus !!
Joer pues voy a tener que echarle un vistazo, aunque lo malo es que yo no tengo dominio con SSL y quizá de esta forma no puedo configurar yo mismo que enlace con el fichero que tengo en mi sudominio que sí que tiene SSL..
¿Sólo te deja meter la url de DIsqus no?
De todas formas para el que ya tenga dominio con SSL es una gran noiticia, mucho menos jaleo!!
Qué grande, gracias por la info tío!!
Un abrazo
Sí, solo te deja meter la URL de Disqus, pero tiene una opción justo debajo para que se sirvan desde un dominio seguro (el del creador del plugin) en casos como el tuyo.
https://uploads.disquscdn.com/images/b90a5cb7eacb5ef338549fc5ccc0a661b0da93a324f02386a88f9960e462d4d3.jpg
Solo he mirado por encima el código del plugin, pero creo que solo tendrías que sustituir su URL en la variable «disqus_script_host_url» del features.php por la tuya ssl.miposicionamientoweb.es
Tengo que probarlo en un dominio sin SSL a ver cómo se comporta, pero es que ahorra muchísimo trabajo.
¡Pásate al lado oscuro del https!
Ostras, está cojonudo @adrianleira:disqus! Buah si encima ya ellos mismos permiten hacerlo a través de sus servidores con SSL es la caña.
Me da que esto lo vamos a probar en El Marketing Today, jejeje.
Muchas gracias por la info!
Como siempre Rubén, dejándome nuevas tareas por hacer.
A ver…
No he configurado Disqus en mi blog.
No he configurado las AMP tampoco.
Mucho menos lo he hecho en la versión móvil.
Menudo «trabajón» me espera… pero si todo es por gustarle a Google, vamos a darle pues…
Es que de sólo pensar que la gente va a entrar a tus posts y no va a ver los comentarios, es feo como dices.
Gran abrazo, Crack.
Así es @disqus_kjpPuEpiyT:disqus !
Ojo, échale un ojo al plugin AMP for WP que comentaba @adrianleira:disqus porque quizá te ahorre mucho tiempo de configurar AMP y Disqus dentro de AMP. Lo he probado en El Marketing Today y la verdad es que está muy bien! 🙂
Un saludo y gracias a ti como siempre!
Excelente. Ya le estoy leyendo. Agradecido.
Hola Ruben! excelente post! me pregunto si al poner el plugin de Disqus para los comentarios se pierden los que tengo en el blog de la gente que no está en disqus, me lo puedes aclarar, me comentan que no pueden hacer comentarios desde el móvil, con el tema de las AMP, pero no quiero perder los comentarios que tengo, ya que son muchos. ¿Tu que opinas? Gracias
Buenas @maria_eugenia_sanz:disqus !
Tranquila que no los pierdes, de hecho yo antes de instalar Disqus también tenía muchos comentarios ya de antes. Lo que hace Disqus cuando lo instalas es importar los comentarios que hay en la base de datos de tu WordPress y así los tienes ya todos. Si te fijas en algún artículo de los primeros que escribí en este blog (cuando aún no tenía Disqus instalado) verás que aparecen los comentarios sin problema aunque esa persona no tenga perfil de Disqus como tal. 🙂
Respecto a lo de AMP también funciona sin problema. De todas formas si quieres para que no te sea tan lioso puedes usar este plugin directamente https://es.wordpress.org/plugins/accelerated-mobile-pages/ que te permite configurar también que las páginas AMP sean compatibles con Disqus. Es por ejemplo lo que usamos en El Marketing Today y como ves se puede comentar perfectamente 🙂
https://elmarketingtoday.com/seo/google-desvela-la-verdad-del-seo/amp/
Un saludo!
Muchas gracias @@rubenalonsoes:disqus lo probaré y ya te cuento, saludos
Gracias crack!
No me salia con el consejo que da el mismo Disqus (https://github.com/disqus/disqus-install-examples/tree/master/google-amp). Me repitia todos los comentarios en todos los posts (supongo algun conflicto de identifier).
Todo el dia buscando en ingles y ningun consejo me ayudo. Hasta que decidi buscar lo en castellano y ahi estabas.
Ahora me funciona todo!!
Olé olé! 😀
Pues me alegro mucho de que te haya servido! De verdad.
Gracias a ti!
Un saludo.
Pedazo de articulo Rubén!! Habrá que ponerlo a prueba, a ver si no la lió jaja
Gracias @garmer:disqus!
SI lo ves muy lioso, aquí tienes un comentario de @adrianleira:disqus donde habla de otro plugin muy interesante que lo hace más fácilmente: http://disq.us/p/1g4a4x3
Ya me contarás! 🙂
Hola Rubén!
Yo aún no me voy a decidir a instalar AMP con mi nivel báscio, pero tu artículo es una vez más brutal. Lo que sí te hice caso es en instalar Disqus. Me parece fantástico y creo que no baja la velocidad de mi blog. Al principio creo que me funcionaba perfectamente, pero mira, hice una prueba para ver si llegaban comentarios ¡y no llegan! Se supone que lo tengo bien configurado todo. También, por ejemplo, antes cuando te ponía un comentario a ti, me mandaban un email para comunicármelo que me respondías. Ahora no. Tengo que meterme en el post y ver si me respondes. ¿Sabes si hay algún problema con Disqus? ¿Se te ocurre qué puedo hacer? ¿Desinstalarlo y volver? Gracias máquina como siempre!
Un abrazo!
Raúl
Buenas Raúl y gracias! 🙂
Pues Disqus en principio ayuda a controlar el spam, etc. pero en algunos sitios comentan que también suele bajar el ratio de comentarios, aunque esto ya depende mucho de tu comunidad. En mi caso por ejemplo ya ves que suelo tener bastante comentarios. De todas formas es algo normal cuando cambias de un sistema de comentarios a otro hasta que los lectores «se acostumbran».
Para las notificaciones, date cuenta que al no tratarse del sistema de comentarios que tiene WordPress por defecto, ya no envía ese tipo de notificaciones, pero sí que puedes activarlas desde tu cuenta de Disqus, a mí me llega un email cada vez que alguien me deja un comentario. Mira a ver en las preferencias de tu cuenta de Disqus a ver si no tienes activada alguna opción de notificaciones.
A ver qué tal! 🙂
Un abrazo.
¡Hola Rubén!
Para quien utilizó el certificado de cloudflare es sólo agregar el subdominio en las configuraciones DNS en su cuenta de cloudflare.
He instalado el plugin WP «AMP para WP – Accelerated Mobile Pages» y parece que es sólo hacer como se indica en la imagen.
https://uploads.disquscdn.com/images/8a49896705f4603dc7978af178172a96e21963e6ba16ad5e82bca0f3986edd03.png
https://ampforwp.com/tutorials/article/host-disqus-comments/
Gracias por el tutorial!
Abrazo!
Qué bueno @avelino23:disqus , gracias a ti por el apunte!!!
Gracias por el tutorial. Me salio bien pero hay alguna forma de hacer que aparezca en un lugar especifico que escogemos? No quiero que salga immediatamente despues de los articulos. Gracias
Gracias @udegbunamchuks:disqus !
Pues eso ya sería un poco más complicado, bueno, depende de lo que controles de código vaya, jeje. Pero la idea sería cambiar el sitio donde Disqus esté añadiendo su sistema de comentarios, que normalmente es el parta que va después del artículo… Ahora mismo no sabría decirte dónde define esto Disqus, pero entiendo que estará dentro de sus ficheros del plugin.
Otra opción que se me ocurre, solo para las páginas AMP, es que no metas la última parte del bloque amp-iframe en el fichero functions y sea tú quien meta ese bloque amp-iframe directamente en tu plantilla de página AMP donde tú quieras.
En fin, si te animas a alguno de estos cambios ya me dirás qué tal!
Un saludo.
Gracias. Intenté la segunda opción pero no me sale. No aparece disqus. Solo me sale si pongo todo el código en el fichero functions como lo hiciste en tu guía.
Voy a seguir probando a ver si logro encontrar una solución. Que tengas un buen día señor 😊😊
Vaya, bueno, pues ya me dirñas si lo consigues por si alguien más quiere hacerlo también @udegbunamchuks:disqus ok?
Pasa un buen día tú también! 🙂
Ya lo consegui utilizando esta guia https://github.com/j26design/Disqus-AMP-Integration/blob/master/README.md. Gracias 😊
Genial!! Gracias a ti por compartirlo para otros @udegbunamchuks:disqus !! 🙂
Hace tiempo hice este proceso y me salió correcto. Pero creo que ahora no me aparecen los comentarios de AMP y por eso te visito nuevamente…
¿Qué tal Ru? Espero que estés genial 🙂
Bueno, me pondré a revisar este tema de nuevo, aunque no sin antes preguntarte una cosita extra… ummm… ¿sabes cómo agregar el número de comentarios de disqus en el tema del blog? Es que también antes me aparecían y ahora no (ahora porque me di cuenta, lleva desde diciembre 2018) ¡Mama mía! bueno, a ver si logró encontrar respuestas porque buscando en Google no existe ese tema :S espero no ser muy pesada con esto jejeje.
¿Si sabes a qué me refiero? es el número de comentarios que sale justo cerca del título, al iniciar el post.
Gracias de antemano, ¡te mando un abrazo!
Buenas @flormpecasique:disqus !!
¿Entonces lo que ocurre es que no te salen ni los comentarios en AMP ni el número de comentarios?
La verdad es que estoy algo oxidado ahora con este tema porque lo puse hace tiempo y no ha vuelto a dar problema, al menos me siguen apareciendo. Pero lo que sí que he visto repasando el functions.php es que ya no tengo el código que comentaba para meter los comentarios y parece que lo tengo metido directamente en el theme en la plantilla PHP para las págonas AMP, a ver si te sirve (cambiando los datos que uso por los tuyos, claro, jeje)
*Mmm, estoy intentanto pegar el código en el comentario pero se «traga» los PHP porque los está tomando como código de la página. Te lo paso directamente por Telegram si eso ok?
Hola
Hola! 🙂
Cara cola