Prac's looping Picasa simple slideshow gadget

While I was developing my looping embedded Picasa slideshow, I was also searching for alternative slideshow viewers. I don't care too much about branding that appears in many slideshow services and gadgets. Then from Google Sites forum I found (nickname) prac's RSS slideshow gadget in this thread. Tried it, and it works very well in Blogger. Thank you prac, your gadgets are great.

I use the No Border version like this:

<iframe allowtransparency="true" frameborder="0" scrolling="no" width="600" height="420" src="http://www.gmodules.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/picasa-slideshow-simple-nb.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=560&up_PHT=420&up_DTime=3000&up_TTime=400&up_CLP=Yes&up_FEED=http://picasaweb.google.com/data/feed/base/user/mspotilas.fi/albumid/5650715941079457233?alt=rss&amp;kind=photo&amp;hl=en_US"><a href="http://picasaweb.google.com/mspotilas.fi/KevatKesa?authuser=0&feat=directlink#slideshow">Gallery</a></iframe>
<!-- Gadget Google - Diaporama Picasa Albums Web - http://www.liens-du-vin.ch/picasa-gadget-script.htm -->

Red parts you want to change, they are the Picasa web album RSS feed and Picasa web album (#slideshow) url, in case iframe is not supported. You must change all & characters to &amp; in the feed url (but not in album url)! You can get the links from Picasa Web albums, from right side bar "Link to this album" (add #slideshow to it to make a slideshow link) and "RSS" (the feed). And remember to change those &:s in the RSS feed url.

Green parts you may want to change: dimensions, background colors, slide time, transition time, and link pictures to gallery or not. I use white background, 3 second slide time, 400 millisecond transition time, link pictures (up_CLP) to Picasa web album. More of the parameters here (in French).

You can see the above code embedded here in action:

Loop embedded Picasa flash slideshow

Picasa Web Albums offer code to embed slideshows to your blog and web page. Unfortunately the embedded slideshow displays the pictures only once, then stops. User can restart the show, but due to a bug in the flash, clicking the play button also opens the Picasa Web album from which the slideshow is made. This can be confusing to user.

So I wanted the flash to loop. It starts running when it is initially loaded and after showing all images, it stops. What if the flash was reloaded then? I developed a solution based on this. This works on Blogspot blogs, and should work on standalone pages, too. When user clicks the flash at any time, the looping stops (it would be stupid to reload the flash while user is pausing the slide show to look closer to some picture) and looping won't restart until page is reloaded.

To make it work in your blog or page, first you need the looping functions I made. Edit your template or page html, find </head>, and put this code before it:

Data provided by Pastebin.com - Download Raw

Modify Picasa slideshow embed code

In Picasa web albums you can get the embed code for slideshow, which is something like this:

<embed type="application/x-shockwave-flash" [..code.cut..] ></embed>

To make it loop, append <img onerror="slideRun(this,28300)" src="..." /> to it, resulting something like this:

<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="400" flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fmspotilas.fi%2Falbumid%2F5650714283562956577%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed><img onerror="slideRun(this,28300)" src="..." />

This code you can embed into your post or page, see example.

28300 is timeout values in milliseconds, after which the flash is reloaded. If you have 3 second slide time (default), then good timeout (in ms) is: (number of images) x 3000 + 1300. Or for any slide time: (number of images) x (slide time) x 1000 + 1300. For example for 5 images: 5x3000+1300 = 16300. Test your own timeouts.

Although I did not test, I think that my code should be able to restart any embedded flash(es) on html page at given interval, not just Picasa slideshow flashes.

Customize the embedded slideshow

You can change the background color and time to show one image (slide time) by modifying the <embed>...</embed> code. To change background, find code

=en_US&feat=flashalbum&RGB=0x000000&feed=

Change the RGB value 0x000000 to what ever you like. 0xFFFFFF is white.

To change slide time, find code:

flashvars="host=

Add interval=#& after ", where # is number of seconds, resulting for example:

flashvars="interval=7&host=

See sample page

Something better is coming along...

Embedded Picasa slideshow still flashes a bit (well it is flash application :) ) at startup and when flash is reloaded. I found a smoother slideshow, though harder to embed, from Google Gadgets. More about that in another post.

Backup your Blogspot blogs!

"Yes, I know, I should backup my blog more often, but..."

It is so difficult? If something goes wrong and your blog is lost, do you have anything (besides your memory, Google cache and maybe Web archive) to salvage your posts?

If your answers were "Yes" and "No", read on. I'll show you how to ease the pain of backing up Blogspot blogs.

What should you back up?

Blogger has a function for exporting and importing a blog. This export format (XML) contains all blog's posts and all comments of posts. So it is good to backup this export file. But this might not be enough.

Sometimes a single post may become corrupted. It may be overkill to restore that from an export file. Blog posts are stored in the blog feed, from which it is quite easy to pick single posts. So you may want to backup the blog feed, too.

Many bloggers have customized their blog's template and widgets. So full template html/XML should be backed up, too, and also the widget's data.

