Sunday, December 17, 2006

Integrating the Digg Box in your Blogger Posts

Update: 2007-02-06: I have posted another how-to to showcase the easiest way to integrate with the newly upgraded Digg tools. On the other end, the following content has also been updated with the new tools' URLs and illustrates another take on integration allowing for more flexibility for content publishers.

Update: 2006-12-19: the new Blogger is out of beta. :) The template hack below is now more valid than ever.

I've been wanting to embed the iconic Digg Story Button in my pages, but unfortunately, the API requires Javascript and tekArtist is currently (2006-12-17) running on the (update: now out of) beta of the Blogger service, which does not allow the <script> tag to be used in blog posts.

Another challenge is that the API expects you to set a variable holding the reference URL on digg.com (urlOfStory above). This means that I also somehow needed to store this URL for each of my dugg posts for the tool to work. Again, easy enough if I could use JS in my blog posts, but not so since I can't here.

In most contexts, the Digg code is fairly simple to embed:

<script>
digg_url = 'urlOfStory';
</script>
<script src="http://digg.com/tools/diggthis.js"></script>

One thing I did find was a way to add Del.icio.us and Digg hotlinks to your Blogger Beta posts by editing your template, and using widget tags for layout. Javascript is allowed at the template level in Blogger, but since you only have one such template (for the index, posts, listings, etc), flexibility is provided through their custom template markup, which will be important in this context.

I was still short of a place to store the Digg URL at the post level when I remembered that Blogger will let you activate a link field in your blog posts, for people who mainly point to other sites through their post's title (coincidentally, like Digg does too). I primarily use my blog to write original content, so I link my titles to each post's permalink, which let's me use that data field to store, say, a Digg URL. :)

The requirements are met: Javascript support, and a convenient way to store and manage the stories URL on Digg.

Now, will this hack actually work for you?

Are you using Blogger Beta? (update: now out of beta, hack more valid than ever)
If you're not using Blogger, this article will only satisfy your curiousity. If you're using Blogger and haven't converted you blog to the beta version yet, better hurry because you will have to soon.

Is your blog set to save post pages?

This is actually more of a Digg (and other social sites) requirement, since we need different URLs to submit. To verify this in the new Blogger, go to your Blogger Dashboard » Settings » Archiving » Enable Post Pages? Be sure to select yes.

Are you pointing to external URLs through your post titles?

To verify, go to your Blogger Dashboard » New Post. If you see and use a Link text field under the Title field, then this hack might not be for you, since we use the field to store the Digg data. If the feature is off, and you want to use this trick, go to your Blogger Dashboard » Settings » Formatting » Show Link Field. Be sure to select yes.

Are you comfortable editing the raw XML of your Blogger template?
Enough said. If you're still reading at this point, I'll just assume you are.

Are you willing to showcase the fact that you're not Digg-worthy?
;) If you're not into showing how some your posts aren't getting dugg enough (see above?), delete the URL from the Link field, and the box will forever disappear in the swarm's abyss. :)

And now finally, on to the code! Go to your Blogger Dashboard » Layout » Edit HTML. Be sure to check the Expand Widget Templates checkbox.

First locate the following markup:
<h3 class='post-title'>

Remove the code around it involving data:post.link:
<b:if cond='data:post.link'>
...

This ensure we do not have a conflict with the default template behaviour for the link data. Namely, to use the link, when set, instead of permalink as post titles destination (see update below for more details).

Then locate the following markup:
<p><data:post.body/></p>

And replace it with:
<p>
<b:if cond='data:post.link'>
<span style="margin: 0px 10px 0px 0px; float: left;">
<script>
digg_url = '<data:post.link/>';
</script>
<script src="http://digg.com/tools/diggthis.js"> </script>
</span>
<data:post.body/>
<b:else/>
<data:post.body/>
</b:if>
</p>

VoilĂ !

In short: if a link (Digg URL) is set for this post, set the digg_url to the latter and call the Digg API Javascript, with a left floating span so your content wraps neatly around the generated iframe. Else, just show show the post.

For extra Karma, here is also the code for the Add to bar I have at the end of each post. The Digg button will disappear if your are using the above trick, so people do not try to resubmit the post more than once (and since they can Digg it using the box).

Locate the following markup:
<p class='post-footer-line post-footer-line-3'/>

After it, add the following:
<p class='post-footer-line post-footer-addtolinks'>
Add to:
<b:if cond='data:post.link == ""'>
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Digg'><img align='absmiddle' alt='Digg. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/61822091.png' style='border:none;' vspace='0' width='16'/></a>
</b:if>
<a expr:href='" http://www.netscape.com/submit/?U=" + data:post.url + "&amp;T=" + data:post.title' target='_blank' title='Add to Netscape'><img align='absmiddle' alt='Netscape. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/subfolders/icons//99985netscape.png' style='border:none;' vspace='0' width='16'/></a>
<a expr:href='" http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Google Bookmarks'><img align='absmiddle' alt='Google Bookmarks. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/35814433.png' style='border:none;' vspace='0' width='16'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Del.icio.us'><img align='absmiddle' alt='Del.icio.us. ' border='0' height='16' hspace='0' src='http://img2.imagepile.net/images/ycc2106/65682475.png' style='border:none;' vspace='0' width='16'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Reddit'><img align='absmiddle' alt='Reddit. ' border='0' height='18' hspace='0' src='http://img2.imagepile.net/images/ycc2106/16304077.gif' style='border:none;' vspace='0' width='18'/></a>
</p>


I'll still keep an eye out for other implementations, but as of now, I'm quite satisfied with the way I found. Hoping it might help others out there.

