Disqus Integration

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
Josh
Regular
Posts: 110
Joined: Mon Jul 18, 2005 3:02 pm
Location: Berlin
Contact:

Disqus Integration

Post by Josh » Sat May 21, 2011 3:10 pm

Dear all,

I would like to integrate the http://disqus.com commenting system in my serendipity blog: http://atlanticreview.org/

There is not a plugin, but apparently all it takes is to use this javascript code.

I assume that I should put it in the entries.tpl

I know my Disqus shortname, but it does not work without changing these two parameters:
disqus_identifier tells Disqus how to uniquely identify the current page.
disqus_url tells Disqus the location of the page for permalinking purposes.

Does anyone know how to change the code after the // in the javascript?
The structure of my permalinks is like this:
http://atlanticreview.org/archives/1477 ... e-90s.html

Code: Select all

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = 'unique_dynamic_id_1234';
    // var disqus_url = 'http://example.com/permalink-to-page.html';

    /* * * 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>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

Configuration variables
Thank you

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Disqus Integration

Post by yellowled » Sat May 21, 2011 4:59 pm

Josh wrote:I assume that I should put it in the entries.tpl
Yes, preferably instead of the usual comments/comment form area. (I assume the JS code by disqus also provides a comment form?)
Josh wrote:disqus_identifier tells Disqus how to uniquely identify the current page.
disqus_url tells Disqus the location of the page for permalinking purposes.
Apparently, disqus_identifier just needs to be unique, so it could be your entry id, disqus_url is a permalink to the entry, so:

Code: Select all

    var disqus_identifier = 'atlantic_review_{$entry.id}';
    var disqus_url = '{$entry.link}';
should do the trick. Since you're embedding JS code into a smarty template, you need to masque any curly braquets which belong to the disqus JS code, but not the ones around smarty variables like {$entry.id}! So instead of a { in JS code you write {ldelim}, and instead of a } in JS code you need a {rdelim}, i.e.

Code: Select all

(function() {ldelim}
[...]
{rdelim})();
YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Josh
Regular
Posts: 110
Joined: Mon Jul 18, 2005 3:02 pm
Location: Berlin
Contact:

Re: Disqus Integration

Post by Josh » Sat May 21, 2011 7:09 pm

Thank you!

It did not work though. The blog loads with this error message "We were unable to load Disqus. For more information please see our documentation on identifier and urls."

This is how my entries.tpl file looks like:

Code: Select all

<!-- ENTRIES START -->
   {serendipity_hookPlugin hook="entries_header"

addData="$entry_id"} {foreach from=$entries item="dategroup"} <div class="serendipity_entry_date"> {if $dategroup.is_sticky}

{else} {/if} {foreach from=$dategroup.entries item="entry"} <h4 class="serendipity_title"><a href="%7B$entry.link%7D">{$entry.title}</a></h4>

<div class="serendipity_entry serendipity_entry_author_{$entry.author|@makeFilename} {if $entry.is_entry_owner}serendipity_entry_author_self{/if}"><p class="posttime">{$CONST.POSTED_BY} {$entry.author}

{$CONST.IN}

{foreach from=$entry.categories item="category" name="categories"}<a href="%7B$category.category_link%7D">{$category.category_name|@escape}</a>{if

not $smarty.foreach.categories.last}, {/if}{/foreach} {$CONST.ON}

{$entry.timestamp|@formatTime:DATE_FORMAT_ENTRY}</p> <div class="serendipity_entry_body"> {$entry.body} {if

$entry.has_extended and not $is_single_entry and not

$entry.is_extended} <br><a href="%7B$entry.link%7D#extended">{$CONST.VIEW_EXTENDED_ENTRY|@sprintf:$entry.title}</a>

{/if} </div> {if $entry.is_extended} <div class="serendipity_entry_extended">{$entry.extended}</div>

{/if} <div class="serendipity_entryFooter">

<a href="%7B$entry.link%7D">Permalink</a> - {if

$entry.has_comments} {if $use_popups} <a href="%7B$entry.link_popup_comments%7D" onclick="window.open(this.href, 'comments', 'width=480,height=480,scrollbars=yes'); return false;">{$entry.label_comments}

({$entry.comments})</a> {else} <a href="%7B$entry.link%7D#comments">{$entry.label_comments}

({$entry.comments})</a> {/if} {/if} {if $entry.is_entry_owner and

not $is_preview} - <a href="%7B$entry.link_edit%7D">{$CONST.EDIT_ENTRY}</a>

{/if} {$entry.add_footer} </div> </div> <br> <font size="2"><strong>Welcome!

You are reading the ATLANTIC REVIEW --

a Press Digest on Transatlantic Relations combined with commentary and

analysis. <u><a href="http://atlanticreview.org/archives/965-About-the-Atlantic-Review.html">More

about us</a></u>. <br><br>Follow Atlantic

Review on <a href="https://www.facebook.com/pages/Atlantic-Review/176619495697023">Facebook</a>

or on <a href="https://twitter.com/transatlantic">Twitter</a>.

Subscribe to one of <u><a href="http://atlanticreview.org/pages/rss-feeds.html">our

RSS-Feeds</a></u> or to our <u><a href="http://ml02.ispgateway.de/mailman/listinfo/newcontent_atlanticreview.org">newsletter</a></u>.</strong></font><br><br><br>

<div id="disqus_thread"></div><script type="text/javascript">

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_shortname = 'atlanticreview'; // required: replace example with your forum shortname

var disqus_identifier = 'atlantic_review_{$entry.id}';

var disqus_url = '{$entry.link}';

/* * * DON'T EDIT BELOW THIS LINE * * */

