Resource icon

Unmaintained Add disqus under a quick reply ultimited

No permission to download
Compatible XF 2.x versions
  1. 2.0
  2. 2.1
  3. 2.2
Additional requirements
handle template
License
free
Updates duration
ultimited
Visible branding
No
Hi everyone, in this tutorial I will explain how to insert disqus into your site.

1 Go to https://disqus.com/
2 Go to https://disqus.com/profile/signup/intent/ and select "I want to install disqus on my site"
3 Enter the site info, then create
4 Select paid or free plan
5 now, select the source code:
1666451128483.webp

6 you will get something like this:
Code:
<div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://polll-1.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

7 Now go to ACP
8 Appearance -> Templates
9 To research: quick_reply_macros and edit
10 search: {$editorHtml|raw} around the line 77/78
11: ADD the class <div class="message-cell message-cell--user"> then the disqus code
12 Demo:
Code:
<xf:else />
                        {$editorHtml|raw}
                        <div class="message-cell message-cell--user"><div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://bloghw.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div>
REMEMBER TO CLOSE THE DIV WITH </DIV> OWN AS IN THE EXAMPLE

If you want to inform about the choice between disqus and the normal answer (as I did) you can insert the message under a arg-previewUrl="">

Demo:

Code:
arg-previewUrl="">
    <p style="text-align: center;">your text</p>
<p style="text-align: center;">USe DISQUS:</p>
    <xf:css src="message.less" />
    <xf:set var="$sticky" value="{{ property('messageSticky') }}" />


Result:
1666450928272.webp
  • Like
Reactions: eL_
Author
Luca_
Downloads
11
Views
853
First release
Last update

Ratings

0.00 star(s) 0 ratings
Top Bottom