Saturday, April 28, 2007

Testing adding Digg vote button to every post

A blog reader commented in my post Another way of adding graphic to your blog Header indicating problem with implementing adding a Digg button to every posts as described in this site: Add Digg vote button on Blogger and asking for help. So I decided to test it out in one of my blogs Generating Revenue from your Website and did it successfully. Check it out for yourself.

The way to do this easily is to sign into your Dashboard, then for the selected blog, click LAYOUT, then click the EDIT HTML sub-tab. This will open the template editor window. Check the [ ] Expand template widget. When the template have been fully expanded, click your mouse inside the template editor window, press ctrl+A to highlight the whole template, right-click and select "copy" to copy the whole template into clipboard. Open Notepad, make sure the word wrap is off (in the Menu Bar, click "Format" then make sure the Word Wrap is turned off), paste the template into the empty Notepad. You need to find the tag

<p><data:post.body/></p>

in the template
.
Again, click inside the Notepad and press ctrl+A to highlight all the codes, slide the verical scroll bar back to the top, in the Menu Bar, click EDIT then FIND and paste the above tag into the FIND field. Click FIND NEXT and that tag should then be highlighted in Notepad.

Replace the above tag with this codes (to facilitate this, you may want to intoduce some empty lines to separate the tag from the rest of the template).

<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>

Go back to the template editor (the whole template should still be highlighted if you have not done anything other than copying it into clipboard). Click the DELETE button. You should have an empty template editor window. Paste the content of the clipboard into the template editor window.

Preview, and if you see the Digg button in the Preview, save the template.

As always, before you make any changes to your template, always backup your template first.

This test is so successful, and having that Digg vote button in every posts of your blog is so useful, I will likely implement it into all my main blogs.

Update same day: The hack is so easy to implement I have impemented it for my major blogs. However, I am having second thoughts about it as anyone clicking on the Digg vote button gets taken away from the site (to Digg site). It doesn't open in a new window. I am going to experiment to see if I can get it to open in new window. Further update: 2 attempts succeed in displaying the Digg vote button, but clicking on it still lead to Digg site in the same window.

17 comments:

SoupyC said...

Hey.

I used javascript on my blog to make all external links open in a new window, including my digg link.

If you're still interested I can post it here?

Soupy

Peter Chen said...

Hi Soupy,

Posting the Javascript here will be greatly appreciated, and with your permission, I hope I can update the post and/or make a post as to how to meke all links open in new windows. I will of course acknowledge the source including a link to your site.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

SoupyC said...

Ok, here's the javascript. I placed it in the footer just by adding a new page element of type 'HTML/Javascript' It's invisible so doesn't show up on the page but the only reason I put it as a page element, and not in the template, was because the template couldn't parse the XML...or something like that, lol!

Anyway, here it is, and yes, feel free to update the post, or create a new one with this, if you want =)

**START OF SCRIPT**
[script type="text/javascript"]

for(var i = 0; i < document.links.length; i++)
{
if((document.links[i].href.indexOf(window.location.hostname) == -1)&&(document.links[i].href.indexOf("blogger.com") == -1)&&(document.links[i].href.indexOf("javascript:") == -1))
{
document.links[i].target = "_blank";
}
}
[/script]
**END OF SCRIPT**

Just change the square brackets in the opening and closing script tags to the proper pointed brackets (if that's even what they're called, lol!) < > as I couldn't use them to post this comment. Basically, the script goes through all the links in your document (webpage) and if your domain (mine is "soupyc.blogspot.com") or "blogger.com" (for comments) or "javascript:" (used in javascript links, which I had a few on my site)...then it opens that link in a new window. You can visit my blog to see it in action.

Hope it helps!

Soupy

SoupyC said...

Peter,

I have noticed, since posting, that there is a problem with the javascript and the digg code.

It doesn't work, lol!

Digg STILL opens in the same window, but I'll be looking into it over the next few days. I thought I nearly had it but the problem is that the Digg javascript creates an iFrame containing a php page from the Digg servers. Of course, I don't have authorisation to change the structure of the Digg page as it's on their servers, not mine! Unless Digg change it, or I can find a way around. We may be stuck! =(

I'll keep you posted!

Soupy

