Cranial Soup

Adding RSS Feeds for Labels on Blogger

2009-08-17T01:41:00.001-04:00

If you take a look at the bottom of this page, you will see that in my Labels section (I called it Categories) that each one has its own feed icon, and that it’s set up to be displayed in multiple columns.

If you would like to know how to have feed icons like mine, with or without multiple columns, I have recently written an easy to follow tutorial to explain how.

What is especially nice about having individual feeds for your labels is that it allows your readers to subscribe just to the content they are interested in most and nothing more.

It also allows each individual author of a multi-author blog to each have their own personal feed, if you tag the posts with the author’s name.

http://appsapps.info/tutorials/rss-labels.html

AJ's Cleaner FriendFeed Widescreen Theme for K-Meleon

2009-05-01T01:53:00.002-04:00

AJ Batac has created a lovely theme for the new FriendFeed, that not only makes it look good, but adds in some extra functionality, like highlighting comments made by people you follow in yellow, and your own comments in blue, and a few other nice things.

Since you can't install GreaseMonkey in K-Meleon, you'll have to apply it using the userContent.css file. Don't worry, it's pretty easy to do.

First, in K-Meleon, go to the Edit menu and under Configuration, select User-Defined Stylesheet. This will open a file named userContent.css in Notepad.
Go to this page, locate and click the button that says Show code.
Copy all of the code, except for the first line that says @namespace url(http://www.w3.org/1999/xhtml);
In the userContent.css file, go all the way to the bottom and locate the line that tells you not to edit anything below it.
Paste in the code you just copied, right above it.
Save the file.
Go here and say thank you to AJ.

Update: AJ released a new version on 5/29/2009. I corrected the link to point to the new version.

Fix: Can’t access HTML of my template after adding a frame busting script

2009-04-05T19:42:00.001-04:00

You do not want to use a frame busting script in the template of a Blogger based blog.

It will disable your ability to use the upper toolbar in the layouts mode, and you will not be able to access the HTML of your template without a bit of "URL hacking" to get to it.

If you have added it and can't access the HTML of your template, just change the layout URL, replacing the word "display" with "html".

Example:

change this: http://www.blogger.com/display?blogID=12345678
to this: http://www.blogger.com/html?blogID=12345678

Now you can find and remove the frame busting script and everything will work normal again.

Converting and Encoding a URL Containing Extended ASCII Characters (Delphi utility with source)

2009-01-27T03:57:00.001-05:00

It has come to my attention that some programming languages do not always make it very easy to convert and encode a URL.

While helping someone with bug testing and adding Last.fm support to a media player, we came across a problem with opening URL's to the correct page on last.fm's site when the title, artist or other tag info contained extended ASCII characters.

Example:

Artist: Bjørn Lynne
Title: Methydias Cloudship

This would be the correct URL on their site for this song:

http://www.last.fm/music/Bj%C3%B8rn%20Lynne/_/Methydias%20Cloudship

But in AHK, which does not support unicode, attempting to come up with the URL resulted in this incorrect one:

http://www.last.fm/music/Bj%F8rn%20Lynne/_/Methydias%20Cloudship

The problem was that you have to convert the URL from Ansi to UTF-8 before you encode it.

At first he wasn't sure if he could fix the problem, as that was what he thought he was doing in the first place.

So, while he decided to take a break from bug fixing to go play with his kids, because all coding and no play can make a coder and his family miserable, I decided to go ahead and make a little helper utility for him, just in case he couldn't resolve the issue.

Now I am not too sure on the particular details of how he fixed it, but he did and didn't need my little utility, after all.

But I am not one to let code go to waste, and my intention was to help someone resolve a problem, so I decided that this code will still do just that, one way or another. I am pretty sure that there is someone out there somewhere that could find this useful for something.

So, here it is, a small command line utility for Windows that will accept a parameter of a URL containing extended ASCII characters, convert the URL to UTF-8, then properly encode it, and finally, open that URL in the system's default browser.

I have included the Delphi source in case you may need that, too.

While testing this with various browsers, I noticed something peculiar. Certain browsers will display the URL in the addressbar differently than what the URL actually is. Although it is properly converted and encoded, the addressbar will display the original extended ASCII. I suppose this is to make it look pretty.

The following browsers exhibited this behavior:

Firefox 3
Opera 9
Chrome 1

Additionally, while both Firefox and Chrome copied the correct URL to the clipboard from the addressbar, Opera did not.

Opera copied extended ASCII, instead.

Internet Explorer did not exhibit these behaviors and displayed the actual URL used, in the addressbar.

Rest assured, this application does work properly, even if your browser isn't displaying what you think it should be showing in its addressbar.

Now I don't care if you use either the code or the compiled utility in an open source or close source project, for non-commercial or commercial purposes, and you don't have to give me any credit or compensation if you use it.

My goal was to help someone and if this can help you in some way, feel free to use it in any way you wish. I have released both the utility and the source into the public domain.

This application and its source code is dedicated to the Public Domain.

Download: Delphi encodeURL utility with source

Add a TwitThis Button to your Blogger posts

2009-01-02T15:01:00.005-05:00

Wouldn't it be great if you could add a button to every post that would make it easy for your visitors to share your posts with their followers on Twitter?

The following is instructions to do just that, for Blogger layout based blogs.

Using the information at TwitThis, I was able to tweak their bookmarklet code a bit and use the image from one of the other codes to create this one that works in Blogger.

This will require you to edit the HTML of your template. While I have tried to make this as easy as possible, those that don't feel comfortable with this, should not try it.

The button will only show on post pages and not the main page of your blog. It's not wise to do this any other way, as the URL that will be supplied on Twitter will be the URL of the page in which your button is clicked. If it is on the main page, the post may not be there when someone reads the entry on Twitter or FriendFeed, and it is likely not to win you any new loyal readers, so use this only on post pages.

I have also added some comments in the code that will make it much easier for you to add additional buttons in the future, and have them appear on all pages or just post pages.

NOTE: If you have added the Google Reader code from one of my other posts, then you just need to add only the yellow TwitThis code above or below the Google Reader one. If you have not added that one, then you need to use ALL of the code.

1. On your Blogger Dashboard, click the Layout link for the blog you want to add the button to.

2. At the top of the Layout page, click the link for Edit HTML.

3. Where it says "Backup/Restore Template", click the link that says "Download Full Template" and save the .xml file to your hard drive. This file will help you restore your template, in case anything goes wrong.

4. In the "Edit Template" section, check the box at the top right that says "Expand Widget Templates".

5. Use your browser's search function to find this line:

<div class='post-footer'>

6. Find the 2 lines in your template that look like this:

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

7. Copy and paste the following code between those 2 lines:

<div>
<p><span id='footer-buttons'>


<b:if cond='data:blog.pageType == "item"'>




<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^\s*|\s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='TwitThis' src='http://ajax.twitthis.com/chuug.twitthis.resources/twitthis_grey_72x22.gif' style='border:none;'/></a>




</b:if>
</span></p>
</div>

8. Click the button at the bottom of the page that says "Save Template".

If you get any red errors, leave a comment stating the specific error message, and I will try to help you out. If you get any errors beginning with "bX-", just try again tomorrow. Sometimes Blogger has issues with itself and waiting a bit can resolve them.

9. Look at your blog. If you have done this correctly, the button should appear on post pages only, and not the main page. Test the button by clicking it on a post and sharing one of your posts on Twitter.

10. If you would like to add other buttons to the footer of your posts, the comments in the code will help you decide where to put your button codes. One place will show on all pages, and the other will only show on post pages.

Credits: 99% of the credit for this goes to TwitThis. I just tweaked it to work on Blogger. No big deal.

EDIT 10-16-2009: Image URL was changed (Thanks Alex!)

Add a "Share This in Google Reader" Button to Your Blogger Posts

2008-10-08T11:49:00.005-04:00

Wouldn't it be great if you could add a button to every post that would make it easy for your visitors to share your posts with their friends in Google Reader, even if they don't subscribe to your feed?

The following is instructions to do just that, for Blogger layout based blogs. (Blogger Classic, Wordpress, and basic static HTML page instructions will be posted soon.)

This will require you to edit the HTML of your template. While I have tried to make this as easy as possible, those that don't feel comfortable with this, should not try it.

The button will only show on post pages and not the main page of your blog. It's not wise to do this any other way, as the URL that will be supplied in Google Reader will be the URL of the page in which your button is clicked. If it is on the main page, the post may not be there when someone reads the entry in someone's shared items, and it is likely not to win you any new loyal readers, so use this only on post pages.

I have also added some comments in the code that will make it much easier for you to add addional buttons in the future, and have them appear on all pages or just post pages.

1. On your Blogger Dashboard, click the Layout link for the blog you want to add the button to.

2. At the top of the Layout page, click the link for Edit HTML.

3. Where it says "Backup/Restore Template", click the link that says "Download Full Template" and save the .xml file to your hard drive. This file will help you restore your template, in case anything goes wrong.

4. In the "Edit Template" section, check the box at the top right that says "Expand Widget Templates".

5. Use your browser's search function to find this line:

<div class='post-footer'>

6. Find the 2 lines in your template that look like this:

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

7. Copy and paste the following code between those 2 lines:

<div>
<p><span id='footer-buttons'>


<b:if cond='data:blog.pageType == "item"'>



<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");void(b.appendChild(z));}else{}'>
<img alt='Share this in Google Reader' border='0' src='http://appsapps.info/blog/blogspot-layouts/gr-small.png'/></a>


</b:if>
</span></p>
</div>

8. Click the button at the bottom of the page that says "Save Template".

If you get any red errors, leave a comment stating the specific error message, and I will try to help you out. If you get any errors beginning with "bX-", just try again tomorrow. Sometimes Blogger has issues with itself and waiting a bit can resolve them.

9. Look at your blog. If you have done this correctly, the button should appear on post pages only, and not the main page. Test the button by clicking it on a post and sharing one of your posts in Google Reader.

10. If you would like to add other buttons to the footer of your posts, the comments in the code will help you decide where to put your button codes. One place will show on all pages, and the other will only show on post pages.

11. If you would like a larger button than the one that shows when you use this code, find the word "small" in the file name of the image URL used, and replace it with "large".