Now if only I could write diggable content... ;p

Update: 2007-01-18:

People have been asking for more details about the <h3> manipulation for post titles. I had kept the above explanation very generic, because the code I had to change in the template I started from (Tic-Tac) might not be the same than in other templates, but I'll be more specific below.

The code I originally had to generate the post titles was:
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Which I replaced with:
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

24 comments:

maven said...

So you have to set the digg URL yourself as the post's link (via edit post in the dashboard)?

stephdau said...

Maven: yes, for now. Given the limited (but thankfully existent) server-side dynamic options we have in Blogger, I'm not done finding a solution to implement source url auto-discovery on Digg. Might be able to via javascript xmlhttprequest, but that also means slow down page rendering. Plus, this way, you also have control over if the Digg box shows up or not.

Chadwick Ferguson said...

Maybe when I get back home I'll implement this into my blogger. Ugh time restraints.

Knightn said...

I keep getting an error message:

Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "h3" must be terminated by the matching end-tag "".

it has to do with the deletion in the 1st step but i can't figure out how to correct it.

Thanks

stephdau said...

@Knightn: The error means that you have an opened <h3> without the closing </h3>. Although I'm thinking that it might also be a closing </h3> without an opening <h3>. Let me know if that's still unclear.

Steve said...

This is a really great script . . . unfortunately I can't get it to work.

When I try, it says "ERROR: Not Found" in the Span box that should contain the digg button. When I look at the template I find that the apostrophe (') in the digg_url variable has been replaced by '

Why the crap would it do this? Do you have any suggestions?

Steve said...

Sorry, it seems the comment box translated my (& # 3 9 ;) into '

Anyway, yeah, the ' in the script is replaced by Ampersand-Pound-Thirty-nine-Semicolon

Steve said...

nevermind - it has something to do with the actual digg url itself. I guess maybe it doesn't work with video diggs? I dunno.

@Knightn - I had the same problem. Turned out I had missed a /b:if tag. Delete the one just before the /h3 tag and you should be good.

Mainspring Mindshares said...

I'm having a problem with the H3 as well :(

do you mind expanding on the "code" example where you make that mod?

Its not terribly clear EXACTLY the part that is removed.. I've tried several variations and I am still getting the H3 error.

Thank you for any assistance you can offer!

Mainspring

stephdau said...

@Knightn and @Mainspring Mindshares:
See the update above for more info regarding the H# manipulation.

Leszek Pawlowicz said...

Hi,

Tried to add the code for the Add To bar several times, and every time I got the following error:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "url" must end with the ';' delimiter.

Any suggestions? Like I said, I did it several times, and don't think I added or deleted any spurious elements.

stephdau said...

@Leszek Pawlowicz:

Ah, but of course... Sorry for that.

Each ampersand entity needed to be double encoded to validate as xml. The joys of posting xml bits to be rendered in an xhtml browser, through an xml validator (Blogger Template tool). :)

The above example has been fixed.

Leszek Pawlowicz said...

That did the trick - many thanks!

stephdau said...

@Leszek Pawlowicz: Thanks for catching it and letting me know. :) Glad to help.

benex said...

1)My digg box is referring to a a "post url" starting with http%3A// instead of http:// which leads me to a white error box instead of the digg button.

2)Apostrophe is being translated into & # 3 9 ; which might be the cause for issue #1.

Aaron said...

First, thanks a ton! My next goal is to get the Digg count box in my posts.

One question though...

I am getting "The reference to entity "bkmk" must end with the ';' delimiter." I took out the add to Google bookmarks and it went through. Any thoughts for getting Google back in there. Also, how do I shift the orientation to the left side of my posts?

Thanks again!

gabo_uy said...

I'm getting the same The reference to entity "bkmk" must end with the ';' delimiter. issue. Any ideas?

thnxs

stephdau said...

@Aaron and @gabo_uy: Aaaaaaargh.... Sorry guys, looks like I had forgotten to double encode one more ampersand, the 2nd parameter for the Google add link. Turns out the regex I used to double convert the first time had only handled the first in each url, which most of the latter only have one param. Try cutting and pasting the code again. It worked for me, as is.

Burke said...

Hey,
Sorry if I'm contributing to the headache, but I'm having some issues.

First I was having the H3 problem, but i found the solution to be removing the /b:if that corresponds to the b:if cond='data:post.link' that you say to remove (i left out the < and > just in case).

After figuring that out, the template saved, but my posts were gone. I suspect that this may have something to do with "summarized posts" or "read more" script that I have added to the template. I noticed that your tutorial involves adding code to the same area as the "Read more" and am guessing that this is the issue.

The details of this "Read more" thing is explained here: http://hackosphere.blogspot.com/index.html

Please let me know if there is any help you (or anyone reading) can offer.

Thanks

stephdau said...

@burke: you should look into my new how-to for the new Digg tools. It might be easier to integrate in your custom template.

GI Group said...

Hi,

I'm a bit of a newb with this type of coding and just can't get this thing to work (or get my head around it). Can you spell it out more clearly?

So to be clear, I remove the code you've shown under "The code I originally had to generate the post titles was:" and replace it with the code you've written under, "Which I replaced with:" in the template. So what code to I actually put in the post to make the button appear? Not clear on where to insert the DIGG url either.

Many thanks.

Tanakwagu said...

not working

i got this message

* Provide the following error code and additional information.

bX-bl6ew0

n0cturnal said...

Why can't you use data:url instead of data:link? I am going to try it, and see if it works.

Branding Michelle said...

The pic links are borken in your code. The icons don't show up. Please let me know if you fix these!

Thanks.