Saturday, July 07, 2007

How to automatically embed DotNetKicks "kick it" links into your Blogger posts.

DotNetKicks is a social bookmarking site, kind of like Digg but targeted at .NET developers. The stories are moderated using a democratic system where articles get votes, called kicks. The more kicks you get the higher up you move in the story hierarchy. When a story is submitted it starts in a pending stories queue. If you get enough kicks your story will be moved from the pending stories queue to the front page. This might all sound like fun and games but what really perked my ears up was their integration with Google's AdSense to earn money for submitted stories. DotNetKicks will split 50% of the ad revenue for clicks through to stories you submit. Nice.

The trick is getting submitted, if your readers aren't aware of DotNetKicks they won't know to submit and/or Kick your articles. You need a way to let them know about the site, but without being crass about it. I didn't want to manually submit my post every time I blogged, so I used Blogger's template system to help do it for me.

<p><a expr:href='"http://www.dotnetkicks.com/submit/?url=" + data:post.url + "&title=" + data:post.title' expr:id='data:widget.instanceId + "_kickit"'><img alt='Submit this story to DotNetKicks' expr:src='"http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=" + data:post.url'/></a></p>

I created a tag that I inserted into my Blogger posts template that will automatically display the number of kicks the article has received so far. If you click on the link and the story hasn't already been submitted you will automatically be redirected to DotNetKicks article submission page with the link and title already filled out for you. If the story has already been submitted your vote will be added to the kicks counter.

To add the tag into your post template go to the Template tab under your Blogger accounts Customization section. Select "Edit HTML" and check the "Expand Widget Templates" check box. Scan the template until you find a line that looks something like "<p><data:post.body/></p>". That is where the Blogger templating engine inserts the body of your post. I inserted my tag to appear directly below the body of my posts but you can play around with whatever position you like by using the "Preview" button. You'll have to save the template to apply the changes when you are satisfied.

PS, I used the above steps to post this article to DotNetKicks.

Follow up: The URL changed for submitting links, the snippet in the article has been updated to output the correct link.

Submit this story to DotNetKicks

6comments:

SuperJason said...

When I did as you instructed, I received this error:

We were unable to preview your template
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 reference to entity "title" must end with the ';' delimiter.

Any thoughts?

--SuperJason (my tech blog)

frog'sbrain said...

I'll check into it. Maybe the syntax changed in the template? Does your title have spaces embedded? I think there may have been some issues with spaces or special characters in the title of the submission.

Try changing the title parameter:

<p><a expr:href='"http://www.dotnetkicks.com/submit/?url=" + data:post.url + "&title=" + data:post.title + ';' expr:id='data:widget.instanceId + "_kickit"'><img alt='Submit this story to DotNetKicks' expr:src='"http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=" + data:post.url'/></a></p>

If that works, I'll update the post. Otherwise try copying the text from the posting into Notepad to make sure that there weren't any extraneous characters from copying the HTML? Or imbalanced brackets.

SuperJason said...

I figured it out. The code in your post is being HTML decoded.

If you copy the code from your blog, it will not work. You have to replace all of the double quotes with &quot; and the ampersand with &amp;

You could fix your post by HTML encoding it and then posting it.

SuperJason said...

I posted the corrected code on my tech blog

Andrew Harry said...

Thanks for the tip, i have added it to my blogger account now.
http://hackprogrammer.blogspot.com/

Boob Job said...

Thanks for the information.

Liverpool Breast Clinic will help you to changes in Boob, Boob Job, Bigger Boobs, Plastic Surgery, Breast Surgery, Breast Enlargement, Breast augmentation, Breast Enhancement, Bigger Breasts, Breast augmentation Cost, Breast Reduction, Breast Lift, Breast Implants, Cosmetic Plastic Surgeon, Male Breast Reduction, Cosmetic Plastic Surgeon, Fat Injection Enlargement of Breasts, Lipomodelling of Breasts, Plastic Surgery Breasts, Liverpool Plastic Cosmetic Surgeon in Liverpool in UK.