Problem creating custom digg widget

[David .]

Hello, I have difficulty creating my own custom digg widget. I have
given my steps below, please help me figure out my mistake

here is the usual widget scriptcode:

<script type="text/javascript" src="http://digg.com/tools/widgetjs"></
script>
<script type="text/javascript" src="http://digg.com/tools/
services? ... BLAH BLAH...></script>

I want to alter the appearance so I have to make my own widget.js for
my server. Here is digg's widget.js:



document.write(''); document.write(''); digg_width = typeof digg_width
== 'string' ? digg_width : '300px'; digg_height = typeof digg_height
== 'string' ? digg_height : '350px'; digg_border = typeof digg_border
== 'number' ? digg_border : 1; digg_target = typeof digg_target ==
'number' ? '_blank' : ''; digg_count = typeof digg_count == 'number' ?
'no-digg-count' : ''; digg_description = typeof digg_description ==
'number' ? '' : 'no-digg-description'; digg_theme = typeof digg_theme
== 'string' ? digg_theme != 'digg-widget-unstyled' ? 'digg-widget
'+digg_theme : digg_theme : 'digg-widget digg-widget-theme1';
digg_title = typeof digg_title == 'string' ? digg_title : 'All popular
stories in All Topics'; digg_custom_header = typeof digg_custom_header
== 'string' ? 'background: '+digg_custom_header+';' : '';
digg_custom_border = typeof digg_custom_border == 'string' ? 'border-
color: '+digg_custom_border+';' : ''; digg_custom_link = typeof
digg_custom_link == 'string' ? digg_custom_link : '';
digg_custom_hoverlink = typeof digg_custom_hoverlink == 'string' ?
digg_custom_hoverlink : ''; digg_custom_footer = typeof
digg_custom_footer == 'string' ? ' style="color: '+digg_custom_footer
+'"' : ''; digg_id = typeof digg_id == 'string' ? ''+digg_id+'' :
'digg-widget-container'; document.write('
'); document.write('
Digg
What is Digg?
'); document.write('
'+digg_title+'
'); document.write('

'); document.write('
Powered by Digg\'s Users
'); document.write(''); function diggwb(obj) { if (!digg || !digg.$)
setTimeout(function() { diggwb(obj); }, 200); //hack for IE not
loading scripts that are included via document.write until it decides
too digg.$('#'+digg_id+' ul').html(''); var tpl = function() { return
[ 'li', {}, [ 'a', { 'href': this.href+'?OTC-widget', 'class': 'digg-
count' }, this.diggs+' diggs', 'h3', {}, [ 'a', { 'href': this.href+'?
OTC-widget', 'target': digg_target, 'style': 'color: '+digg_custom_link
+' ' }, this.title ], 'p', {}, this.description ] ]; }; if(!obj)
{ digg.$('#'+digg_id+' ul').html('We were unable to retrieve matching
stories from Digg. Please refresh the page to try again.'); } if(!
obj.stories || obj.stories.length == 0) { digg.$('#'+digg_id+'
ul').html('Currently, there are no recent stories of this type on
Digg.'); } if (obj.stories) { for (var i = 0 ; i <
obj.stories.length ; i++) { if(obj.stories[i].diggs > 10000)
{ obj.stories[i].diggs = Math.floor(obj.stories[i].diggs/1000)+'K+'; }
digg.$('#'+digg_id+' ul').tplAppend(obj.stories[i], tpl); } } if
(digg_custom_hoverlink != '') { digg.$('#'+digg_id+' ul a').hover
(function(){digg.$(this).css('color', digg_custom_hoverlink)}, function
() {digg.$(this).css('color', digg_custom_link)}); } }




Copy and pasted from digg...tools/widgetjs.(is copy and paste ok?). I
create a javascript file called mywidget.js and paste the above into
it. I then change the first script from

<script type="text/javascript" src="http://digg.com/tools/widgetjs"></
script>

to

<script type="text/javascript" src="http://mywebsite/mywidget.js"></
script>

(notice the .js i hope this is right)


Now when I look at my webpage no widget appears. I have followed the
digg api instructions as best as i can (I am novice). My server folder
has very little in it apart from my index.html and some images maybe I
need something else...


Please help me.

Thank you.

[Steve Williams]

At 10:40 AM 9/27/2009, David . wrote:
>I want to alter the appearance so I have to make my own widget.js ...

>Now when I look at my webpage no widget appears.

If you haven't already, take a look at:

http://apidoc.digg.com/MakingWidgets

On my personal web site, there are a few examples of custom widgets like yours:

http://www.sbw.org/diggwidget/

