News:

SMF 2.0.19 has been released! Please update. Read more.

Main Menu

Tutorial: How to add Disqus support to SMF

Started by MetalMusicMan, February 29, 2012, 08:16:35 PM

Previous topic - Next topic

MetalMusicMan

How to add support to SMF

I'll be doing this for SMF 1.1.xx since that's what I use, but this should work for SMF 2.0 as well since we'll be doing this manually.  If I'm posting this in the wrong place, please forgive me-- I searched for ages for a post on how to do this and I couldn't find one, so now that I've figured it out for myself I think this would be useful. 

I did use BlueDevil's SMF 2.0 Disqus mod as a starting point, so my thanks to him for making his SMF 2.0 mod and giving me what I needed to make this work on my own SMF 1.1.xx site since I am not a coder.  If you use SMF 2.0, you may want to install his mod and then scroll down to the SSI section of this post to see how to enable that, since his mod doesn't work with it as far as I know.

I don't know how to write packages, so I'm sorry for that... but setting this up will be simple because I've already pulled my hair out for hours and gotten it to work, lol.  Given that, now you can just follow these steps :)






What this will do for you:

  • Place a Disqus comment box at the bottom of the first post in topics made on your forum on the designated board(s).
  • Users can comment in said area, which supports Facebook, Twitter, Google, Yahoo, and OpenID accounts.
  • Users can also "Like" posts if they choose, and it will sent links out via their Twitter, Facebook, etc. that link back to the corresponding post on your forum.
  • Optional: Comment link / comment counter that works with SSI boardnews / multiple board boardnews

Why this is good:

  • More discussion without the burden of registration for non-members/lurkers, good spam filter and moderation system.
  • "Like" feature is a great way to have users generate increased traffic.

If you're curious on the SMF side of things, I have Disqus using the SMF Topic ID as an identifier for its counter/thread creation.  Each Disqus comment thread links to the correct, unique SMF Topic ID so that comments aren't lost or mixed up.






Step 1) Create a Disqus account and register your site.  Make your site Shortname something simple that you will remember, you'll be typing it in a bit as you set things up.

Step 2) Open/edit your Theme's "Display.template.php".  Note: many themes don't have/use this file, and instead use the SMF Default Theme's "Display.template.php".  So if you can't find it, check in your "default" theme folder.

Step 3a) Find this line of code:// Assuming there are attachments...

