Adding smarter DISQUS to your concrete5

Permalink 7 users found helpful
Guys,

I've just finished figuring out a smarter way to implement Disqus, a third-party commenting system

Sometime, you don't bother users to register on your site, but comment using Facebook, twitter or other social ID.

Disqus is a fine comment system. I decided to use it simply because major blog site such as TechCrunch and Mashable are using it. No other reasons. I didn't choose it because of functionality. I chose it because of the brand & trend :p It's like the designers must use Mac. Sometime, you need to do it for web world :(

Anyhow, you can embed disqus comment easily by pasting onto HTML block after obtaining the code from disqus.

I used to use a global HTML block and embed the disqus HTML code and placed it onto each page using default page type and global block.

However, this approach has one problem.

When you go to the edit mode and right after you finish editing, the URL of your concrete5 site becomes "/index.php?cID=128" instead of pretty URL.

If you just use simple HTML code. Disqus think that it's different page. And they won't load the previously saved comments.

Also, if you want to change the URL, you will lose all of your previously saved comments.

So I took a look at their developers' guide. And I got to know that you can use the "identifier" instead of URL.

It's very simple implementation of Disqus. And I've copied the "disable view" from YouTube block.

Now concrete5 handle Disqus smarter.

Here is the code.
You must change the first 3 lines.
But that's it.

Also you must know how to create an original theme and page_type.

Copy and paste the code onto your theme file.


<?php
$DisqusWidth=620; // width of comment area
$DisqusHeight=200; // height of comment area
$DisqusShortname = 'disqus_shortname'; // CHANGE IT TO YOUT SHORTNAME
if ($c->isEditMode()) { ?>
   <div class="ccm-edit-mode-disabled-item" style="width:<?php echo $DisqusWidth; ?>px; height:<?php echo $DisqusHeight; ?>px;">
      <div style="padding:8px 0px; padding-top: <?php  echo round($DisqusHeight/2)-10; ?>px;"><?php  echo t('Content disabled in edit mode.'); ?></div>
   </div>   
<?php  } else { ?>
<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '<?php echo $DisqusShortname ?>';
    var disqus_identifier = '<?php echo $c->getCollectionID() .' '. BASE_URL . DIR_REL . '/index.php?cID=' . $c->getCollectionID(); ?>';
    var disqus_url = '<?php echo BASE_URL . DIR_REL . View::getViewPath() . '/'; ?>';
    (function() {



This is the result
http://www.concrete5.org/about/showcase/entertainment/yokosonews/...


Here is a question.

Do you want a package (and block) to make this process easier?

If enough people responded, I may consider making this as a add-on.

Also if you know more about Disqus, I'm more than welcome for your suggestions.

katz515
 
andreyman3d2k replied on at Permalink Reply
This was supremely useful, thanks for the article. I, for one, would really benefit from a block, because some of this is Greek to me.

Thanks again,

Andrey
LucasAnderson replied on at Permalink Reply
LucasAnderson
Katz! Awesome!

I would recommend that you do the add-on or have this moved to the How-To section.
adamjohnson replied on at Permalink Reply
adamjohnson
Katz,

Thanks for the info! I would definitely package this and make it a block. There's nothing else like it in the marketplace.
adamjohnson replied on at Permalink Reply
adamjohnson
Just a quick heads up:

If you plan on using this code, in order for Disqus comments to work, you have to have Pretty URL's enabled via Dashboard > Sitewide Settings.

(Technically, you can enable P-URL's, visit the pages with Disqus comments, make the connection to Disqus.com, then go back and disable P-URL's & Disqus will still work.)
madeforspace replied on at Permalink Reply
madeforspace
Nice one Katz

The only add on I know that uses this is ScottC Blog. Would be good to use it for other things too.
HarperJayne replied on at Permalink Reply
Ok, the thread is useful to an extent. The only question I really have at this point is: how do you use the custom code? I followed along to get the global html block into the defaults for my custom page type. I am using Blogga, so that page is modified to include a lower block and has the Disqus code in it.

My issue is that you say that the custom code needs to go into the theme file. What specific file, and where? At this point I can get the Disqus comments to show up . . . so I'm halfway! :)
adamjohnson replied on at Permalink Reply
adamjohnson
Actually, this has been made into an Add On that you can just install and use. Check it out in the marketplace:

http://www.concrete5.org/marketplace/addons/disqus-comments/...
HarperJayne replied on at Permalink Reply
Ha, funny, I just did.

(The problem with the AddOn being it has zero documentation. So until I came here I didn't have enough info to even use it correctly! LOL)
HarperJayne replied on at Permalink Reply
Ok, it looks like I managed to figure it out using the AddOn package. (Which I had tried and failed to use correctly until after info in this thread pointed me in the right direction.)
IceManSpy replied on at Permalink Reply
IceManSpy
In
if ($c->isEditMode()) {


I suggested that better solution is:
$u = new User();
if ($c->isEditMode() || $u->isLoggedIn()) {


In this case, when you're editing post in URL you can see page ID. And also it is generated in Disqus, but I don't want to create it (I use pretty URL without page ID in URL).