If you'll post the URL of your test page, I'll take a look. It's
usually something simple. (You can email it to me privately, if you
don't want to post it to the public forum.)

[Grey Hurricane]

Wow quick response. I followed your guide and realised my mistake and
now it's working like a charm. I had called the widget mywidget.js
(saved it as a javascript file) rather than mywidgetjs.html Thanks
very much!

Would you be able to help me out with another thing? I would like to
change the links that appear in the digg box so that they actually
display both the link to the digg page and also the link directly to
the article that has been dugg. Is this possible? Not a big thing just
a little tweak I was thinking about implementing besides altering the
size and shape of the box.

Thanks for your time.

[Grey Hurricane]

Ahh actually I was wrong, it's still not working. I didn't upload it
correctly before so it was still using the digg widget rather than my
custom one. I uploaded it now correctly and using my widgetjs on my
server doesn't do it.

Do I need to specify where the jquery library is?

[Grey Hurricane]

I send you an email, thanks.

On Sep 27, 6:54 pm, Steve Williams <s...@digg.com> wrote:

[Steve Williams]

At 11:24 AM 9/27/2009, Grey Hurricane wrote:
>... I would like to ... display both the link to the digg page and
>also the link directly to the article ...

Both links are in the response for each story. Note the "link" and
"href" attributes on each story element. Your Javascript code can
use those in any way you like.

[Steve Williams]

At 11:24 AM 9/27/2009, Grey Hurricane wrote:

>I had called the widget mywidget.js (saved it as a javascript file)
>rather than mywidgetjs.html

Thanks for emailing the link to your test page.

When I request your widget.js (note, NOT mywidget.js, which isn't
there), the response has your Javascript code wrapped in an HTML
document. Looks like something got corrupted there.

>Do I need to specify where the jquery library is?

Yes, of course. Your copy of widget.js emits <link> tags that try to
load JQuery and the CSS from a relative URL, and your server responds
404 to those URLs. So that won't work.

You'll probably want to create your own CSS.

As for JQuery, you can continue to load it from Digg's CDN, or copy
it to your server, or (my personal preference) load it from Google
Code, as in this example:

http://www.sbw.org/diggcustomwidget-no-dom/

If you do copy that last example, your Javascript must change more,
because it doesn't load JQuery-DOM. I think it actually makes the
Javascript a little simpler.

[Grey Hurricane]

You'll have to forgive me Steve as my knowledge is that of a novice
when it comes to javascript and I am still stuck.

On Sep 27, 10:27 pm, Steve Williams <s...@digg.com> wrote:

> When I request your widget.js (note, NOT mywidget.js, which isn't
> there), the response has your Javascript code wrapped in an HTML
> document.  Looks like something got corrupted there.

I just downloaded the widget from digg (saved file through fiefox) and
then uploaded it to my server. I have taken out the html tags and
reuploaded and it still doesn't work.

> >Do I need to specify where the jquery library is?
>
> Yes, of course.  Your copy of widget.js emits <link> tags that try to
> load JQuery and the CSS from a relative URL, and your server responds
> 404 to those URLs.  So that won't work.

I have changed my index.html document so that it loads JQuery. Still
no luck..

>
> You'll probably want to create your own CSS.
>
> As for JQuery, you can continue to load it from Digg's CDN, or copy
> it to your server, or (my personal preference) load it from Google
> Code, as in this example:
>
> http://www.sbw.org/diggcustomwidget-no-dom/
>
> If you do copy that last example, your Javascript must change more,
> because it doesn't load JQuery-DOM.  I think it actually makes the
> Javascript a little simpler.

I haven't created my own CSS, is that what is stopping it from working
as I have tried the things you have suggested so far. I'm struggling.

[Steve Williams]

At 05:48 PM 9/27/2009, Grey Hurricane wrote:
>... a novice when it comes to javascript and I am still stuck.

A good tool to help you get better with Javascript is:

http://getfirebug.com/

When I open your test page, Firebug told me right away that there's a
syntax error on line 14 of your widget.js. There's a line break in
the middle of a string literal.

Widgets based on APIs from Digg and others can be a lot of
fun! Firebug makes it much easier to debug them.

I don't know whether that's the only problem with your test page, but
it should help you to get it working.

[Grey Hurricane]

my widget.js is a downloaded copy of the digg widgetjs. I made your
suggested correction and have been looking with the firebug but still
no success. I'm sure you must be a busy person but it would help me if
you could look at my page and tell what i need to do to get it
working.

[Steve Williams]

At 10:56 AM 9/28/2009, Grey Hurricane wrote:
>my widget.js is a downloaded copy of the digg widgetjs.

Understood. But I do see a number of differences between yours and
the original. In particular, right now there's a line break in the
middle of a string literal on line 23, and a missing string delimiter
on line 31. There may be more.

Firebug showed me the first error. I spotted the second while
comparing the two files. There may be more differences.

You might copy the file again, taking care not to introduce any
changes. Firefox's "Save As" isn't a particularly good tool for
that, as it tries to interpret widgetjs as an HTML page.

If you have shell access to your server, you can use the ftp or wget
command to download widgetjs from Digg directly.

[Grey Hurricane]

Thank you Steve. I don't have shell acess to the server, so I don't
know how else to copy the file other than using Firefox's "Save As".
It would be a great help if you could post the code on here? That way
I could simply copy and paste it into my widget.js file and then the
whole thing would work, would it not?

I don't know the javascript terminology to correct those two errors
but if I had an accurate copy of the widget that wouldn't matter.

[Grey Hurricane]

Steve emailed me the digg widget javascript code and it solved the
problem.

Thanks Steve