Last, but not least, your pictures and other media files. If you or some bug accidentally delete your Picasa Web Album or Google+ album for you blog pictures, they are gone from your blog. I feel a lot safer, if pictures are backed up, too.

How to do it?

When you are logged in, there are four urls you can use to backup your blog:

Export file url: http://www.blogger.com/feeds/BLOGID/archive
Blog feed url: http://YOURBLOGNAME.blogspot.com/feeds/posts/default?redirect=false&max-results=500
Template: http://www.blogger.com/html?blogID=BLOGID&action=download

You need to fix BLOGID and YOURBLOGNAME in these urls.

Backing up widgets using Blogger UI is laborious: you should click edit for each widget, copy its contents and store locally. I wanted something easier. And luckily I found a way to back up all widgets' data in one file, I think this is undocumented feature, but as long as it works, it is good for this purpose.

All widgets: http://www.blogger.com/feeds/BLOGID/widgets

Your blog posts probably have media files, images at least. I found at least two good ways to back up media from blog, both use Firefox web browser: FireUploader and DownThemAll!.

FireUploader is great for downloading your Picasa Web Albums to your local computer. If you have all your pictures in Picasa Web Albums, this might be a good choice. FireUploader logs in your Picasa account, displays albums as folders, and you can easily download singe files, single folders, multiple files and multiple folders from your Picasa Web Albums. Also upload and other services besides Picasa are supported.

DownThemAll! can be used to extract all media from RSS feeds. So, you can extract images from your Picasa Web Album, and also directly from your blog feed! Using blog feed as the source ensures, that all images in posts, also from different galleries (Picasa, Imageshack, Photobucket, etc), will be downloaded.

If you have some good solutions for Chrome, Internet Explorer and/or Opera for downloading media files, please leave a comment. :)

Update: Google Takeout is very good tool for backing up Picasa Web albums, too, see these comments.

Of course you can also install Picasa and use it to download you Picasa Web Albums.

Blog Backup Helper Gadget

If you have many blogs, then you have many sets of urls you need to download. Under linux you could script the whole thing and download xml/rss backups using wget. Although using linux, I did something different: coded a little javascript helper gadget, which can be installed in my (and your) blogs. It hides itself, when logged in user is not blog admin. When blog admin is logged in, it shows the four download links (export, feed, template, widgets). This same gadget works in different operating systems and in different browsers (tested on: Chrome, Firefox, Opera, IE).

Go to Design|Page Elements. Click Add Gadget in your side bar area. Select HTML/Javascript. Here are the contents of the gadget:

Data provided by Pastebin.com - Download Raw

I suggest you place this gadget as last gadget in your sidebar.

Blog Backup Helper, page version

Maybe you don't want to load backup gadget code on every page load into your sidebar. Then you can create a (hidden) page and put backup helper code there. Create a new page, called Backup, and paste this code in html edit:

Data provided by Pastebin.com - Download Raw

Restore strategies

Hopefully you'll/I'll never have to go here, but I outline some strategies for restoring data.

1. Restore single post HTML from blog feed backup
2. Restore single or multiple deleted posts and their comments by importing blog export file
3. Restore corruped template and/or widget using template backup and/or widgets backup
4. Restore deleted blog by restoring template, restoring widget data, importing blog export file
5. Restore deleted media files: re-upload files, fix references in your posts to new urls

Widget export file contains all widgets, with their html codes escaped. One easy way to copy widget codes from the file is to unescape the file contents, for example using un-escape tool, then copy/paste.

Blogger posts from feed in chronological order

A while ago I did my Chronological post order hack, which simply reverses the order of the posts on the screen using javascript. That can be used to read the whole blog from start to end, like this.

Adam has in his Too Clever By Half blog a different solution that uses 3rd party services to manipulate and reverse the feed to be displayed in chronological order, but there are drawbacks in using (free) third party services.

A while ago the Blogger dynamic views were announced. Dynamic views use javascript and AJAX to read from blog feed, and display the entries.

All these things made me think, if the whole reversing thing could be done in Blogger, reading the feed and manipulating it by javascript, without third party services. And it could, I yesterday figured it out, see a demo here. I'll show you how you can do it. It is actually quite easy (once the code is ready), no template editing, for example.

Create a new page

Create a new page in your blog. Name it as you like. Edit the post as HTML (important!), and paste this code into it:

Data provided by Pastebin.com - Download Raw

There are some configurable values in the script, which should be self explanatory. If you want, for small blogs you can display all entries on the same page (tested with ~200 entries). The maximum number of entries that this script can display is 500, because of limitations in Blogger feeds. The actual amount may be lower, and it depends how many entries are left in your blog's RSS feed and some Google caches (includeHistoricalEntries). You cannot know, before you try. Formatting of the posts' header and footer is very basic, you can make it better if you want, add social buttons, etc.

Save and test. You can see it in action here: Chronological post order from feed demo.

Not everything can be displayed, for example dynamic content that is generated by javascript. This is a limitation of (Blogger) feeds. That is why some code examples (pastebin.com snippets) don't show in the demo. If you need to display javascript content, too, then you'll better use the other chronological post order hack.

Reference: Google Feed API.

