Disqus стала первой системой комментирования, которая официально поддерживает Google AMP.
Давайте разберемся, как добавить Disqus в AMP-версию страницы.
Перед началом
- Если вы еще не в курсе, что такое Google AMP, посмотрите, как создать свою первую AMP-страницу.
- Проверьте, что у вас есть зарегистрированный сайт в аккаунте Disqus. Покурите официальные маны для получения большей информации.
- Найдитие короткое имя вашего сайта (
shortname) в панели Disqus: Admin > Settings > General. - Убедитесь, что вы можете разместить код установки на двух разных доменах.
Как установить
Создайте файл disqus.php и разместите его на домене, отличном от текущего. Изголяться таким образом приходится по причине того, что в основу метода положено использование <amp-iframe>, ограничением которого является подгрузка данных только с другого домена.
<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
}, '*' );
}
}
}
/*
* Впулим наш конфиг
*/
var disqus_config = function () {
// URL страницы
this.page.url = '<?php echo strip_tags( $_GET['disqus_url'] ); ?>';
// Идентификатор страницы
this.page.identifier = '<?php echo strip_tags( $_GET['disqus_identifier'] ); ?>';
};
/*
* Подключить javascript-файл
*/
(function () {
var d = document, s = d.createElement('script');
s.src = '<?php printf( '//%s.disqus.com/embed.js', strip_tags( $_GET['disqus_shortname'] ) ); ?>';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
Разместите в разделе <head> вашего amp-шаблона ссылку на скрипт:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Поместите элемент <amp-iframe> в нужном месте шаблона внутри раздела <body>, там где хотите видеть комментарии:
<amp-iframe width=600 height=140
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox"
resizable
src="{абсолютный_путь_к_disqus.php}">
<div overflow tabindex=0 role=button aria-label="Read more">Read more!</div>
</amp-iframe>
Абсолютный путь к disqus.php строится по следующему алгоритму:
// Короткое имя домена из админки disqus $shortname = 'mihdan'; // Ссылка на текущую страницу $permalink = get_permalink( $post->ID ); // Полный путь к disqus.php $path = 'https://домен/disqus.php?disqus_url=' . urlencode( $permalink ) . '&disqus_shortname=' . urlencode( $permalink ) . '&disqus_identifier=' . urlencode( $post->ID );
Наличие https на домене с disqus.php обязательно.
И, последним шагом, добавьте домен, на котором лежит disqus.php в доверенные в панели управления disqus. Найти можно тут: Admin > Settings > Advanced.
Ссылки
Источник: https://www.kobzarev.com/wordpress/disqus-google-amp/
