Lately I've been playing around with Yahoo! Pipes and learned some new things. I already presented the YouTube Activity Feed, which I've cleaned up a little. And I've made three more pipes.
YouTube Activity Feed
Pipe ID: 58c841d14337ba4fbf693abd9701dc49
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubeactivityfeed
Here's my previous article about this feed. YouTube API 2.0 does provide activity feeds, but you need to register an application to get developer key. My idea was to read the same info from user's channel feed page in html, parse the html and republish as a feed, and YouTube Activity Feed pipe does that.
As html parsing is quite complex task, if YouTube changes the feed page structure a lot, this pipe might break. I'll probably try to fix it if that happens.
YouTube Likes Feed
Pipe ID: a58d86555f7eb396e73d58ff50edc8f1
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubelikesfeed
Same idea as in Youtube Activity Feed, but it gets only "liked videos" from the channel feed page. It is a bit simpler to parse only the likes. Also with this pipe, if YouTube changes the feed page a lot, the pipe might break.
YouTube Uploads and Favourites
Pipe ID: 0c2ee991c8d94ed0ceb19865c252e047
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubeuploadsfavoritesfeed
YouTube has gdata feeds for user uploads and user favorites.
http://gdata.youtube.com/feeds/base/users/USERNAME/uploads?alt=rss&v=2
and
http://gdata.youtube.com/feeds/base/users/USERNAME/favorites?alt=rss&v=2
This pipe combines these two feeds, descriptions will be for example "2 days ago USERNAME favorited" or "1 hour ago USERNAME uploaded". The tricky part was to get this humanized date "2 days ago" derived from feed item's timestamp. It could not be done in Pipes only, so I extended its functionality with a web service I coded into Google AppEngine. It goes through the list, converts "y:published.utime" to humanized date like "2 days ago" and stores it in field "when" and returns the list back to pipes. Here's an article about the web service: Extending Yahoo! Pipes with Google App Engine.
This pipe should be robust, as it uses feeds as source, not page html.
YouTube Feed
Pipe ID: 73c5ee4a46e1837d908deaa60b1858d2
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubefeed
This fourth pipe simply combines Uploads and Favourites and Likes Feed. Structure is very simple. Output is something similar to YouTube Activity feed, but it does not contain comments, playlist additions nor channel subscriptions. But sometimes simpler is better.
All pipes are compatible with my gadget which works also on Opera (Yahoo! Pipes badge does not). Just change the pipe ID (_id) to use a different pipe.
Feel free to examine these pipes, you can also make clones which you can modify. Comments are welcome, too. :)
Showing posts with label youtube. Show all posts
Showing posts with label youtube. Show all posts
Thursday, May 24, 2012
Friday, May 18, 2012
4
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:
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:
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:
For example my YouTube channel's RSS feed is:
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.
Yahoo! Pipe to show YouTube activity feed in Blogger, WordPress, etc.
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:
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:
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:
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.
Sunday, March 4, 2012
30
Allow users embed YouTube videos in Blogger comments
Some time ago while googling something about video embeds I came across with oEmbed specification. This simple API allows websites to display embedded content from oEmbed providers. After some inspecting I used the oEmbed in a Python script to turn youtube links in a text into embedded videos. Worked nicely.
oEmbed returns data in JSON or XML format. That is ok with server side languages like php and Python. But for javascript this is a problem. If there is a problem, usually solution is found, and I found Embedly service, which is unfortunately not free.
With no intention to invest any money, and hands itching for another Google Appengine Python app, I saw an opportunity. To make a service that relays YouTube's oEmbed results to javascript format (JSONP). And all with memory caching etc. so it should be able to handle some traffic. After some coding it was ready and working http://oembed-js.appspot.com/?url=[youtube url to embed][&callback=foo] But now where to use it...
In Wordpress blogs, when commenting an article, user can just write/paste youtube url into the comment text, and it will be turned into a video embed. Surprise, not in Blogger. For some blogs this is a bummer. Now with my new, free, javascript/jQuery compatible GAE service oembed-js this became possible in Blogger. Of course we need to hack the blog first a bit. :)
You can decide, whether you want to turn all raw youtube links (watch and playlist links) into embeds, which is the default, or only those, that use [video=youtube_url] tag. You can also change the tag name, if you want, maybe you like youtube or embed more. If you have lazy loading installed in your blog, by default this script will use it, and pages with many videos load much faster. Installation is simple, open template html for editing, find </head> and paste this code before it:
This script does not work in dynamic views, but it works with Blogger native comments, my threaded comments, and also Blogger threaded comments. Hope you like it. I'll tell you later about the oembed‑js service API (application programming interface), so it is easier for you to develop own applications.
References:
- oEmbed specification
- YouTube API blog: oEmbed support
Update 27th March 2012: Line #74 updated, to handle better the case of only a YouTube url as comment text in new Blogger threaded comments (you do not need to update if you use videotag, or don't use Blogger threaded comments).
oEmbed returns data in JSON or XML format. That is ok with server side languages like php and Python. But for javascript this is a problem. If there is a problem, usually solution is found, and I found Embedly service, which is unfortunately not free.
With no intention to invest any money, and hands itching for another Google Appengine Python app, I saw an opportunity. To make a service that relays YouTube's oEmbed results to javascript format (JSONP). And all with memory caching etc. so it should be able to handle some traffic. After some coding it was ready and working http://oembed-js.appspot.com/?url=[youtube url to embed][&callback=foo] But now where to use it...
In Wordpress blogs, when commenting an article, user can just write/paste youtube url into the comment text, and it will be turned into a video embed. Surprise, not in Blogger. For some blogs this is a bummer. Now with my new, free, javascript/jQuery compatible GAE service oembed-js this became possible in Blogger. Of course we need to hack the blog first a bit. :)
You can decide, whether you want to turn all raw youtube links (watch and playlist links) into embeds, which is the default, or only those, that use [video=youtube_url] tag. You can also change the tag name, if you want, maybe you like youtube or embed more. If you have lazy loading installed in your blog, by default this script will use it, and pages with many videos load much faster. Installation is simple, open template html for editing, find </head> and paste this code before it:
This script does not work in dynamic views, but it works with Blogger native comments, my threaded comments, and also Blogger threaded comments. Hope you like it. I'll tell you later about the oembed‑js service API (application programming interface), so it is easier for you to develop own applications.
References:
- oEmbed specification
- YouTube API blog: oEmbed support
Update 27th March 2012: Line #74 updated, to handle better the case of only a YouTube url as comment text in new Blogger threaded comments (you do not need to update if you use videotag, or don't use Blogger threaded comments).
Sunday, February 26, 2012
31
Youtube videos lazy load, improved style
I styled my previous youtube lazy load hack a bit so that the video description text is easier to read. Before it looked like this (this is an image, so no hover effect):
HTML needed to produce this is:
Here's the code, place it before </head>. If you had previous version installed, you replace it with this code. And as always, you can edit CSS styles to your needs.
This script is installed on this blog.
HTML needed to produce this is:
<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>With the new style, it looks like this (actual embed):
Here's the code, place it before </head>. If you had previous version installed, you replace it with this code. And as always, you can edit CSS styles to your needs.
This script is installed on this blog.
Sunday, December 11, 2011
1
Lazy load YouTube videos
Update Feb 26th 2012: new version here.
YouTube videos are easy to embed, and they may enrichen your blog. You may want to give user a wide selection of videos from which to pick the interesting ones.
But the more you have videos on your page, the slower it loads. Every video is hosted in an iframe, in which a flash from youtube is loaded, and flash loads the default picture for the video. For one video, it does not take too long, but for 20... Also, this consumes browser and flash plugin memory quite a lot.
I found this article about Lazy Loading Video To Speed Up Your Web Page. Using these ideas as a start and wanting to simplify the process (taking screenshots - too laborious), I developed my own "lazy loader" for single YouTube videos, to be used in my MS-potilas-blog. And the pages load now much faster, especially the labels which contain videos. This solution is not limited to Blogspot blogs, but can be used anywhere. Here is a jsfiddle based on this code for testing.
Nowadays the new YouTube embed code looks like this:
Using lazy loading
So let's speed up our page load time. Once the lazy loading script is installed, to use lazy loading, use this kind of code for a video instead of the iframe code:
Jean Sibelius: 3rd Symphony, 1. Allegro Moderato
or if you wish other size than default 560 x 315, do like this:
If you are lazy, too, and converting a lot of old youtube iframes to lazy loading links, you can also use the "youtube embed url" directly in the href, you don't have to convert it to "youtube watch url".
Default width is 560 pixels and default height is 315 pixels. You don't have to use style parameter, if you use the default size. Width and height can be copied from the embed iframe code to style parameter.
Use a descriptive text inside the link (artist, song name plus maybe (m:ss) length of the video), whatever you like. You can use a text in your own language to describe the video. If you use line break in the link text, start consecutive lines with to get consistent indenting.
If lazy loading code does not run for some reason (javascript disabled) or there is some error (script not installed?), then links to the youtube videos are shown as a fallback. Also in dynamic views only the link is shown. When script is run, link background is set to default image of the video, and a play button div is dynamically created over the link element. Script uses two external semi-transparent images, play button and an active (hover) play button.
When user clicks the link with the video image, the link is replaced by the iframe code, flash is loaded, and then video starts to play.
Here's another demo page (besides this post) with many videos: 11. joulukuuta.
Installing the lazy loader
Edit page/template html. Check, if you have jquery loaded (try searching for "jquery"). Find </body>, and paste this code just before it (leave out line 1, if you already had jquery loaded):
Update Feb 26th 2012: new version of the script here, you should consider using it.
Embed parameters
If you want to have parameters in the embed code, just put them into href, like this:
Bach Contrapunctus I from the Art of Fugue, played by me
Bach Contrapunctus I from the Art of Fugue, played by me
If you use showinfo=0, the script hides the link text. It is still good to use the link text, in case the script does not run for some reason, and for dynamic views, maybe for feeds, too.
Reference: YouTube embedded player parameters.
Feedback?
I'm very satisfied how the script works and how it speeded up my main blog, but could it be made simpler or somehow better? If you know jQuery, CSS, DOM, and have ideas for this lazy loading script, please leave a comment. Or if you have artistic skills, the transparent play png images don't look exactly the same as in YouTube... although images I use are quite good, they have smoother edges than YouTube's, even better than in YouTube? Share your thoughts.
I tested this with Internet Explorer, Firefox, Chrome, and Opera. Should work on other jQuery compatible browsers, too. CSS parameter background-size is not supported by all browsers, but the result looks also good on those browsers that don't.
YouTube videos are easy to embed, and they may enrichen your blog. You may want to give user a wide selection of videos from which to pick the interesting ones.
But the more you have videos on your page, the slower it loads. Every video is hosted in an iframe, in which a flash from youtube is loaded, and flash loads the default picture for the video. For one video, it does not take too long, but for 20... Also, this consumes browser and flash plugin memory quite a lot.
I found this article about Lazy Loading Video To Speed Up Your Web Page. Using these ideas as a start and wanting to simplify the process (taking screenshots - too laborious), I developed my own "lazy loader" for single YouTube videos, to be used in my MS-potilas-blog. And the pages load now much faster, especially the labels which contain videos. This solution is not limited to Blogspot blogs, but can be used anywhere. Here is a jsfiddle based on this code for testing.
Nowadays the new YouTube embed code looks like this:
<iframe width="420" height="315" src="http://www.youtube.com/embed/eS67OxC_UN0?rel=0" frameborder="0" allowfullscreen></iframe>Resulting this (normal YouTube embed):
Using lazy loading
So let's speed up our page load time. Once the lazy loading script is installed, to use lazy loading, use this kind of code for a video instead of the iframe code:
<a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Jean Sibelius: 3rd Symphony, 1. Allegro Moderato</a>Result (lazy loading):
Jean Sibelius: 3rd Symphony, 1. Allegro Moderato
or if you wish other size than default 560 x 315, do like this:
<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>Resulting this (lazy loading):
If you are lazy, too, and converting a lot of old youtube iframes to lazy loading links, you can also use the "youtube embed url" directly in the href, you don't have to convert it to "youtube watch url".
Default width is 560 pixels and default height is 315 pixels. You don't have to use style parameter, if you use the default size. Width and height can be copied from the embed iframe code to style parameter.
Use a descriptive text inside the link (artist, song name plus maybe (m:ss) length of the video), whatever you like. You can use a text in your own language to describe the video. If you use line break in the link text, start consecutive lines with to get consistent indenting.
If lazy loading code does not run for some reason (javascript disabled) or there is some error (script not installed?), then links to the youtube videos are shown as a fallback. Also in dynamic views only the link is shown. When script is run, link background is set to default image of the video, and a play button div is dynamically created over the link element. Script uses two external semi-transparent images, play button and an active (hover) play button.
When user clicks the link with the video image, the link is replaced by the iframe code, flash is loaded, and then video starts to play.
Here's another demo page (besides this post) with many videos: 11. joulukuuta.
Installing the lazy loader
Edit page/template html. Check, if you have jquery loaded (try searching for "jquery"). Find </body>, and paste this code just before it (leave out line 1, if you already had jquery loaded):
Update Feb 26th 2012: new version of the script here, you should consider using it.
Embed parameters
If you want to have parameters in the embed code, just put them into href, like this:
Bach Contrapunctus I from the Art of Fugue, played by me<br /> <a class="youtube-lazy-link" style="width:560px;height:410px;" href="http://www.youtube.com/watch?v=bETMzZhunDI&rel=0&color=white&theme=light&showinfo=0">Bach Contrapunctus I from the Art of Fugue, played by me</a>Resulting (lazy loading):
Bach Contrapunctus I from the Art of Fugue, played by me
If you use showinfo=0, the script hides the link text. It is still good to use the link text, in case the script does not run for some reason, and for dynamic views, maybe for feeds, too.
Reference: YouTube embedded player parameters.
Feedback?
I'm very satisfied how the script works and how it speeded up my main blog, but could it be made simpler or somehow better? If you know jQuery, CSS, DOM, and have ideas for this lazy loading script, please leave a comment. Or if you have artistic skills, the transparent play png images don't look exactly the same as in YouTube... although images I use are quite good, they have smoother edges than YouTube's, even better than in YouTube? Share your thoughts.
I tested this with Internet Explorer, Firefox, Chrome, and Opera. Should work on other jQuery compatible browsers, too. CSS parameter background-size is not supported by all browsers, but the result looks also good on those browsers that don't.
Subscribe to:
Posts (Atom)
Posts (Atom)
