- Compatible XF 2.x versions
- 2.0
- 2.1
- 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:
6 you will get something like this:
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:
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:
Result:
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:
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>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:
