lil-bee: the randomizer

Integrating the Disqus Comment System to the Classic Blogger Template

Sunday, August 12, 2012 | 12:30 am | Comment ⇢

EDIT: Google's Country Redirection Update breaks Disqus. Check this post to see how to fix it -> link. Also, the link to the page where I learned how to integrate Disqus onto the classic template no longer seems to exist. So I'm going to add the code I've added to my custom template to make it work. I take no credit for this work though, I got the code from the link (which at the time of writing no longer exists).

CODE:

1. I've added this code AFTER the <head> code, right BELOW the <style type="text/css"> code. I don't know if it makes a difference where you place it, maybe as long as its after <head>?

2. I've added this code BEFORE the <Blogger> code starts / right ABOVE the </body> code.

Note: ^ Replace SITESHORTNAME with your Disqus Site Short Name. You should be able to find this in your Disqus settings.

3. After the <Blogger> code where you have the codes for your posts, I've added this code BEFORE the </Blogger> code, right BELOW the <$BlogItemBody$> code. Where you put your code depends on your individual templates. Basically add the code AFTER <Blogger> and BEFORE </Blogger> and you should be fine. Again, replace SITESHORTNAME with your individual Disqus Site Short Name.

<div style="text-align: right;">
<mainorarchivepage><blogitemcommentsenabled>


<a class='comment-link commentslink' href='<$BlogItemPermalinkUrl$>#disqus_thread'><span style="text-transform:lowercase">Comment</span></a>

      </BlogItemCommentsEnabled><blogitembacklinksenabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage></right></div>

 <itempage>
  <div id="comments">
 <blogitemcommentsenabled><a name="comments"></a>
  
    <h4>

Comments:</h4>
<dl id="comments-block">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
        <$I18NAtCommentTimeWithPermalink$>,
        <$I18NCommentAuthorSaid$>
      </dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
      </dd>
     </BlogItemComments>
      <$CommentPager$>
    </dl>
<p>

    </p>

    </p>
<dl id="comments-disqus">
    
    <div id='disqus_thread'/>
    <div id='disqus_post_title' style='display:none;'>
<$BlogItemTitle$></div>
<div id='disqus_post_message' style='display:none;'>
<$BlogItemBody$></div>
<script type='text/javascript'>
      var disqus_url = '<$BlogItemPermalinkUrl$>';
      var disqus_title = document.getElementById('disqus_post_title').innerHTML;
      var disqus_message = document.getElementById('disqus_post_message').innerHTML;
    </script>
    <script src='http://disqus.com/forums/SITESHORTNAME/embed.js' type='text/javascript'></script>
    <noscript><a href='http://SITESHORTNAME.disqus.com/?url=<$BlogItemPermalinkUrl$>'>View the entire comment thread.</a></noscript>
    <a class='dsq-brlink' href='http://disqus.com'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
    
</dl>
</BlogItemCommentsEnabled>    
    <blogitembacklinksenabled>
    <a name="links"></a><h4>
<$I18NLinksToThisPost$>:</h4>
<dl id="comments-block">
    <blogitembacklinks>
<dt class="comment-title">
        <$BlogBacklinkControl$>
        <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
        </dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
        <br />
        <span class="comment-poster">
        <em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
        </span>
        </dd>
    </BlogItemBacklinks>
    </dl>
<p class="comment-timestamp">
<$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
 <p>
<a href="<$BlogURL$>"><< <$I18NHome$></a>
    </p>
</div>
</ItemPage>

--------------------------------------------------------------------------------------------------------------

Hey FFs (if you don't know what this means you should really read the sidebar >.<),

So I've been wanting to try out the Disqus system for my comments .. but as you know, my blog template was done before Blogger updated the default blog system and so integrating widgets have been particularly hard :/

Anyway, as you FFs should know by now, the geek in me don't give up that easy .. so I searched around, tried different methods and FINALLY got a way to make it work.

And because I'm such an aesthetic whore, I'm sorting out all my old comments and importing them all to Disqus so everything is under one system :)

So what I'm trying to say is .. SHUT UP .. lolol joke. But I have disabled comments for the moment and this is the reason why. I'm hoping everything will be sorted out in the next 48 hours, but till then if you really really need to get something off your chest, you can use my tagboard :)

^Off Topic: I was thinking of getting rid of my tagboard after Disqus gets sorted out. Idk, it doesn't really have any moderation and has been used for spamming. But maybe I'll leave it for random comments not related to posts? What do you think?

Also, before I sign this post off, you can find the instructions to add Disqus to the Classic Blogger Template HERE. Its fairly simple but you do need some HTML knowledge and courage :P Please note though, that LINE 13 from STEP 5.2 has an error as it uses square brackets, [ ], which need to be replaced with inequality signs < >. My blogger template was not recognising the commands till I changed my brackets.

As far as I'm aware, Disqus is relatively easy / automated for new blog templates, so make sure you sign up to it! Much better than the default Blogger comment system :)

◢

Post a Comment