p.s. On a plus note, I managed to incorporate the javascript into the template rather than as an element on the page! Was very simple but I'll let you see the updated version if I get a solution to the Digg problem!

Pilchard said...

Has anyone found a way to do this on the new widget styled pages yet?

Pilchard said...

You said on my blog that you responded to mey comment...

Where?

Peter Chen said...

Hi Pilchard,

I have to respond to many comments and emails plus doing many other things. I can't remember all that I do. When I respond, my habit is to go to the profile, select a blog if there are multiple blogs, make a comment plus a link to the post where I have responded to the comment. I can't rememeber what I did in your case unless I take time to find the original email notification for your comment and try to trace the route. I don't have time for that. But you have asked for widgets fof Digg button. I have found another way to put links/buttons to Digg a post but have to complete some higher priority tasks first, then make a post. I will save this comment plus the URL of the post and put it in the "to do" folder (lots of files there) and hope to eventually get to it.

Peter (Blog*Star)
Generating Revenue from your Website

Chandira said...

h good, so I'm not the only person that couldn't figure this out?? I've tried to add Didd several times, and always gt the same result, the Digg button clicks right back to the first article I ever tried using it with! Very frustrating.. And Digg 'customer service' are rude.

Thanks, I'll try this.

Abhimat Gautam said...

I looked on the Digg integrate site and I found there that if you put the following code after "digg_url ... ",

digg_window = 'new';

it opens a new window.

Here's the site:
http://digg.com/tools/integrate

Peter Chen said...

Hi Akhimat,

Thanks for the new information. Tried it. I used

digg_url = new '<data:post.url/>';

but it didn't work.

Is the above what it should be or should it be another way?

Peter Blog*Star
Alternatives to Google AdSense

Abhimat Gautam said...

(I put in "" around the "<" and "/>" so the comments box would accept them. Be sure to take them out before putting into Blog's Edit HTML!)

It should be:

digg_url = '"<"data:post.url"/>"';

digg_window = 'new';

On the Digg integrate site (http://digg.com/tools/integrate) , there are other things you can add to your Digg button, like automatically suggesting a title or category for the Digg, the same way.

For example, I also have the following lines of code on my blog:

digg_title = '"<"data:post.title"/>"';
digg_topic = 'space';

It automatically suggest the title of the post and (because my blog is about astronomy and space) the topic "space".

Grumpwurst (Ray) said...

Peter,

You want to have the code like this:

[p]
[!-- DIGG --]
[div style='float:right; margin-left:10px;']
[script type='text/javascript']
digg_url = '[data:post.url/]';
digg_window = 'new'
[/script]
[script src='http://digg.com/tools/diggthis.js' type='text/javascript'/]
[/div]
[data:post.body/]
[/p]

Or course, you'll need to change the [] to <>

Peter Chen said...

Hi Ray,

The proper way to put Blogger tags in posts and comments are:

HTML tags in Blogger posts and comments

Displaying HTML tags and

How to post special characters.

However, you can only use some of the HTML tags in comments, very much more limited than in posts.

Peter Blog*Star
Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

The Mortgage & More Blog said...

Peter, when I tried this, it did not add the digg button to my post. It actually added it to the body of the templet that I am using. It also moved my sidebar to the bottom.

Any help that you can give would be appreciated. I can be reached at dthorntonham@gmail.com

Yank in Ulster said...

In case anyone is interested, I tweaked the digg code in my Blogger template, so that a compact icon appeared on its own (third) footer line for each posting; this was the most aesthetically pleasing.

(Replace parentheses with pointed brackets)

(div class='post-footer-line post-footer-line-3')(span class='post-location')
(b:if cond='data:post.url')
(script type='text/javascript')
digg_url='(data:post.url/)';
digg_bgcolor='#c3d9ff';
digg_skin='compact';
digg_window = 'new';
(/script)
(script src='http://digg.com/tools/diggthis.js' type='text/javascript'/)
(/b:if)
(b:if cond='data:top.showLocation')

Vaughn said...

I followed the instructions, but the biggest issue I keep running into is that I can't find the post.body code in the template at all! This is becoming incredibly frustrating.

Peter @ Enviroman said...

To find any selected text, type ctrl+F then type in the text you want to find.