Update March 22th: Google loader no longer need API key. Article and code snippets simplified. Thanks to Adam who tipped me about this in comments. :)

Publishing syntax highlighted code in Blogger

This was tougher than I first thought. I thought that I'll just install SyntaxHighlighter, and that's it. But not quite.

First I installed SyntaxHighlighter 2.x, according to some instructions on the net. It had some problems, so after a few days, I switched to newest version, 3.0.83.

Publishing code between <pre> tags is a bit problematic alltogether. One must escape some characters, like > and < to &gt; and &lt;, to allow for example html to be shown. So there's always this extra step.

The most problematic thing with SyntaxHighlighter is that it changed left intendation spaces to non breaking spaces. That is mainly cosmetic, but can result in nasty looking &#160;:s in template, although harmless. As some sort of a perfectionist I could not let this be.

So my final (at least at this point in time) solution, which I came up yesterday, is to use pastebin.com to host those (longer) code snippets, that are supposed to be copied by user. Other codes may still be shown by SyntaxHighlighter. I styled SyntaxHighlighter and Pastebin codes to look similar.

Example, first pastebin:

Data provided by Pastebin.com - Download Raw

Then SyntaxHighlighter:

<script type='text/javascript'>
//<![CDATA[
// make pastebin.com raw links open in target="_blank"
  var clss = document.getElementsByClassName("embedFooter");
  for (var x=0 ; x < clss.length; x++ )
  {
    var child = clss[x].firstChild;
    while(child) {
      if(child.nodeType == 1 && child.tagName.toLowerCase() == 'a')
        child.target="_blank";
      child = child.nextSibling;
    }
  }
//]]>
</script>

Internet Explorer needed some styling for its own, that one I figured out this morning, there was for example a persistent vertical scrollbar on SyntaxHighligter code snippets. But I got those sorted out. Finally I coded the above script to make the "Download Raw" link open the code in a new window.

The best way for user to copy pastebin codes is to click the Download Raw link, and to copy SyntaxHighlighter codes is to doubleclick the code. Of course mouse selection and copy can be used, but depending on browser that might also copy the line numbers. Hopefully my blog's readers are able to figure these out.

In Blogger: Make blogs, not problems

In Blogger support forums you can daily read how someone has lost his post due to editor constantly autosaving the draft, or blog layout is broken after trying some hack. Can the post be recovered - no. Layout fixing - stressful work, your users see broken blog, etc. These problems can be avoided or diminished very easily. If you try to work on one blog only, chances of loosing data get higher. Appreciate your work and efforts and do not put all the eggs in one basket.

Blogger is a platform for making blogs. Blogspot blogs are free. So make blogs instead of problems. Don't use your "main blog" to try all the hacks out there. Make a blog for that, call it your "beta blog", for example. Tired of loosing a post text because of autosave? Make a blog for pre-publishing posts, "prepub blog". There you can publish already the very first draft version, after which the autosave is turned off while editing the post. After text is ok, copy text to your main blog and publish.

Prepub blog can also be a great place to develop ideas for blog posts. You can publish there your draft ideas without "filtering" them. Just pick the good ones for further editing and publishing in main blog. Your existing posts can be exported from main blog and imported into background blogs for test data. Your template html can be copied to background blogs, too, you don't have to make all changes from the start.

Note: if you upload images to your post in prepub blog, they will be placed in prepub blog's Picasa album, so you should not delete this album or pictures in it. Alternatively you can just work on the text in your prepub blog, and upload the photos in your main blog before publishing.

You can leave those background blocks out of Blogger's listings and keep search engines out. You can also make them completely private, if you want, you being the only one who can view (prepub could be like this).

Your blogs could be for example:

myblog.blogspot.com

myblog-beta.blogspot.com

myblog-prepub.blogspot.com

Specific addresses may not be available, but for background blogs the url is not so important anyway. And you don't have to stop there, at three blogs. Make blogs as many as you think you need. Do not compromise a single copy of information.

What do you think?

Follow post's comments by email in Blogger

"Isn't this a built-in feature?" Yes and no. You can have post comments delivered to your mail, if you have Blogger/Google account, but not if you are OpenID, non-registered or anonymous commenter. There is the Subscribe to Post Comments (Atom) -link, maybe spiced up with RSS icon, but many people don't know what to do with that feed link. So something more user friendly would be nice.

With this little hack you can offer your reader an easy way to subscribe to new comments of a post and get them delivered to reader's email. I use blogtrottr.com feed-to-email service in this hack. I wanted to place the email subscription form beneath the RSS link, which was bit tricky but succeeded. Because RSS feed url opens in new window (target="_blank"), I made the form open its results in target="_blank", too.

Installation is easy, if you know your way around. Open template html for editing. Select Expand widget templates. Search lines:

    <!-- feed links -->
    <b:include name='feedLinks'/>

After those line add:

Data provided by Pastebin.com - Download Raw

Now your readers can subscribe to those posts' comments they are interested in. It works either by user entering email address in the form (form has very basic email validation) and clicking the subscribe button, or just by clicking the button, which opens Blogtrottr page where email is asked.

You can test this and my other comments hacks at Playground for Blogger threaded comments.