As of now, Disqus comment system is the most popular blog commenting system and is being used by many people. We also use Disqus for this blog and we love its unique professional appearance. Last week we got a challenge to display Disqus recent comments as a widget in our footer area. Then, we have many choices, Disqus also provides 2 lines of JavaScript code which you can use to drag the recent comments from its server. You can read our previous post regarding Disqus, where I explained how to apply CSS to make the plugin more attractive.
But unfortunately that was not a solution for us. We required a completely unique design with a pagination kind of thing where a fixed number of comments will be displayed in one page. Then I got one resource which could helped me is the RSS feed for Disqus recent comments. Every Disqus users has a unique feed and its URL structure is like as follow.
But still our problem was not fixed.
After getting the URL although I could see the comments but I could not fetch it to display on my page. The reason being you can not drag any data from an external RSS feed unless it comes from the same domain, every modern browsers has this same origin policy.
Ok fine, still I had one option to use JSONP which use a callback feature. I tried it once/twice…but Oops, Disqus does not support callback feature. So finally there was only option remaining, that is Yahoo Query Language.
Yahoo has a very unique SQL kind of language which you can use to fetch and handle data from various resources around the web. I personally liked this service and probably you will not find this kind of service anywhere through out the web. One day I will try to explain some more important products and services that Yahoo does provide. Now lets stick to current discussion.
I went to Yahoo console and tried following query.
select * from xml where url = “http://funbutlearn.disqus.com/latest.rss”
Finally Yahoo console gave me a query which I could use to fetch data with common HTTP GET and it also supports callback feature.
Before proceeding ahead lets have Live Demo. Please scroll down to bottom we have already implemented it in our blog.
But unfortunately that was not a solution for us. We required a completely unique design with a pagination kind of thing where a fixed number of comments will be displayed in one page. Then I got one resource which could helped me is the RSS feed for Disqus recent comments. Every Disqus users has a unique feed and its URL structure is like as follow.
http://funbutlearn.disqus.com/latest.rss
But still our problem was not fixed.
What was the problem and how I fixed
After getting the URL although I could see the comments but I could not fetch it to display on my page. The reason being you can not drag any data from an external RSS feed unless it comes from the same domain, every modern browsers has this same origin policy.
Ok fine, still I had one option to use JSONP which use a callback feature. I tried it once/twice…but Oops, Disqus does not support callback feature. So finally there was only option remaining, that is Yahoo Query Language.
I finally did it using Yahoo Query Language
Yahoo has a very unique SQL kind of language which you can use to fetch and handle data from various resources around the web. I personally liked this service and probably you will not find this kind of service anywhere through out the web. One day I will try to explain some more important products and services that Yahoo does provide. Now lets stick to current discussion.
I went to Yahoo console and tried following query.
select * from xml where url = “http://funbutlearn.disqus.com/latest.rss”
Finally Yahoo console gave me a query which I could use to fetch data with common HTTP GET and it also supports callback feature.
Before proceeding ahead lets have Live Demo. Please scroll down to bottom we have already implemented it in our blog.
How to integrate it with your blog
- Just copy and paste this code in notepad and save it as .html. Later you can also copy the code to your own blog.
- In the code you can find following line. Just replace funbutlearn wit your own Disqus ID.
<script src=”http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D%22http%3A%2F%2Ffunbutlearn.disqus.com%2Flatest.rss%22&format=json&diagnostics=true&callback=cbfunc”>
</script> - Don’t change any other parameter, just need to change your ID.
What are its advantages
- The template is fully customizable. You can change everything including color and layout.
- The code is fully optimized and it’s too short, so you will never face any performance issue.
- Like other plugins you can insert the code anywhere you want.
- The data is fetched from XML so you can consider it as a simple RSS Widget which is updated almost instantly (within 1 minutes).
- You will get a beautiful pagination with a flashy effect which is really attractive.
- Last but not the least, it’s a completely free widget for websites and blogs.
Yet another wonderful code, installed it and it works flawlessly!!!
Thanks, I am grateful if it serves it’s purpose for which it has been made. I have created it for you guys only. 🙂 Do visit my blog for more interesting stuffs..