Yahoo! Pipe to show YouTube activity feed in Blogger, WordPress, etc.

I've had this idea for some time: somehow republish YouTube channel activity feed page as an RSS feed. So you could get a view of your latest YouTube activity in your blog, for example. This week I finally implemented a version of this using Yahoo! Pipes. This is a completely new gadget for Blogger, I have not seen anything like this before. You can use the pipe gadget output on WordPress and other internet pages, too. And you can get the RSS address for the pipe to connect it with various services and/or applications.

Link to the pipe: pipes.yahoo.com/mspotilas/youtubeactivityfeed.

And here's the "badge output" of that pipe from my youtube feed page, with 5 items:

This can be put into a sidebar gadget, like I've done in YABTB demo blog. The code to put inside an HTML/Javascript gadget is simple:

Data provided by Pastebin.com - Download Raw - See Original

You may also use the "Get as a Badge" link when the pipe is run in the pipe's page, it offers an automated gadget installation into Blogger blogs, WordPress blogs and others.

Update May 21th: Because Badge output does not work with Opera browser, you might consider using instead a gadget made by me, which works with Opera.

Parameters of the pipe:

user: youtube user name,
max-results: maximum number of items returned,
allow: only accept entries that have this word in description, for example "liked" to get only likes or "uploaded" to get only uploads,
disallow: don't allow entries that have this word in description, for example "commented" to filter out commenting activity.

So at minimum you just have to change the user parameter value from "mspotilas" to any youtube user name you want (it does not have to be yours, try for example "NBC"). In my YABTB demo blog, to show what can be done with CSS styles, I also changed background colors, adjusted font sizes and margins, changed thumbnail to right side, changed thumbnail proportions (size), and hid the footer (powered by and get this), like this:

Data provided by Pastebin.com - Download Raw - See Original

There is also a YouTube RSS feed, but... YouTube gdata feed for YouTube channel includes only uploads. No likes, favourites, comments, etc. Link to YouTube user's RSS feed of uploads is:

http://gdata.youtube.com/feeds/base/users/youtubeusername/uploads?alt=rss&v=2&orderby=published

For example my YouTube channel's RSS feed is:

gdata.youtube.com/feeds/base/users/mspotilas/uploads?alt=rss&v=2&orderby=published

This is my very first Yahoo Pipe, so the implementation might be a bit clumsy. But it works, at least in my tests. :) You can clone the pipe and modify it according to your needs, or use this pipe if it suits you as is. If you like it, or find some bugs or something to improve, please tell me.

