Pages

Tuesday, November 15, 2011

0

My Google App Engine Python application evolved

Couple of weeks ago I made my first Google App Engine application, using a new language for me, Python. It is made to fetch Blogger user avatars using Blogger userID. It worked/works ok, but I did some improvements to code, some structuring and formatting, generalized tag searching from html, etc.

Yesterday, as a deviation of making the comment bubbles, I added a completely new function to that application: a tool to make gradient PNG data URIs, which can be used in CSS, for example. The avatar part of the application functions just like before. I will tell you more about the gradient PNG data URI tool later in another article, and the comment bubbles, too, but here's the revised code (in my versioning it is version number 4):

Data provided by Pastebin.com - Download Raw

Again, if you have any ideas for the code, please comment. There was a minor html bug (which did not affect functionality) in the previous version, also one "None" comparison made with "==", unnecessary parenthesis, etc, and nobody told me! :)

Updates:
2011 Dec 14th, v4.01: Load also the new default icon from "www.blogger.com"
2011 Dec 18th, v4.02: Increased timeout from 5 to 15 in loading blogger profile pages, also handle download errors.
2012 March 14th, newest version 5 here.

Tuesday, November 8, 2011

11

Welcome to YABTB

Welcome to my Blogger tips and hacks blog. This is a real sticky post, without date hassling. Learn how you can make real sticky posts in your Blogspot blog. See also these hacks and tips of interest:

50

Real Sticky posts for Blogger

Sticky post(s) can be useful in a blog, as a featured post, as a notification of an upcoming event, some general info about blog, etc. Again, Wordpress, from where I migrated to Blogger, has this feature. And Blogger does not.

There has been two "hacks" around, until now, to make kind of sticky posts in Blogger, but both have big problems. But maybe one of them suits you, so I'll tell you about these shortly.

Date hack - not good

Publish your post. Edit the post after publishing, under Post Options set post date to somewhere in the future (for example year 2020). Now this post will be the first post in your blog, until 2020 or until you edit the date.

Problem: Messes blog's RSS feed. Your sticky post will be the latest post in the feed until 2020, and so people won't see updates from your blog in services that use RSS. This is bad.
Problem: Your post shows that it is published in the future. You can make code to hide the date but it gets complicated.

Gadget hack - not good

Go to Design, Page Layout, add HTML/Javascript gadget to page, and move it to just above the posts section. Don't give the gadget a title, write your sticky "post" in HTML to look as a post. One variation of this is to edit template html and put the "post" there.

Problem: It is not a post. You cannot comment it. You cannot see it in blog archives. And it does not appear in your Blog RSS feed, either. So for example, if you announce some upcoming event this way, your feed followers won't see it, unless they open your blog page.
Problem: your gadget/template html is shown on every page in your blog, unless you add some code to show it only on the first page, and this gets complicated.

Here is my gadget sticky post hack, with the latter problem solved. It may be a good solution for some blogs, so check it out, here's a demo.

Real sticky posts - excellent!

Sticky post should be a post, with normal publishing date, appearing in Blog feed. It should be easy to make a post sticky, and make a sticky post normal. Sticky posts should have a way to look different from normal posts.

My solution fulfills these requirements. Script pulls the sticky posts from the blog feed, so blog feed must be enabled in blog's settings. And also because blog feed is needed, my sticky posts hack don't unfortunately work in private blogs. You can control posts' sticky state simply by giving post a label, default is "sticky" but you can change that if you want. You can set how many sticky posts are shown at most, and if more "sticky" labels are found than this amount, then the newest posts are shown.

Installation

Edit template html. Put this code just before </body>.

Data provided by Pastebin.com - Download Raw

Normally posts posted in same day are grouped together in Blogger layout templates, into same div element. Because of this, if you post a sticky post and a normal post with same date, also the normal post is removed from the page when sticky post is removed and placed on top of the page. To prevent this, you may want to install a simple hack to show dates on all posts, which breaks down the "daily groups". But if you never post two posts in the same day, or edit the sticky posts' dates to be different from any other post, then it is not necessary.

Configuration

You may edit the CSS styles for stickies-container and sticky-post, and configure the following javascript variables:

