如何为我的网站创建一个类似“ Digg it”的按钮？

Question

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

Answer 1

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.

Answer 2

Okay, I got one answer and while I was trying that method I found something easier.

What I am going to use is an iframe. An iframe is like a browser window within the browser. The code I render in the iframe will internally access my website as if it's a regular webpage request. So I can use my web services, my background ASP.Net code, and generally everything I want without worrying about messing up the host website.

When I am done developing, I'll post some code here. Meanwhile if you guys know of any pitfall in this approach please tell me.

Here's some sample iframe code that I wrote

<script type="text/javascript">
    window.onload = function() {
        alert("http://mysite.com?url=" + window.location.href);
        document.all.blogvaniframe.src = "http://blogvani.com";
    }
</script>
<iframe id="blogvaniframe" height="100" width="100" scrolling="no" frameborder="0">

</iframe>

I am using javascript to load the content in the iframe because I want to pass an argument to the url's querystring (haven't tested this yet though.

Thanks

Answer 3

Try this one. I found it on Yahoo! Search because I knew, there was a German version of this script:

English version: http://www.socialbookmarkscript.com/

German script: http://www.social-bookmark-script.de/

Good luck!