Oct 25, 2010

How to Add Digg Search Box Widget in your Website/Blog

I saw there are different widgets available for Digg, but No-one has search box in the widget. I decided to add search box in the widget so that anyone could search without going Digg website. See following steps to add Digg search box widget in your site.

1. Add following to create textbox and button for searching


<input type="text" id="txt"/>
<input type="button" id="btn" onclick="Search()" value="OK"/>

2. Add following where you have to show search result


<div id="digg">
</div>

3. Add following script before </body> tag


<script type="text/javascript" src="http://widgets.digg.com/widgets.js"></script>
<script type="text/javascript">
function Search() {
var rnd='digg-widget-'+Math.floor(Math.random()*10000).toString();
var ctrl = document.getElementById('digg');
ctrl.innerHTML ='<div id="'+rnd.toString() + '"></div>';
var q = document.getElementById('txt').value.toString();
    var diggWidget = {
        id: rnd.toString(),
        layout: 1,
        colors: {
            hdrBg: "#1b5790",
            hdrTxt: "#b3daff",
            tabBg: "#4684be",
            tabTxt: "#b3daff",
            tabOnTxt: "#d41717",
            bdyBg: "#fff",
            stryBrdr: "#ddd",
            lnk: "#105cb6",
            descTxt: "#999999",
            subHd: "#999999"
        },
        title: q,
        width: 300,
        requests: [],
        hide: {}
    };	
	diggWidget.requests.push({
            t: q,
            p: {
                count: "10",
                method: "search.stories",
                query: q,
                sort: "promote_date-desc",
                container: ""
            }
        });	
    if (window.DiggWidget) {
        if (typeof DiggWidget == 'function') {
            new DiggWidget(diggWidget);
        } else {
            DiggWidget.push(diggWidget);
        }
    } else {
        DiggWidget = [diggWidget];       
    }
}
</script>

4. Open your site, Enter keyword in search box, click button and enjoy it.

You can customize widget by defining different colors, number of posts, sort criteria ...etc in above script.

See live demo in Result tab of following fiddle:

Enjoy It.