Верх страницы
Обложка к записи Добавление Disqus в AMP-версию страницы
Время для прочтения: 0 мин. 12 сек.

Добавление 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.

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

5 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Alexandr
Alexandr
7 лет назад

Почему нельзя просто дать кусок кода????
Нихрена в итоге не понятно как написать полный путь

Jurko
Jurko
6 лет назад

Спасибо, интересно. А как сделать чтобы отображались коменты Фейсбука? Мне кажется это более интересно ).

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы