最近、
disqus の
disqus の
参考
実施した こと
disqus-install-examples/google-amp at master · disqus/disqus-install-examples の
実施した
1. 記載されている HTML を コピーして、 用意した HTML 設置用の domain に 配置
私は、
kemsakurai.github.io/amp_disqus_thread.html at master · kemsakurai/kemsakurai.github.io
2. コピーした HTML の、s.src = '//EXAMPLE.disqus.com/embed.js';
を 自信 の disqus サブドメインに 変更。
'//ユーザ名.disqus.com/embed.js'
に
3. amp-iframe の js リンク と、 amp-iframe タグを 設置先ドメインに 追加。
以下、
- js リンク
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
- amp-iframe タグ
<amp-iframe width=600 height=200 layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable src="https://kemsakurai.github.io/amp_disqus_thread.html#{% disqus_id_for object_for_comments %}"> <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div> </amp-iframe>
<div overflow tabindex="0" role="button" aria-label="Read more">Read more!</div>
は、
Example には
resizable
を
上記 html は、{% disqus_id_for object_for_comments %}
で、
4. diaqus の 設定画面から、 信頼済みの ドメインの 追加。
信頼済み
これで
5. 追記 page.url と、 page.identifier の 設定方法を 変更した。
後日、1.-4.
の
amp-iframe 呼び
出し部の 変更
canonical url をiframe に パラメータ url で クエリストリングと して 設定、 クエリストリングの 末尾に、 hash を 移動しました。 <div id="disqus_thread"> <amp-iframe width=600 height=200 layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable src="https://kemsakurai.github.io/cooperation/amp_disqus_thread.html?url={{ request.get_full_path|to_normal_url }}#{% disqus_id_for object_for_comments %}"> <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div> </amp-iframe> </div>
iframe html で
page.url と、 page.identifier を 設定
クエリストリングで、設定した url を 取得、 domain を 付与して、 page.url とし、 hashの #
を削除して、 page.identifier と して 設定しました。 var disqus_config = function () { this.page.url = "https://www.monotalk.xyz" + (new URL(window.location)).searchParams.get("url"); // Replace PAGE_URL with your page's canonical URL variable var hash = window.location.hash; if (hash.length > 0) { hash = hash.slice(1); } this.page.identifier = hash; };
これで、
以上です。
コメント