Pages

Monday, October 31, 2011

23

How to autopost to Blogpost from RSS

Autoposting from RSS feed(s) is a much asked feature in Blogger. I will tell you here one way to accomplish this without third party services. You'll need some computing skills, I won't explain everything in detail, details can be found in other documentation.

First of all, you need the RSS feed or feeds, where the articles appear that you want to republish. You can combine multiple feeds into one using Google Reader, if you wish: group feeds together in a folder and make folder feed public and shared. But you don't have to combine feeds, multiple feeds are ok as is.

Don't steal other people's work. Before publishing content written by other's, you should ask permission for it, otherwise your blog may be reported and terminated. But maybe you want to aggregate your own posts from many blogs to one blog. And this can be done from other/mixed environments, like Wordpress.com, too, and to a hidden blog (visible only to you). Not from hidden blogs, though, because you need the feed. If you republish your own material, that is ok of course.

Blog settings and setting up rss2email

In the blog you want to publish, go to Settings | Email & Mobile. Set your secret email posting address by providing a secret word. Choose "Save emails as draft posts". You can change that to "Publish emails immediately" after you have directed feed(s) to blog and have everything working.

Rss2email is a free tool for delivering news from RSS feeds to email. Python is needed to run rss2email. Rss2email can be run in Windows and different UNIX systems.

Download, install and configure rss2email. I had to change the outgoing mail server settings and the email address of sender (DEFAULT_FROM) in config.py. I also configured rss2email to use html (HTML_MAIL = 1) and not to use stylesheet (USE_CSS_STYLING = 0).

In unix console, change to rss2email's directory, and execute commands:

./r2e new YOURNAME.YOURSECRETWORDS@blogger.com
./r2e add http://yourfeedurl.com
./r2e add http://yoursecondfeedurl.com
./r2e add http://yourthirdfeedurl.com

In Windows you would run r2e.bat instead of ./r2e. You need at least one feed url. Now you have your feed(s) ready for sending to blog.

Sending old (current) entries or not?

If you want to start feeding your blog with only new entries in the feed(s), run first:

./r2e run --no-send

That marks all current feed entries read. Afterwards run ./r2e in regular basis, for example from crontab.

If you want to send all entries, run "r2e run" already at the first time. But beware, there is a limit of about 30-50 posts you can send to Blogger in one day. One way to limit the posts is to add one new feed per day for the publishing email.

You can also publish single posts from a feed using Google Reader. View a post from the feed, select Send To, Blogger.

Double titles hacked away

To prevent "double titles" (first article title, then title with a link to the source) in the receiving blog, I did the following changes to rss2email.py (version 2.71), first around line 717, search for:
      content += '<h1'
      content += ' class="header"'
      content += '><a href="'+link+'">'+subjecthdr+'</a></h1>\n'
Add # in front of all 3 lines:
#      content += '<h1'
#      content += ' class="header"'
#      content += '><a href="'+link+'">'+subjecthdr+'</a></h1>\n'
and around line 748, search lines:
        content = ("<html><body>\n\n" + 
                  '<h1><a href="'+link+'">'+subjecthdr+'</a></h1>\n\n' +
                  entrycontent[1].strip() + # drop type tag (HACK: bad abstraction)
                  '<p>URL: <a href="'+link+'">'+link+'</a>' )
Add # in front of one line, like this:
       content = ("<html><body>\n\n" + 
#                  '<h1><a href="'+link+'">'+subjecthdr+'</a></h1>\n\n' +
                  entrycontent[1].strip() + # drop type tag (HACK: bad abstraction)
                  '<p>URL: <a href="'+link+'">'+link+'</a></p>' )

If you have different version, then you might have to change something else. The purpose of the changes is to remove <h1> title+link from the beginning of the email body.

Run rss2email automatically

And finally I added a crontab entry (crontab -e) to run the script once an hour (33 minutes past full hour), like this:

33 * * * * cd ~/rss2email-2.71/ && ./r2e run

In Windows you would use the Windows task scheduler and run r2e.bat. See more instructions in rss2email/getting-started-with-rss2email.

I have also subscribed the feeds to my Google Reader, so I decided not to publish the emailed articles immediately, but as a draft. This way I can also do some minor adjustments to the article before publishing, or choose not to publish the article at all.

Sunday, October 30, 2011

13

Better Recent comments gadget for Blogger

Update 12/29/11: A new recent comments gadget with avatars is installed on the blog, you might consider using it instead of this gadget.


Blogger Gadget directory has two recent comments gadgets, Top Comments by Ziyush and Recent Comments by Blogger Buster, but both suffer from same problems.

Bug: the anchor of the link to the comment is broken. It should be ...showComment=COMMENTID#COMMENTANCHOR but it is ...showComment=COMMENTID#comment-COMMENTANCHOR. When you have many comments, it would be really nice if the link took you to the right comment, not to the top of the page.

Bug: sometimes gadget does not show anything, sometimes load times are long. Annoying.

Bug/feature: Strings cannot be translated. I don't want in my Finnish blog to have texts "wrote..." and "Continue >>", but "kirjoitti:" and "Lue lisää >>" instead.

Bug/cosmetic: styles don't look good, not the same as in blog (for example all links are underlined).

Missing features: CSS cannot be modified. Post titles cannot be used. Customization very limited.

Missing feature: Always gets x number of chronologically latest comments, but what if you wanted the latest comments all from different posts, or if you wanted maximum of 2, or 3, comments per same post, to prevent one topic from "flooding" the recent comments?

Own gadget to the resque

Because of all this, I first used RSS feed gadget for displaying recent comments, until yesterday, when I started developing something better. My goal was to make a gadget, which has working link anchors, customizable CSS styles and allow translating the strings and allow other modifications, too.

Along the way I added the possibility to limit comments count per post to 1...[number of recent comments shown], and that is actually really great. You can also choose not to limit, when the 5 recent comments are fetched regardless of their posts. And, because I think no one had done it before in a javascript gadget, I also fetched the post titles for the comments :) Although I only use those in link titles (shown when user hovers over the link), but you can edit the code and show it in the link, for example, like "Gary commented on We're back in business!...".

Load times are way better and no "blank recent comments" have been detected with my gadged.

To use it, add HTML/Javascript gadget to your blog, and paste following code into it:

Data provided by Pastebin.com - Download Raw

This gadget is installed in this blog, too. In the gadget there are some easily configurable things, and of course you can change anything in the code, if you can...

You can configure CSS styles, number of recent comments (numRecentComments), length of comment excerpt (numCommentChars), maximum comments per post (numPerPost), texts (txtWrote and txtMore), and whether to load titles or not (getTitles; not loading them makes the gadget run yet a tiny bit faster).

If you want to customize the code, you can, but I hope you know your way around and can do it on your own.

Hope you like it! I do, but now I just cannot make up my mind, whether to set numPerPost to 1 or 2, with 5 recent comments... both good choices... Which would you use?
Update 11/02/11: This hack is no longer installed in this blog. I developed it further. I will post the new Recent comments in a while, stay tuned.
Update 11/03/11: A new gadget with avatars is installed on the blog.
Update 12/29/11: A new gadget with avatars (fetched differently) is installed on the blog.
Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 69 is modified and line 76 is new.

Saturday, October 29, 2011

52

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:

Friday, October 28, 2011

10

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=


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.

Monday, October 24, 2011

19

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.

Sunday, October 16, 2011

40

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. :)

Friday, October 14, 2011

1

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.
See the hack
for this dynamic
views icon: