Adding reddit links to Blogger Beta

As a gentle reminder to your readers to help popularize your blog via reddit, you can add a reddit button to each of your posts. This will give readers a one-click opportunity to boost your posts on reddit if they're already submitted, or an easy way to submit them if they aren't. (Nudge, nudge, wink, wink.)

I haven't found any literature on how this procedure works on Blogger Beta, so I had to do a bit of poking around in the less-than-spectacular Blogger Beta documentation, as well as some experimenting. It's no rocket science, but in case you were planning to do the same, and got stuck somewhere, here's how I did it.

1. Go to the buttons page on reddit, and copy the code for the button style of your choice to your clipboard. (The one this blog uses is style 1.) Paste the code snippet into some text editor.

<script>reddit_url='[URL]'</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script>

2. Log in to Blogger Beta, and navigate from your Dashboard to Template, then Edit HTML. Click the check box which says "Expand Widget Templates."

3. Now you'll need to edit your template. I recommend that you copy the entire template file and paste it into a text editor, so you'll be able to use Find/Replace and other text editing facilities. (Like, you can have the editor speak out the entire template file for you. It's great fun to listen to.) Good ol' TextEdit will do (if you're a Mac user), but make sure you work on a plain text file, not a rich text file. (You can switch between the two formats in the Format menu.)

It's also recommended that you save a backup copy before proceeding, just in case something goes wrong.

If you think you're done with your edits, copy and paste your template back into the browser's text field, and click on the Preview button to see if it looks fine. Don't click on Save unless it really all seems OK. (Don't expect to test links in Preview mode, though. They won't work. That's normal behavior.)

In case you really messed up, and want to revert to the original code, your backup copy comes in handy. Or, you can revert to Blogger's original version of the template, but then you'll lose all your previous hacks, if any.

4. OK, now you need to find the place where you need to paste the code. This is probably the trickiest part for most of us. The natural place for the button would be in the footer of a post. However, I placed the link at the end of the post body instead, for design considerations.

In any case, if you want to find the suitable location for your button, some elementary understanding of a Blogger Beta template is handy.

The template file usually starts with some lengthy CSS declarations. Then comes the part which instructs the Blogger engine how to lay out your blog.

This is an XML file which includes XHTML tags, as well as some proprietary tags that operate the Blogger engine, instructing it to display your contents. If you want to put the reddit button in the post body, you should look for a part in the file that says

<div class='post-body'>

This is where the post body begins. Depending on your template, various bits of code follow, and finally the <\div> closing tag marks the end of the body.

I placed the code I'd got from reddit right before that closing tag. If you want to put it in the footer instead, look for a suitable place between the <div class='post-footer'> and the <\div class='post-footer'> tags instead, but as I can't walk you down that path, be sure to test your code with the Preview feature before you commit to it by saving it.

I added a <br\> tag right before the reddit script just to make it look nicer. (Don't forget the "\" , as this is XHTML.)

5. Now comes the final trick: the reddit code contains a bit which needs to be rewritten. The part where it says "[URL]" is just a placeholder, you need to replace it with some Blogger code that yields an URL for each post. So after you've pasted the reddit code, change its first line from this:

<script>reddit_url='[URL]'</script>

to this:

<script>reddit_url='<data:post.url/>'</script>

This was the part which took me the longest to figure out, as the documentation was, again, a bit sketchy. But now I've found the right syntax, and it should work a charm for you too.

Oh, and finally, a less-than-gentle reminder to my dear readers: please be kind enough to give my posts some boost on reddit… Thank you.