Step 3b) Paste this code ABOVE it://Disqus Mod Begin
      if(($message['id'] == $context['topic_first_message']) && ($context['current_board'] == YOURBOARDNUMBER))
{
echo'
<br />
<hr />
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = \'', DISQUSSITESHORTNAME ,'\'; // required: replace example with your forum shortname
var disqus_url = \'http://\www.YOURURL.com/forum/index.php?topic=', $context['current_topic'] ,'\';
var disqus_identifier = ', $context['current_topic'] ,';

    /* * * DON\'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement(\'script\'); dsq.type = \'text/javascript\'; dsq.async = true;
        dsq.src = \'http://\' + disqus_shortname + \'.disqus.com/embed.js\';
        (document.getElementsByTagName(\'head\')[0] || document.getElementsByTagName(\'body\')[0]).appendChild(dsq);
    })();
</script>';
}
//Disqus Mod End


Step 3c) Replace "YOURBOARDNUMBER", "DISQUSSITESHORTNAME", and "YOURURL" in the above code with your corresponding info.  Most people probably won't want the Disqus comments on every board, hence the "YOURBOARDNUMBER", it specifies which board to display Disqus on.

Step 3d) Regarding multiple boards: I don't know the SMF code to do an "or" list, if someone does, please let me know.  For now though, I have it working on multiple boards by simply re-pasting the above code once for each board and changing "YOURBOARDNUMBER" accordingly for each board I want the Disqus comments to show up on.  Pasting it multiple times doesn't seem to hurt anything as far as load speeds go since it starts with an "if" statement anyway.  I know it's not proper, but I'm really not a coder, I'm a designer :P






You may or may not want to disable SMF replies in boards that have Disqus on the first post-- I leave them on, though. 

That's it for the forum, you're done.  However, if you use SSI boardnews and/or the multiple board mod like I do as a frontpage, you'll want to follow these additional steps.  This will get your SSI to link to the Disqus comments and also count the comments.


Step 1a) Paste this code right above the </body> tag of any page you're using SSI / boardnews on:<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'DISQUSSITESHORTNAME'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>


Step 1b) Replace "DISQUSSITESHORTNAME" with your Disqus site's Shortname.

Step 2) Place this code wherever you want your comments / comment counter text to appear: <a href="', $news['href'] ,'#disqus_thread" data-disqus-identifier="', $news['id'] ,'">Write / View comments</a>







That's it, you should be all set up and running.  If I left anything out, let me know.  Again this isn't the kind of thing that I normally do so I apologize if I mis-communicated anything. 


DEMO: http://www.MetalMusicMan.com

You can see this working on my SMF 1.1.xx site as a demo, if you want.  The top links all go to SSI pages that call from the Forum.  You can find those sections listed in my Forum under the category "Front Page Content Management".  I do not have Disqus enabled for the "Forum / General Discussion" category.

"How'd you get to be so smart?"
"Trial and error."

-- Duncan MacLeod, Highlander (S1E20)

Admin of MetalMusicMan.com

scriptster

MetalMusicMan, thanks for the nice tutorial. I am also interested in letting visitors post via third party authentication APIs - should be good for new forums. But there are a couple of things I'm not sure about, so wanted to ask your opinion since you're already running the system:   

I'm trying to wrap my head around this issue of what happens with the actual content of the comment - do I understand it correctly that DISQUS comments are not posted to your site per se, they are wrapped in an <iframe> that's actually fed from hxxp:disqus.com [nonactive]? In other words, there's a comment but your site gets no benefit of facilitating it: no new content has been added to your site. Do I understand the issue correctly or my luck of clear understanding of how DISQUS works shows here?

Also, I've looked at the Disqus comments on your site and they do look awesome, thumbs up to you for getting this done! But I have a nagging feeling that the actual registered users of the forum may not like the fact that their comments are being pushed down (way down) by, let's face it, mostly useless one-sentence comments by people that didn't care to register and have no vested interest in your site. I know it's only been a few days since you've done it, but do you have some early feedback from your own registered users, how much do they actually like it?

Thanks for your input!

MetalMusicMan

#2
Quote from: scriptster on March 06, 2012, 01:54:31 PM
MetalMusicMan, thanks for the nice tutorial. I am also interested in letting visitors post via third party authentication APIs - should be good for new forums. But there are a couple of things I'm not sure about, so wanted to ask your opinion since you're already running the system:   

I'm trying to wrap my head around this issue of what happens with the actual content of the comment - do I understand it correctly that DISQUS comments are not posted to your site per se, they are wrapped in an <iframe> that's actually fed from disqus.com? In other words, there's a comment but your site gets no benefit of facilitating it: no new content has been added to your site. Do I understand the issue correctly or my luck of clear understanding of how DISQUS works shows here?

The comments are hosted in "threads" via the Disqus website and then injected into your page via the Disqus code.  I've seen comments show up in search results plenty of times on other websites that use Disqus; crawlers still see the comments just like anything else on the page, as far as I know.

Further more, you enable these unregistered users to easily "like" your content and then share it via Twitter/Facebook, which is a great marketing tool in itself.

Quote from: scriptster on March 06, 2012, 01:54:31 PMAlso, I've looked at the Disqus comments on your site and they do look awesome, thumbs up to you for getting this done! But I have a nagging feeling that the actual registered users of the forum may not like the fact that their comments are being pushed down (way down) by, let's face it, mostly useless one-sentence comments by people that didn't care to register and have no vested interest in your site. I know it's only been a few days since you've done it, but do you have some early feedback from your own registered users, how much do they actually like it?

Thanks for your input!

I only have the Disqus comments enabled on my "front page" / "blog" forum boards.  So, generally speaking, I don't think there is any issue with this.  I use those boards as more of a CMS than a forum, so it fits perfectly.  I actually considered removing SMF replies from those boards entirely, but as I have an established forum userbase that seemed like a bad idea. 

For a site that wants to focus on news, you may likely want to disable SMF replies entirely on your news your news/blog sections in favor of Disqus comments.  I left them on, but your mileage may vary.

For the "real" forum, I disable Disqus entirely on my site.  I recommend that everyone else does the same.



A great example of Disqus being used as I explained above is Shoryuken.com.  They have a full forum (Xenforo), but use Disqus exclusively for the comments on their front page news (which is powered by Wordpress).

"How'd you get to be so smart?"
"Trial and error."

-- Duncan MacLeod, Highlander (S1E20)

Admin of MetalMusicMan.com

nend

Nice, I did something similar, didn't know there was a mod for that here though.

Watch if you scroll down the page you will notice a button that says "DISQUS This" at the end of the first post. If you click it, it will fade away the board replies and fade in the Disqus discussion.
http://wrestletopia.2-si.net/n/news-and-announcements/wrestle-topia-stand-on-sopa/

MetalMusicMan

That's a neat fade-away feature you have on there. 

"How'd you get to be so smart?"
"Trial and error."

-- Duncan MacLeod, Highlander (S1E20)

Admin of MetalMusicMan.com

TheDel

Sorry for digging an old thread but I am having an issue dropping this on a frontpage.
Now I am using bluedevil's mod then went straight to the bottom of the post.

I added step 1a/b then went to 2 and dropped that in right after my ssi for board news.
However, I am only getting the Disqus comment after the last posting.
How do I tweak this so that a comment appears for each posting-

<?php ssi_boardNews($board 119.0$limit 15);?>
<a href="', $news['href'] ,'#disqus_thread" data-disqus-identifier="', $news['id'] ,'">Write / View comments</a>

MetalMusicMan

Quote from: TheDel on June 12, 2013, 03:51:44 AM
Sorry for digging an old thread but I am having an issue dropping this on a frontpage.
Now I am using bluedevil's mod then went straight to the bottom of the post.

I added step 1a/b then went to 2 and dropped that in right after my ssi for board news.
However, I am only getting the Disqus comment after the last posting.
How do I tweak this so that a comment appears for each posting-

<?php ssi_boardNews($board 119.0$limit 15);?>
<a href="', $news['href'] ,'#disqus_thread" data-disqus-identifier="', $news['id'] ,'">Write / View comments</a>


You need to put the code in the section of your SSI Board news script that repeats, that way it repeats for each post. 

"How'd you get to be so smart?"
"Trial and error."

-- Duncan MacLeod, Highlander (S1E20)

Admin of MetalMusicMan.com

Advertisement: