Добавление 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.
Почему нельзя просто дать кусок кода????
Нихрена в итоге не понятно как написать полный путь
Так в посте и есть куски кода, как вам нравится 🙂 Все построчно объяснено — в чем ваша проблема?
Спасибо, интересно. А как сделать чтобы отображались коменты Фейсбука? Мне кажется это более интересно ).
Попробую что-нибудь накопать
Комментарии ФБ из коробки работают