50 Years in the Dry: Adding the talkr link to a blogger template

Talkr is a cool service that automates the podcasting of your blog. There are a few alternatives (scroll down the page if you follow the link) you might want to check out, as most of the talkr stuff seems to be more than a year old. I don't know if this indicates anything about their general health ... ~~Two~~ Three more things that raises my suspicion are:

Their web site has the code for linking into the old blogger, but the code for adding their code into the new blogger templates doesn't work. It looks like a lot of people are asking about it, but no one has published an answer (until now ... look at my solution)

Their example code has a link to an image that is no longer available. I fixed this by making my own copy, you can grab one if you want.

And ... the owner put talkr up for sale last year. So it looks like it may be on it's way out.

Hopefully talkr is healthy and will stay around, because it took me a couple of hours to figure out how to add a link to my template.

So here's what I'm sure you really want to see, the way to add talkr to your blogger (blogspot) template. This is the code that I have working on this blog and the steps for adding it. (Disclaimer - The process is straightforward if you understand XHTML, CSS and XML; but probably total mumbo jumbo if you don't. If you don't understand it then you probably don't want to attempt it. Please don't post any comments asking for help or asking me to debug your template. Sorry, but I won't be around to respond. You'll either get it or you won't. If you don't then my suggestion would be to invest some time and learn XHTML, CSS and XML. )

If necessary log into your blogger account, go to the dashboard, and then go to the Manage: Layout page.

Click the Edit HTML tab link to open your template in the HTML editor.

Check the Expand Widget Templates box to expand the widget code.

Before you make any changes I suggest you save a backup copy of your template by clicking the Download Full Template link.

In the editing window, scroll way down past all of the CSS stuff. You're looking for a place to put the talkr link in the template. I put mine just after the header line for each post. My template already had a div for this with the class of post-header-line-1. It didn't have an id, just the class. It was just before the div that holds the post content, which has the class "post-body entry-content". (Hopefully that makes sense, because if it doesn't then I'm assuming that you don't know much about HTML/XHTML/CSS/XML and the code looks like a jungle of garbage to you.) You can look for this code, but again your template might be different than mine.
```
  <div class='post-header-line-1' />
  <div class='post-body'>
      <data:post.body/>
```

Change the first div <div class='post-header-line-1' />
so that it can hold some content. Change the end /> to just >,
then add a < /div>You should now have
```
  <div class='post-header-line-1' >
  </div>

  <div class='post-body'>
      <data:post.body/>
```

Copy and paste the following code into the div, between the div start and close tags. (Note that the entire href should be a single line, it looks like multiple lines here because the window is narrow.)


<a expr:href='&quot;http://www.talkr.com/app/fetch.app?feed_id=48184&amp;perma_link=&quot; + data:post.url '>
    Listen to this article
</a>

you should end up with the following:


  <div class='post-header-line-1' >
    <a expr:href='&quot;http://www.talkr.com/app/fetch.app?feed_id=48184&amp;perma_link=&quot; + data:post.url '>
    Listen to this article
    </a>

  </div>

  <div class='post-body'>
      <data:post.body/>

That's it. Save the template and test it out. But make sure you save it and test it, don't test it in a preview window as the link won't work. If it doesn't work, reload the template code you saved above. (You did save a copy, didn't you?!?).

Here's a brief explanation of what this code does. Hopefully you know that the
<a href='URL' > is used to add a link. The tricky part here is to build a URL from 2 pieces. The first piece is the link to talkr. They give you this for blogger, it's the

http://www.talkr.com/app/fetch.app?feed_id=48184&perma_link=
section of the href.

You need to add the URL to each post, but since each post has a different URL you have to find the variable that blogger uses to hold the URL for each specific post. In the old blogger code the variable was <$BlogItemPermalinkURL$> But this doesn't work in the new blogger templates. And again, this is what worries me a little about talkr since they still have this on their web site.

In the new blogger templates, you use data:post.url Blogger kind of tells you this in some of their documentation, but they get it wrong too, as they use posts instead of post.

The last step is to get the two pieces together, the fixed string piece and the variable. This took me awhile to figure out as I couldn't find anything but basic documentation on the elements in the new blogger schemas. But I snooped around the blogger template code and finally got it. In the blogger templates, and in the case of an href, you use expr:href=' "string1" + "string2" ' to combine two strings and have them end up in the href attribute. Note the alternating quotes. Since we're combining 1 string with a variable, we use expr:href=' "string1" + var '

Somewhere in all of the processing, the inner double quotes get messed up unless you use the XML symbol for them, which is " So the expression becomes expr:href=' " string1 " + var '

Now, it almost works if you substitute the talkr URL
http://www.talkr.com/app/fetch.app?feed_id=48184&perma_link=
for string1 and

data:post.url
for var The last thing to fix is the & in the URL. It gets messed up somewhere in the processing too, so you need to substitute the XML symbol &

Technically speaking my explanation isn't exactly complete but I'm trying to keep it brief, so please don't nitpick me to death. Just go have fun with your templates and blogs.