Javascript – How to make a button like ‘Digg it’ for the website

.netjavascriptweb-services

I've got a blogging site hosted on Windows Sever, ASP.Net 3.5, ASP.Net AJAX, SQL Server in background.

I want to give bloggers a button like 'digg-it' which they can put on their blogs for the readers to click to thumb-up the post if they like it.

I know I'll be using Javascript to do that. What can I do to: –

  1. Retrieve code from my website which will display the current count of the thumb-up.
  2. Increase the count on my website if the user thumbs up something.

Since most of these blogs are on blogger.com/wordpress.com, the plugin code will be embedded in the blog theme. I guess I will be using the URL of the blog post as the unique id. My problem is how to get my site and javascript that's on blogger.com talking.

Your help will be appreciated.

Thanks

Best Solution

You can look into using SCRIPT callbacks loading JSON data instead of using XmlHttpRequest to get around the crossdomain issues.

function dynScript(url){
    var script=document.createElement('script');
    script.src=url;
    script.type="text/javascript";
    document.getElementsByTagName('head')[0].appendChild(script);
}
function handleYourData(json) {
    // Do something with your response data if you need to, like alter
    // dom.
}
function thumbUp(postId) {
    dynScript('http://yourdomain.com/path/to/thumbHandler?callback=handleYourData&thumbs=up&postId=' + postId);
}
function thumbDown(postId) {
    dynScript('http://yourdomain.com/path/to/thumbHandler?callback=handleYourData&thumbs=down&postId=' + postId);
}

You can use it like this in your HTML.

<a onClick="thumbUp(521);">Thumb up</a> | <a onClick="thumbDown(521);">Thumb Down</a>

Your thumbHandler code would have to output JSON with handleYourData() wrapped around it so that your callback will be called with the JSON data as the argument.