stickyLabel: the label which turns a post into a sticky post
maxStickies: maximum number of posts displayed as sticky, 1-20 (don't overdo it)
showDate: show date or not, you may want to hide it
showTitle: show post title or not
showFooter: you may want to hide the whole footer
showPostedBy: show Posted By text in footer
showCommentLink: show link to comments in footer
showLabels: show post labels in footer
showStickyLabel: show also the sticky label in the labels list, or hide it
showEmailPost: show Email Post button
showShareButtons: show the sharebuttons group or not
showShareEmail: show email button in sharebuttons
showShareBlog: show blog button in sharebuttons
showShareTwitter: show twitter button in sharebuttons
showShareFacebook: show facebook button in sharebuttons
showSharePlusone: show plus one button in sharebuttons
widthPlusone: you may want to limit this, small enough and text disappears
txtComment: singular form, used in sentence "1 comment", just the text, without number
txtComments: plural form, used in sentence "# comments", just the text, without number
txtPostedBy: text in Posted by, can have variables [user] and [time]
txtLabels: text preceding the labels list
txtMore: "Read more »" text for posts with a jump break.
dynamicMore: if true, jump break text (after "more link") is revealed dynamically
txtHideMore: text of the link to hide "more text", if dynamicMore is used (true)

Using a jump break in a sticky post may be a good idea, so that the sticky post don't become too tall. With variable setting dynamicMore=true the rest of the sticky post is revealed dynamically, which looks great and is faster than a full page load.

You can move the CSS style declarations to body section of the template, if you want, and add more styles to style the sticky posts (know your way around).

Thursday, November 3, 2011

18

Return of the Better Recent Comments gadget

Update Dec 29th 2011. You might be interested of the newer version: Son of the better recent comments gadget.
---
Just few days ago I made a javascript gadget for Blogger that displays recent comments similarly to the Recent Comments in Gadget directory, but better. Also has some extra functionality, and bugs fixed, of course.

I did not stop there, I now present the newest "Return of the Better Recent Comments". Who would not like to have recent comments like these two examples? (right one is in Finnish, from my MS-potilas blog)


Features

- all options and features that my previous version had
+
- displays either anonymous (mystery man) icon, site favicon or blogger profile icon
- you can customize "header" and "footer" and tooltip text
- your (blog author) comments can be displayed differently (CSS styling)
- more options to make this suit also bigger blogs
- I think I forgot something...

To get the blogger avatars, I had to make a Python app with Google App Engine (here is the newer, current version), because it is not possible to get them by only javascript. Blogger avatars can be turned off to make gadget run faster, site favicons will then still be used (for example, B icon for Bloggers).

Here is the code. You can put this in HTML/Javascript gadget.

Data provided by Pastebin.com - Download Raw

Configuration

There is some CSS at first, it can be changed to your liking. After that there comes javascript block and configurable variables. Here is a list of them and a short explanation.

numRecentComments: how many comments you want displayed
numPerPost: how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: how many chars max in excerpt of comment
maxPostTitleChars: how long post title can be, or 0 (=don't cut title)
txtWrote: header text, links to comment
txtMore: footer text, links to comment
txtToolTip: text to be shown when mouse hovers over comment
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: fetch titles from post feed; if false, titles are generated from url
trueAvatars: fetch blogger avatars from profile page, not just blogger favico
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image. A bit faster, if set.
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed

txtWrote, txtMore and txtTooltip

These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was commenting.

All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.

format in [date format]

In format some character combinations are substituted:

yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)

but format can contain also other text/characters (which are displayed as is).

"Written [date MM/dd/yyyy hh:mm]" could become "Written 11/03/2011 08:30".

Script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put the profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.

As usual, the gadget is installed on this blog.

Note: If you install this on a very high traffic blog (thousands of hits per day), I suggest you to make your own Google App Engine application to get Blogger avatars (see this article), as I'm using the free version and it might get slow on heavy load. I don't know if it will, we'll see. Or if it gets slow, just turn Blogger avatars off (trueAvatars = false), or use the newer version, which does not use the App Engine application.

Problems in Internet Explorer?

By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
(or something similar with text "EmulateIE7"), and change it to:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Update Dec 29th 2011. Newer version here: Son of the better recent comments gadget.
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 121 is modified and line 128 is new.

Wednesday, November 2, 2011

3

Google App Engine Python tool to get Blogger avatar

Blogger avatar, or Profile image, is hard or even impossible to get using javascript. In data feeds there is only profile page link, but not the image on that profile page.

To get the image, one should open the profile page, parse the html, find profile image url, and use/load it. This cannot be done in Javascript, because profile page is in different domain (blogger.com). So I did it with Google App Engine. That was quite a trip: completely new programming environment and I did not know much about Python, but I managed to get done what I wanted. Phew!

My profile page: http://www.blogger.com/profile/05137522196636058302
My avatar image: http://avafavico.appspot.com/?userid=05137522196636058302

You can try it on your user id (or any other's) in this post, if you like.
Blogger userid:  

I was going to use the avatar in javascript application as 16x16 picture, so I shrank the Profile pictures to 32x32 to minimize net traffic. Avafavico is just a name... First I thought it could also return favicons to urls that are not blogger profile, but then decided not to reinvent (http://www.google.com/s2/favicons?domain=) the wheel, after that the working name was BlogAva, but that domain was taken.

Here is my Python code. I don't write Python well, so any suggestions how to optimize or make the code better, are welcome! :) Thanks.

Data provided by Pastebin.com - Download Raw

A newer version of this Python application is here.

I've used this online application/tool in my newest recent comments gadget, which can be seen on this blog. I'll tell you another day how that is done.

Monday, October 31, 2011

12

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

12

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