Update May 20th: I found out that Opera browser is not supported by Yahoo! Pipes. :( I think I could make a gadget for the pipe which would work in Opera, too, but I'm not sure if I will. About 3 % of my blog's viewers do use Opera.
Update May 21th: Here's the gadget I made, works with Opera, too.

Google App Engine, Python 2.7, and lxml

Google App Engine (GAE) lets you build and run applications on Google's infrastructure. I have done two applications with GAE and Python (the programming language). The previous version of my tool to get blogger avatars (avafavico) used regular expressions to parse the Blogger profile page for the profile photo, or user's first contributed blog's favico, if no profile photo is found. As you might know, using regular expressions may not be the best solution. It would be better to parse html page document object model (DOM) and get results there. That way the code is not so sensitive to possible changes in the page html code. Of course I did the regular expressions so, that they should work with different html.

Previously I used GAE Python 2.5 environment, which was the default and supported version. On February 27th Python 2.7 became fully supported. GAE with Python 2.7 contains more external libraries than version 2.5, one of those libraries being lxml.

I tried to search for different solutions and examples, but there were not many. With GAE Python 2.5, one can use BeautifulSoup, but there are some issues (problematic 3.1.0 version, uncertain development future of BS, etc.). And there is minidom, but it may not handle broken html well. Blogger profile page should not have broken html, but you never know. lxml is definitely better and faster, supports XPath, etc.

The day before yesterday I updated the GAE app to use Python 2.7 and lxml. There were none to some examples about using python27, lxml and GAE, so I'll show you here a working example. First I started modifying the file app.yaml, there I changed runtime to python27, added "threadsafe" (false), and added (latest) lxml in libraries section. Increased version number to 5. Now app.yaml looks like this:

Data provided by Pastebin.com - Download Raw - See Original

In blogava.py I added "from lxml import etree" and then used etree functions instead of regular expressions to find things in html. Here's how DOM tree is constructed, variable "result" contains page html as a string, and then XPath is applied to the tree, like this:

>>> tree = etree.HTML(result)
>>> r=tree.xpath("//img[@id='profile-photo']/@src")

Here find from the tree the first img tag, which id is set to "profile-photo", and get that tag's src attribute. In the full script, if no id='profile-photo' is not found, then try to search for the first image that has class "photo". If both fails, search for first "contributed-to" blog, and use it's favicon, if that is not found, use Blogger favicon. And here is the blogava.py source file:

Data provided by Pastebin.com - Download Raw - See Original

This new version of avafavico has been up and running for two days. I'm very pleased that I got lxml working with GAE, all in all it was quite easy. Hope this example is useful to someone. If it helped you, please leave a comment. :)

How to enable Blogger threaded commenting (on customized template)

Blogger announced threaded commenting today, as I wrote earlier. If you have customized your template, there is a chance that this threaded commenting does not work.

There is of course the possibility to reset the template, but then you loose all customizations. So here's how I could enable Blogger threaded commenting on blogs where it did not work, due to previous customizations.

First you should check, that you have embedded comment form enabled, and also full blog feeds. Without those settings the threaded commenting won't show. If they are ok, and still no threaded comments, you should edit the template.

Open template html for editing, and click "Expand Widget Templates". Find this code, it is either twice or four times in the template:

          <b:include data='post' name='comments'/>

Change every instance you find to this:

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>

Save the template and test. If the previous changes were not enough, then you should see if this block of code is found, where threading javascript is included, and insert/modify it if necessary (search for <div id='comment-holder'>):

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

How to disable Blogger's new threaded commenting

As I wrote earlier today, Blogger has now threaded commenting. There are three ways (that I know) to disable Blogger's new threaded commenting, if you don't want it:

- Don't use embedded comment form,
- Disable per-post comment feeds in your blog, or
- Edit template html.

The easiest way is to change embedded comment form to popup or full page, or disable per-post comment feeds in your blog settings. But if you want embedded comment form and post comment feeds enabled, then you need to edit template. Note: these instructions do not apply to dynamic views.

For the template editing option, this has worked for me:

Open template for editing, and click "Expand Widget Templates". Find this block of code, which is there twice (for mobile and normal viewing), you can search for <b:if cond='data:post.showThreadedComments'>:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Change both the blocks to this:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>

I.e. comment out the if-elses where "threaded_comments" are included, and include only "comments". Remember to do this twice, for both blocks of same code. To avoid extra javascript loading, search this line:

        <b:include data='post' name='threaded_comment_js'/>

and change to:

<!--    <b:include data='post' name='threaded_comment_js'/> -->

Save template. Now you should have the "good old" comments back with embedded comment form, and any modifications and hacks that were made to comments system.

Blogger has now threaded commenting

At least some sort of... Here's the announcement: Engage with your readers through threaded commenting. And this is how it looks like (in dynamic views – in non-dynamic view it is similar):


It has only two levels, and it could look a bit better, I think. But it is ok. It is activated if you have embedded comment form and full blog feeds enabled. When activated, other comment hacks, like my threaded commenting, don't work.

If you want my threaded commenting back on your blog, you can switch comment form to "full page" or "popup", instead of "embedded", in blog settings.

I will write some posts about how to enable this new feature on modded templates, how to disable it by editing the template (so you can switch back to embedded form without Blogger threading), etc. I'll get back after little more investigating. Stay tuned.

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.

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?

A post from past

Background

I started writing a blog in Finnish some time after I was diagnosed with Multiple Sclerosis. Unfortunately I had had the disease for a long time, and it was already in secondary progressive stage, when diagnosed. I had already been on sickness pension because of my condition for a couple of years. I began using medical cannabis to alleviate pain and other symptoms. And the blog was about this, multiple sclerosis and medical cannabis.

First I had my blog in a Finnish cannabis forum website, where I installed Wordpress. Before I had to stop working, I was an enterpreneur and a programmer. I very much like programming. Custom installation of Wordpress was easy to modify.

After I got an official recipe for medicinal cannabis Bedrocan, I decided to "move" out from the cannabis forum website, and created a new, more personal blog in Wordpress.com. This was in February 2011. It looked first good, customization possibilities were quite limited but you could get around. But summer 2011 they for example blocked all iHerb.com-links. I wanted to tell my readers, what products I used from there, and without the links it was not working. So, pack your bags, and move to...

Blogger

I exported all Wordpress.com posts, transformed those to Blogger import file and imported to my new blog here. Customization possibilities are good here. But some things are missing or don't work. For starters I run into:

• no smiley replacement (i.e. replace chars :) by emoticon image)
• you cannot show your posts in chronological order, which you can in wordpress[.com/.org]
• Navbar search don't find posts that over week older than blog's creation date (that's why this posts date is in past)
• even the sidebar search widget did not work for me

My first big hack was the chronological posts hack. Many people miss that feature, so I decided to blog about it in English in my new Blogger blog. But then I came up with solutions to the search problems... and who knows what in the future...

Idea

So I decided to make this new blog, in English and dedicated to all sorts of Blogger tips, so my other blog won't clutter with Blogger tips. Yes, this is Yet Another Blogger Tips Blog. YABTB.blogspot.com. I created this blog September 26th 2011. Welcome. Hope you like these tips. If you do, please share the address.

Disclaimer

I have multiple sclerosis, and even I like programming I am often fatigued and cannot spend much time at computer. So I give these tips "as is", without a promise for support, if you cannot make them work. Many of the tips I implement on this blog, and you can see them working here, and you can look the source code of the pages.

My nickname mspotilas/MS-potilas means multiple sclerosis patient in Finnish.