Wednesday, June 06, 2007

Blogger Linking Widgets

I spent a few hours today figuring out how to add a few linking widgets to my posts. At first I thought I'd have to do it manually, but the 'new' widget architecture for Blogger is pretty cool and easy to use!

I wanted to create links to Digg, del.icio.us, and Technorati on each of my posts and have the links be generated automatically for me. It seemed like a straightforward thing to do, but as usual, syntax issues caused me to take a bit more time than I planned.

So, rather than have someone go through the crap I went through getting this little bit of code right, I'll post it for you here:


<!-- digg post link -->
<span class='item-action'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' title='Digg This!'>
<img alt='Digg!' height='16' src='http://digg.com/img/badges/16x16-digg-guy.png' width='16'/>
</a>
</span>

<!-- del.icio.us link -->
<span class='item-action'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Bookmark This to del.icio.us'><img src='http://images.del.icio.us/static/img/delicious.med.gif'/>
</a>
</span>

<!-- technorati favs -->
<span class='item-action'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' title='Add to Technorati Favorites'><img alt='Technorati' height='16' src='[ PUT THE SOURCE TO A TECHNORATI LOGO IN HERE ]' width='16'/>
</a>
</span>


You can place this bit of code in your template in Blogger wherever you feel it suits you. Please note that you'll need to find a Technorati logo and point to it. Be sure to check the "expand widget templates" checkbox in the template > edit html tab. This will give you more visibility to where you can place this code. I placed it immediately after the <div class='post-footer'> tag - about half way down the page. You can see that placing it there will cause the link buttons to show up at the 'top' of my footers for each post. Enjoy!

13 comments:

nerdluck said...

cool tuts... but i keep getting this error when i tried doing your method...

XML error message: The reference to entity "url" must end with the ';' delimiter.

what could i be doing wrong. could you please guide me as to what I am supposed to do.. thanks

Erik Loehfelm said...

Hey nerdluck. Thanks for the note.

Are you using the 'new' blogger or the old blogger? I think this code will only work on the 'new' blogger framework.

Let me know and I'll keep digging for you.

- Erik

nerdluck said...

Sorry it took awhile for me to check back.. I am using new blogger.. I still get the same error about that "; delimiter" thing... i could send you a copy of my template if it would help you debug it. Thanks for putting these info up. We, of the simpler minds really appreciate it.

-nerdluck

Erik Loehfelm said...

I'd be happy to look at it for you. Send a copy to eloehfelm[at]earthlink.net and I'll see what I can do.

- Erik

natedogg said...

I'd be interested as well! Just now trying to do that and realized I'm using the "new" blogger. Appreciate the work on this!

Mods.sub.cc said...

On Blogger 2 (new Blogger) I come up to here:
try:

expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title'

The errors "XML error message: The reference to entity "url" must end with the ';' delimiter." are out!!!
Seems it was wrong formated & (sign) must be & in xml

Mods.sub.cc said...

any how i cant type it in blogger comment i try to do spaces between all letters you must do it without space between the letters!
XML error message: The reference to entity "url" must end with the ';' delimiter.

Fix:
e x p r : h r e f = ' " h t t p : / / d i g g . c o m / s u b m i t ? p h a s e = 2 & a m p ; u r l = " + d a t a : p o s t . u r l + " & a m p ; t i t l e = " + d a t a : p o s t . t i t l e '

& sign replace with & a m p ;

(no space between the letters)

JL said...

Thanks for this post! I just started blogging, so this is very helpful. btw, do you know how to create a similar button for stumbleupon?

post dugged

Al said...

Awesome!
I was banging my head against that one for quite a while!!!
I had a way to add the links and was using the data properties correctly but kept getting the same XML error.
I should've realised that the & had to be delimited as & amp ;
I feel so silly now but thanks to your site and the useful comments I got there in the end. Thanks muchly!

dawcee said...

I tried this and it ended up breaking my blog. I would get a blogger error message and then lines and lines of error messages. I think the problem may have been that I had I had your code nested inside a blogger conditional statement, do you think that would cause the error?

-dawcee

Erik Loehfelm said...

Hi Dawcee. I would try leaving that out of any conditional statement and posting. See if the error continues. If so, there's something else going on there.

In the conditional statement, are you sure you are closing and opening surrounding element tags properly? Could be a broken tag in there that's blowing up on you.

- Erik

nerdluck said...

Hey... I changed template and tried it again.. IT WORKS!!!

Scott Cave said...

Thank you thank you thank you!

I no longer want to stab myself in the face with frustration. Stupid amp;.