Tuesday, March 17, 2009

Reddit and Digg icons on Blogger without external scripts

It took me a while to be able to add reddit and Digg icons that didn't load external scripts - Blogger's templating language had me stumped. I used reddit's, Digg's, and Blogger's documentation, but I would never have gotten the "onclick" escaping right without this post.

<!-- reddit button -->
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url' expr:onclick='"window.location = \"http://www.reddit.com/submit?url=\" + encodeURIComponent(\"" + data:post.url + "\"); return false"'> <img src="http://www.reddit.com/static/spreddit1.gif" title="submit to reddit" alt="submit to reddit" border="0" /> </a>
<!-- digg button -->
<a expr:href='"http://digg.com/submit?url=" + data:post.url' expr:onclick='"window.location = \"http://digg.com/submit?url=\" + encodeURIComponent(\"" + data:post.url + "\"); return false"'> <img style="background:white;" width="16" height="16" alt="Submit Story to Digg" title="Submit Story to Digg" src="http://digg.com/img/digg-guy-icon.gif"/></a>

P.S. - if you can't find the "data:post.body" element to add the buttons after, like I couldn't, see if you forgot to check the "Expand Widget Templates" checkbox under "Layout -> Edit HTML".

1 comment:

  1. Hi there, my name is Bilal and I convert Wordpress templates to Blogger and also write tutorials on Blogger. I've some problem in embedding JavaScript in Blogger and I'm sure you can help me out:

    Here is the code I found in a Wordpress template where each post (on main page) is linked to
    it's URL:

    <div class="excerpt" onclick="window.location='http://themes.hellbiscuit.com/?p=34';"><p>That’s right. It’s been a long time coming, but the theme is ready and free for you all to use. Want to see it? Well, you’re looking at it! (pretty much).
    There has been some updates to the theme since it’s been initially built. Actually, MANY updates to clean it up, stream line it and actually [...]</p>

    Now. when I wanted to convert this code to Blogger, I'm getting many errors which are
    definitely related to JavaScript used here. I want to have code behave like this:

    <div class="excerpt" expr:onclick="window.location='data:post.Url';"><p><data:post.body/></p></div>

    Which simply means that in Blogger my post must link to it's own URL as it is happening
    in the original Wordpress template. I'm sure there's some kind of problem in JS part &
    I hope that fix would be very easy for you. I'll be very thankful if you can take a look
    and help me out, thanks.

    Bilal Aslam
    Blog: http://bloggerfaqs.blogspot.com/
    Email: levisinside0@gmail.com