C’est ainsi que la technologie AMP supporte désormais les boutons sociaux, permet de créer un site ecommerce pour AMP, d’introduire des scripts analytics, et finalement supporte la publicité, ainsi que les paywalls et les abonnements.
Si jusqu’à maintenant vous aviez été réticents à migrer votre site vers la technologie AMP parce que vous aviez peur de perdre tous les commentaires publiés sur votre blog, cette annonce de Disqus qui dit supporter désormais le format AMP devrait vous rassurer définitivement.
AMP pour Disqus utilise la balise <amp-iframe> pour mettre des commentaires sur la page AMP. Cependant, elle exige d'avoir un autre nom de domaine propre pour y mettre une partie du code.
Par conséquent, on ne sait pas si un sous-domaine pourrait être utilisé pour cette étape.
 |
| Image via Disqus.com |
Avec la généralisation des pages AMP dans les résultats organiques de Google, certainement que de plus en plus de propriétaires de sites vont commencer à implémenter cette technologie sur leurs sites. Pouvoir afficher les commentaires serait alors une incitation supplémentaire pour franchir le rubicon.
Comment mettre des commentaires dans ses pages AMP
Disqus pour AMP est une expérience de Disqus pour le chargement rapide et optimisé pour les pages compatibles avec Google AMP. Le Code universel de Disqus peut être implémenté sur toute page compatible avec AMP.
Avant de commencer :
Assurez-vous que vous avez inscrit votre site sur Disqus. Si vous avez un compte existant sur Disqus, vous pouvez trouver votre “nom de compte” dans Admin -> Paramètres -> Générales.
Et comme dit plus haut, assurez-vous que vous pouvez héberger le code d’installation sur 2 noms de domaine différents.
Comment installer :
1ère étape : Créez et hébergez le fichier Universal Code (Code Universel) suivant sur un nom de domaine différent de celui sur lequel vous souhaitez affichez Disqus pour AMP. En d’autres termes, AMP pour Disqus nécessite 2 noms de domaine différents.
Celui sur lequel se trouve votre site et un autre qui va servir à fournir l’attribut src (source) à la 3ème étape.
<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>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
var disqus_config = function () {
this.page.url = window.location; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = window.location.hash; // 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 = '//EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
2ème étape : Référez-vous à la documentation amp-frame et ajoutez le script amp-iframe requis (ci-dessous) dans le <head> de votre code source :
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
3ème étape : Placez l’élément <amp-iframe> juste à la fin de votre contenu, c’est à dire à l’endroit où votre audience va engager avec ledit contenu en ajoutant des commentaires.
<amp-iframe width=600 height=140
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
resizable src="https://example.com/amp#hash">
</amp-iframe>
4ème étape : Remplacez “hash” dans le script ci-dessus avec un identificateur unique qui représente la page où vous souhaitez afficher le système de commentaire. Si vous chargez l’élément <amp-iframe> sur plusieurs pages, générer le “hash” dynamiquement pour chaque page.
Le hash, que vous fournissez serviront dans les variables identificateur et url de la 1ère étape.
5ème étape : Ajoutez le nouveau nom de domaine comme un nom de domaine de confiance (Trusted Domain) dans votre Disqus :
Allez dans Admin -> Edit Settings -> Advanced -> Trusted Domains