(function() {ldelim}

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);

{rdelim})();

</script>

<noscript>Please enable JavaScript to view the <a

href="http://disqus.com/?ref_noscript">comments powered by

Disqus.</a></noscript>

<a href="http://disqus.com" class="dsq-brlink">blog

comments powered by <span class="logo-disqus">Disqus</span></a>      {$entry.backend_preview}
        {/foreach}
    </div>
    {foreachelse}
    {if not $plugin_clean_page}
        {$CONST.NO_ENTRIES_TO_PRINT}
    {/if}
    {/foreach}

   

<div class="serendipity_pageFooter" style="text-align: center;">

{if $footer_prev_page} <a href="%7B$footer_prev_page%7D">«

{$CONST.PREVIOUS_PAGE}</a>&nbsp;&nbsp; {/if} {if

$footer_info} ({$footer_info}) {/if} {if $footer_next_page}

&nbsp;&nbsp;<a href="%7B$footer_next_page%7D">{$CONST.NEXT_PAGE}

»</a> {/if} {serendipity_hookPlugin hook="entries_footer"} </div>

<!-- ENTRIES END -->

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Disqus Integration

Post by yellowled » Sun May 22, 2011 1:26 am

Josh wrote:It did not work though. The blog loads with this error message "We were unable to load Disqus. For more information please see our documentation on identifier and urls."
Oh, well. As usual, it helps to actually read the documentation, not only look up the parts you mentioned. :wink:

Apparently, you need to add another piece of JS code, this time to your index.tpl, right before the closing </body> tag.

See http://docs.disqus.com/developers/universal/, section "Comment count". This time, you only need to add your own shortname. (Don't forget to mask the curly brackets, though.)

Hope that's it.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Josh
Regular
Posts: 110
Joined: Mon Jul 18, 2005 3:02 pm
Location: Berlin
Contact:

Re: Disqus Integration

Post by Josh » Sun May 22, 2011 11:21 am

Thank you so much for your help!

Hm, I had thought I had read everything and that this comment count thing was optional, just indicating the number of comments, which I could deal with later.

Thanks, I will try that out right away.

Josh
Regular
Posts: 110
Joined: Mon Jul 18, 2005 3:02 pm
Location: Berlin
Contact:

Re: Disqus Integration

Post by Josh » Sun May 22, 2011 12:48 pm

DISQUS still does not load.

Perhaps this is needs to be done manually as well, I don't know how.
Next, you need to tell Disqus which links to look up and return the comment count. You can do this by appending #disqus_thread to the end of the href attribute of your links.

Disqus can look up the comment count by the URL or by a Disqus identifier. Specifying a Disqus identifier is highly recommended. To do this, add a special attribute data-disqus-identifier to your links. If you cannot use Disqus identifiers with your install of Disqus (e.g. static webpages), you can simply not add this attribute and Disqus will look up threads by the URLs in the href attributes of the links. Since URLs can change, we highly recommend using the Disqus identifier.
Address : <http://docs.disqus.com/developers/universal/>
I am into this over my head. I think it is time for me to swith to Wordpress and use the huge number of plugins they and companies like Disqus provide for them.

Thank you so much for your help.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Disqus Integration

Post by garvinhicking » Sun May 22, 2011 1:17 pm

Hi!

