Добавление Disqus в AMP-версию страницы

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/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: