Jangan lupa membaca artikel tentang bisnis di > Informasi bisnis terbaik 2020.
You can load Disqus Comment Box when you click on an Element. Advantage Loading Disqus comments on demand with onclick event will increases page load speed of your site.
Usually, when the page its been loaded, at the same time disqus comment system will also be loaded. It will gain much http request, load all resource associated comments from Disqus server. All the comments, avatars of commentators, uploaded images, support files etc, all this has to come all the way from Disqus server on to our page. As result, the page load speed of our site decreases.
When we are fans of speed, we have to do something to lower http request. If you are searching to trick disqus, it will gave you at least two option, Lazyload disqus comment, so disqus will load when our mouse scroll hit at the disqus box element. the other option is load Disqus Comment box on demand with on Click function.
This post is about Show Disqus Comment Box with Comment Counter Count after we Click on Div Element. We have two option when we want to call Disqus Comment Count, with and without API, and in this post, we want to use it without API Call. Let’s see how to do this.
First, go to disqus admin site setting page and click on "Community". On the right side we have three "Comment Count Link" Zero comments, One comment and Multiple comment. by default it filled with : Zero comment : 0 Comments, One comment : 1 Comments, Multiple : {num} Comments. We have to Change that comment counter text on that field with removing all " Comments" text, so it will look like : 0, 1, and {num}. Click on Save button to make changes.
Second, go to your blogger site admin page. If you have already installed disqus widget, remove it first from the left sidebar Layout section. Next, click on "Theme" on the left sidebar. On the new right interface you will notice "Backup /Restore" button, hit that to download and save your xml theme script, in case we got messing around it can be restored with that xml by hitting the button again.
On the "Theme" Section, Click on "Edit HTML", click on our html text area box then hit CTRL + F on the keyboard, then fill with <b:includable id='comments' var='post'> on the input text area new ones appear in our html code box, then hit Enter on the keyboard.
Once the result found, we are shown the highlighted word. if it still wrapped, click on ">" on the left line of the highlighted word, so we got code structure like below :
We are about to modify on that structure, to make it look like below :
To that, grab this block code and paste below <div class='comments' id='comments'> , make change onvar disqus_shortname = 'your_disqus_shortname' with your given shortname, save and visit any of your blog post to see the changes.
Explanation Html Part :
<b:if cond='data:view.isPost'> ... </b:if> its new blogger conditional tag if its page contain your post. the old one is <b:if cond='data:blog.pageType == "item"'> ... </b:if> we put this conditional tag before our code, so our code will only show in the page contain post only, blog static pages not included.
If you want to implement this code on mobile (m=1) only, then you must add<b:if cond='data:blog.isMobile == "true"'> after post conditional tag and place </b:if> right before closing conditional post tag </b:if>
Inside<Style> ... </style> is code for theming our On Click Div Block.
<div id='disqus_thread'> ... </div> this is block will be embedded by our disqus comment box iframe. <div id='disqus-box'> ... </div> This our div like a button, infused On Click jquerry Code.
Next is<div id='disqus-pre'> ... <span class='disqus-comment-count'>0</span> </div> this is the part to show our Text and Comment Count text inside span tag filled with number "0".
in the Span tag, you will see expr:data-disqus-url='data:post.canonicalUrl used by disqus to identify which page is, we can replace it to expr:data-disqus-identifier='data:post.id if we want. while data:post.id is our unique post id which mean different on every post, data:post.canonicalUrl is our post current url.
Explanation Script Part :
inside<script> ... </script> is code to modifying html part dynamically.
var disqus_shortname = 'your_disqus_shortname' you must change it to your disqus short name.
The Comment Part.
We usinggetScript() to get the count.js file and then call function disqus_counts_loaded upon success. Basically, if you follow guidelines from disqus to implementing comment count, we have to only insert count.js script tag and class='disqus-comment-count' . The problem is disqus will not identify your post as an open thread if that post never been open Disqus Comment Box, as a result comment count will show nothing.
After the first time we open (load) disqus comment box there is huge delay before the post comment count show 0 (zero), thats why we filled "0" inside span tag. This is remind me of bot crawl to our page and index it.
In this case, we want to change that#disqus-pre if text inside span have value = 0 with if (obj.text() == "0") dynamically to "Write Comment" text by adding $('#disqus-pre').html("Write Comment"); , but we got another problem, count.js script does not have any callback, so we dont know when the value inside span has been changed by disqus. This why disqus_counts_loaded() must play.
Via$.getScript() . This loads the count.js script file, executes it and then calls the callback function disqus_counts_loaded() . When the script is done with, it inserts another script called count-data.js into our page to fetch the data. When count-data.js is loaded, DISQUSWIDGETS.displayCount() is automatically called to fill the elements full with the new data. Because we overridden displayCount() with our own function, it now fires an event afterwards to any elements wishing to know when the "disqus-counts-loaded " occurs.
On the bottom part, there is if statment, if url contain Comment, div disqus box must be open. so we add trigger click on that.
OnClick Part.
This one is handle right click function when someone click on div with id (#)disqus-box . In the end part we change current text of #disqus-pre to "Loading Comment Box" and dissapear after 300ms when disqus on ready state after we click on it.
Disadvantage of this method showing comment count without API Call, if someone post an comment and then reload the current url the comment count will not change immediately. Because it have delay 10-15 minute even more before comment count get updated by disqus server. You can make it comment count updated immediately after reloading page with API Call Function.
Usually, when the page its been loaded, at the same time disqus comment system will also be loaded. It will gain much http request, load all resource associated comments from Disqus server. All the comments, avatars of commentators, uploaded images, support files etc, all this has to come all the way from Disqus server on to our page. As result, the page load speed of our site decreases.
When we are fans of speed, we have to do something to lower http request. If you are searching to trick disqus, it will gave you at least two option, Lazyload disqus comment, so disqus will load when our mouse scroll hit at the disqus box element. the other option is load Disqus Comment box on demand with on Click function.
This post is about Show Disqus Comment Box with Comment Counter Count after we Click on Div Element. We have two option when we want to call Disqus Comment Count, with and without API, and in this post, we want to use it without API Call. Let’s see how to do this.
DEMO
Show Comments [0]
Second, go to your blogger site admin page. If you have already installed disqus widget, remove it first from the left sidebar Layout section. Next, click on "Theme" on the left sidebar. On the new right interface you will notice "Backup /Restore" button, hit that to download and save your xml theme script, in case we got messing around it can be restored with that xml by hitting the button again.
On the "Theme" Section, Click on "Edit HTML", click on our html text area box then hit CTRL + F on the keyboard, then fill with <b:includable id='comments' var='post'> on the input text area new ones appear in our html code box, then hit Enter on the keyboard.
Once the result found, we are shown the highlighted word. if it still wrapped, click on ">" on the left line of the highlighted word, so we got code structure like below :
<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4><data:post.commentLabelFull/>:</h4>
We are about to modify on that structure, to make it look like below :
<b:includable id='comments' var='post'> <div class='comments' id='comments'> <!-- Paste our newly disqus block code below here --> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4><data:post.commentLabelFull/>:</h4>
To that, grab this block code and paste below <div class='comments' id='comments'> , make change on
<!-- Disqus Block Code --> <b:if cond='data:view.isPost'> <style> #disqus-box { background-color: #2e9fff; color: #fff; font-size: 16px; font-weight: 600; height:100px; text-align: center; width: 100%; border-width: 0px; margin: 20px 0px; cursor: pointer; border-radius: 5px; } #disqus-box:hover { background: #164b78; } #disqus-pre { position: relative; padding: 40px 0px; } </style> <div class='popzone'> <div id='disqus_thread'> <div id='disqus-box'> <div id='disqus-pre'>Show Comments [<span id='comment-count' class='disqus-comment-count' expr:data-disqus-url='data:post.canonicalUrl'>0</span>]</div> </div> </div> </div> <script> var disqus_shortname = 'your_disqus_shortname'; var disqus_blogger_current_url = "<data:blog.canonicalUrl/>"; $.getScript('//' + disqus_shortname + '.disqus.com/count.js', disqus_counts_loaded); function disqus_counts_loaded() { DISQUSWIDGETS.old_displayCount = DISQUSWIDGETS.displayCount; DISQUSWIDGETS.displayCount = function(arg) { DISQUSWIDGETS.old_displayCount(arg); $("[id], [comments]").trigger('disqus-counts-loaded'); } } $('#comment-count').bind('disqus-counts-loaded', function() { var obj = $(this); if (obj.text() == "0") { $('#disqus-pre').html("Write Comment"); } }); var disqus_config = function () { this.callbacks.onReady = [function(data) { $("#disqus-box").delay(300).fadeOut(); }]; }; $('#disqus-box').on('click', function(){ $.ajax({ type: 'GET', url: '//' + disqus_shortname + '.disqus.com/blogger_item.js', dataType: 'script', cache: true }); $('#disqus-pre').html("Loading Comment Box..."); }); if(/\#comment/.test(location.hash)){ $('#disqus-box').trigger('click'); } </script> </b:if> <!-- Disqus Block Code End -->
Explanation Html Part :
If you want to implement this code on mobile (m=1) only, then you must add
Inside
Next is
in the Span tag, you will see expr:data-disqus-url='data:post.canonicalUrl used by disqus to identify which page is, we can replace it to expr:data-disqus-identifier='data:post.id if we want. while data:post.id is our unique post id which mean different on every post, data:post.canonicalUrl is our post current url.
Explanation Script Part :
inside
The Comment Part.
We using
After the first time we open (load) disqus comment box there is huge delay before the post comment count show 0 (zero), thats why we filled "0" inside span tag. This is remind me of bot crawl to our page and index it.
In this case, we want to change that
Via
On the bottom part, there is if statment, if url contain Comment, div disqus box must be open. so we add trigger click on that.
OnClick Part.
This one is handle right click function when someone click on div with id (#)
Disadvantage of this method showing comment count without API Call, if someone post an comment and then reload the current url the comment count will not change immediately. Because it have delay 10-15 minute even more before comment count get updated by disqus server. You can make it comment count updated immediately after reloading page with API Call Function.
Selain sebagai media informasi pendidikan, kami juga berbagi artikel terkait bisnis.