I'm sure we can easily work this out and also put this into a plugin. If you're about to switch though, I wouldn't like to spend my time on this for nothing.

So tell me if you want the help and help to finalize this, or if you'd rather switch.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

Josh
Regular
Posts: 110
Joined: Mon Jul 18, 2005 3:02 pm
Location: Berlin
Contact:

Re: Disqus Integration

Post by Josh » Sun May 22, 2011 1:38 pm

Dear Garvin,

Thank you for offering your help.

A plugin would be great. I think this would help other S9Y users as well. And I would not need to switch to Wordpress, since this is the only thing I am annoyed with.

Would it be possible that the old comments on old blogposts would still be displayed, and that just from now on, Disqus would be ussed?

I like S9Y very much, but got frustrated with comment moderation: Spam, insults from regular users, then I switched to commenting by registered users only, but many readers had trouble registering, then I opened it with more captchas sooner, but some folks said they can only comment once under the same name in Firefox. So, I think my settings are screwed up. I spent plenty of time on it, but it's all too complicated for me personally. Disqus will solve that AND increase integration with Twitter and Facebook.

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Disqus Integration

Post by garvinhicking » Sun May 22, 2011 1:48 pm

Hi!

Yes, the javascript could be inserted in a way that it would only be used for entries newer than date X.

I'll check into disqus tomorrow and will let you know. I think it should not take too much time. I'm eager to see ther esults of this be put into a plugin.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Disqus Integration

Post by garvinhicking » Sun May 22, 2011 9:18 pm

Hi!

I've added a very simply plugin to CVS that wraps the disqus stuff into the template, and it worked on my test blog properly.

I added the plugin as serendipity_event_disqus and it should be available as of tomorrow.

It has only one caveat: It tries to remove the s9y comment/trackback section through CSS, because the existing event hooks in the template files do not allow for removing trackbacks/comments. It relies on these CSS blocks to be existing:


.serendipity_comments,
.serendipity_section_comments,
.serendipity_section_trackbacks,
.serendipity_section_commentform

If these do not exist in your template, you need to match those names. These classes properly exist in the templates/default/entries.tpl, so I just hope everyone will have it similarly.

If not, you need to either add these names to your own template, or you need to write your own CSS that hides these comment/trackback sections.

HTH,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Disqus Integration

Post by yellowled » Mon May 23, 2011 9:54 am

garvinhicking wrote:These classes properly exist in the templates/default/entries.tpl, so I just hope everyone will have it similarly.
Oh, I could name a few templates which don't. :)
garvinhicking wrote:If not, you need to either add these names to your own template, or you need to write your own CSS that hides these comment/trackback sections.
Why not add a function to the plugin to remove them from the DOM using JS/jQuery? You could add a config option to the plugin to set the names of the DOM elements to be removed.

Code: Select all

$('.serendipity_comments','.serendipity_section_comments','.serendipity_section_trackbacks','.serendipity_section_commentform').remove();
(Yes, this will only work with JS enabled.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Disqus Integration

Post by garvinhicking » Mon May 23, 2011 10:00 am

Hi!
Why not add a function to the plugin to remove them from the DOM using JS/jQuery?
Because we don't have jquery in s9y 1.5? ;)

IMHO CSS is far easier to implement right now; once we have a stable 1.6 base a plugin could easily use that, though.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Disqus Integration

Post by yellowled » Mon May 23, 2011 10:09 am

garvinhicking wrote:IMHO CSS is far easier to implement right now; once we have a stable 1.6 base a plugin could easily use that, though.
Well, I'm just way quicker typing in a jQuery example than doing it in bare JS. Also, there's always the jQuery plugin ...

A pure CSS solution might produce side effects for screenreaders and search engines.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Disqus Integration

Post by yellowled » Mon May 23, 2011 11:06 am

yellowled wrote:A pure CSS solution might produce side effects for screenreaders and search engines.
Hmm. Thought about this - maybe we could minimize those. Can the plugin set the $entry.has_comments/_trackbacks variables? If so, we could set them to minimize the output generated in those sections, then hide those sections via CSS using

Code: Select all

.section_comments /* etc. */ {
    display: none;
    visibility: hidden;
}
This makes sure the emitted code is also hidden from screenreaders, most likely from search engines as well (search engines tend to "react" to the same CSS as screenreaders).

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Disqus Integration

Post by garvinhicking » Mon May 23, 2011 11:19 am

Hi!

I'm not sure...but I can't dedicate much time on this the next few days.

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

Post Reply