tag:blogger.com,1999:blog-67295412156521499672024-03-18T11:47:04.259+02:00Yet Another Blogger Tips BlogJust another blog with Blogspot hacks and tips, made/customized by me.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.comBlogger102125tag:blogger.com,1999:blog-6729541215652149967.post-80613250824805405082013-11-27T15:39:00.000+02:002013-11-27T22:03:00.897+02:00Add post titles, thumbnails, and summaries to Older and Newer Post linksBy default Blogger shows links to Newer Post, Home, and Older Post at the bottom of a post. There are hacks that add post titles to those links, couple by me, too, here's the latest: <a href="http://yabtb.blogspot.com/2012/06/titles-to-older-newer-links-reloaded.html">Add Post titles to Older and Newer Post links – reloaded</a>. In <a href="http://yabtb.blogspot.com/2012/06/titles-to-older-newer-links-reloaded.html?showComment=1384793329111#c8690948579368176215">one comment</a> I was asked if it would be possible to display also thumbnail and post summary. It is.<br />
<br />
I have installed this hack in my MS-potilas blog, which is in Finnish (you'll see the idea without understanding the language):<br />
<br />
<div style="text-align: center;font-size:150%;font-weight:bold;"><a href="http://mspotilas.blogspot.fi/2012/05/postikortti-kesan-kynnyksella.html#blog-pager">Demo</a></div><br />
<b>Installing the hack</b><br />
<br />
You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. If you already have it loaded, you can leave the first line out of the hack.<br />
<br />
Open blog's template, and put this code before </head>:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=9hRKPRt1" target="_blank">Download Raw</a> - <a href="http://pastebin.com/9hRKPRt1" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=9hRKPRt1"></script><br />
<br />
If you have any previous hack for Newer/Older post links, remove it. Save the template and test.<br />
<br />
<b>Configuration</b><br />
<br />
You can configure the following javascript variables:<br />
<br />
maxSummaryLength - how many characters can summary text be<br />
olderLink - contains the template for older link<br />
newerLink - template for newer link<br />
defaultOlderImage - if older post has no thumbnail, use this image instead<br />
defaultNewerImage - if newer post has no thumbnail, use this image instead<br />
<br />
In olderLink and newerLink templates you can use html and fields [title], [date], [datetime], [img], [thumburl], and [summary]. You can also edit the CSS to make everything look different. Hope you like this hack!<br />
MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com31tag:blogger.com,1999:blog-6729541215652149967.post-10877919282176917342013-09-09T16:42:00.000+03:002013-09-09T16:47:41.943+03:00Hiding posts from Blogpost home pageI started doing this hack after I got a question if it is possible to hide blog posts from home page or not. And it is, with quite easy template modifications.<br />
<br />
You must have a list of urls to the articles you want to hide from home page. Use the "blogspot.com" domain in the urls, not the local ones (like "blogspot.fi" in Finland).<br />
<br />
I will hide one post, url is <a href="http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html">http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html</a><br />
<br />
Go to design, Template, Edit HTML. Select Jump to widget, "Blog1". Search for line:<br />
<br />
<pre class="brush:html">&lt;div class=&quot;date-outer&quot;&gt;</pre><br />
Replace that line with either this code:<br />
<br />
<pre class="brush:html">&lt;div class=&quot;date-outer&quot;
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.searchQuery == &quot;&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:post.url == &quot;http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html&quot;'> style=&#39;display:none;&#39;</b:if>
<b:if cond='data:post.url == &quot;ANOTHER ARTICLE URL&quot;'> style=&#39;display:none;&#39;</b:if>
</b:if>
</b:if>
</b:if>
&gt;
</pre><br />
or this code:<br />
<br />
<pre class="brush:html; first-line:3">&lt;div class=&quot;date-outer&quot;
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.url == &quot;http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html&quot;'> style=&#39;display:none;&#39;</b:if>
<b:if cond='data:post.url == &quot;ANOTHER ARTICLE URL&quot;'> style=&#39;display:none;&#39;</b:if>
</b:if>
&gt;
</pre><br />
First code hides articles from the home page (yourblog.blogspot.com) and the older posts' pages, when you click "Older posts" on the home page. This is probably the option you want.<br />
<br />
Second code hides articles just from the home page (yourblog.blogspot.com).<br />
<br />
If you have three articles you want to hide, make three lines starting with <b:if cond='data:post.url == &quot; (lines 5-6 in the code snippets). Edit your urls carefully to the lines.<br />
<br />
Save template. Test.<br />
<br />
Hack is installed on this blog, and it is hiding this post <a href="http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html">http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html</a> from the home page of this blog.<br />
<br />
If you have articles published on same date and you wish to hide one of them, you should install my <a href="http://yabtb.blogspot.com/2011/09/show-date-on-all-blogger-posts-within.html">Show date on all Blogger posts within same date</a>, or edit the date of the article to be hidden.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com42tag:blogger.com,1999:blog-6729541215652149967.post-79750930824761935872013-09-09T15:59:00.002+03:002013-09-09T15:59:22.516+03:00Test post hidden from home pageThis is just a test.
MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com2tag:blogger.com,1999:blog-6729541215652149967.post-55327806153134525562013-05-06T15:25:00.001+03:002013-05-06T15:25:06.146+03:00Small update (visual improvement) for my tabbed gadgetsI made my <a href="http://yabtb.blogspot.com/2011/12/gadget-tabifying-widget-for-blogger.html">gadget tabifying widget</a> back in 2011. Today I saw another implementation, and it had nice fade in effect. I remembered that I had used also jQuery in the tabifying widget, and that jQuery has nice functions for fading. So I decided to try and tweak it a little. The result can be seen on this blog: click on the tabs on right sidebar (for example, About me, Followers, Subscribe to) and notice the smooth transition. :)<br>
<br>
<i>(This won't work with nested tabs, but I don't recommend using them in the first place, because nested tabs can be confusing to user.)</i><br>
<br>
If you have my tabbed gadgets hack installed, you can make the same changes. It is quite easy:<br>
<br>
<b>1.</b> Open the tabifying gadget for editing. Make a backup of the working script before making changes.<br>
<br>
<b>2.</b> Find line (near line 105):
<pre> for(var i = 0; i<tabnav<b>0</b>_tabids.length; i++) {</pre>
<b>3.</b> after that add this line:
<pre> if(tabnav<b>0</b>_tabids[i] == nimi) continue;</pre>
If you have multiple tab sets, and you have tabnav<b>1</b>_tabids instead of tabnav0_tabids, use tabnav<b>1</b>_tabids in the added line, etc.<br>
<br>
<b>4.</b> Then find this block of code (near line 111):
<pre> toshow = document.getElementById(tabnav3_id).style.display;
document.getElementById(nimi).style.display=toshow;
if(tabsIDs[nimi])
document.getElementById(tabsIDs[nimi]).style.display = toshow;</pre>
<b>5.</b> Replace that block of code with this:
<pre> $("#"+nimi).fadeIn(300);
if(tabsIDs[nimi])
$("#"+tabsIDs[nimi]).fadeIn(300);</pre>
<b>6.</b> Save the gadget.<br>
<br>
If you want, you can adjust the fade in time, now 300 (milliseconds), I think 200 to 600 milliseconds is good range. Hope you like it! :)MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com6tag:blogger.com,1999:blog-6729541215652149967.post-72426636647064932582013-01-21T11:05:00.000+02:002016-08-22T10:03:21.268+03:00How to easily host web content on Google DriveThis article is deprecated, here's a message from Google:<br />
<hr><blockquote><p>Hello from Google,</p><p>We <a href="http://googleappsdeveloper.blogspot.fi/2015/08/deprecating-web-hosting-support-in.html" target="_blank">announced last year</a> that we’re <a href="http://googleappsupdates.blogspot.fi/2015/08/deprecating-web-hosting-support-in.html" target="_blank">deprecating web hosting in Google Drive for users and developers</a>. Our records show that you might have used this feature to publish a webpage or serve other web assets.</p><p>On Aug 31, 2016, we will discontinue serving content via <a href="http://googledrive.com/host/" target="_blank">googledrive.com/host/</a>[<em>id</em>] and the webpages will not be accessible anymore.</p><p>As an alternative to web hosting in Drive, we recommend:</p><ul><li><a href="https://www.blogger.com/home" target="_blank">Blogger</a>—An easy and free way to host websites.</li>
<li><a href="https://www.firebase.com/docs/hosting/" target="_blank">Firebase Hosting</a>— An alternative if you’re using the web-hosting feature to serve static webpages with items on Drive.</li>
</ul><p>If you have additional questions or need assistance, please contact <a href="https://support.google.com/drive/answer/4431192" target="_blank">Google Support</a>.</p><p>Sincerely,<br />
<br />
The Google Apps Team</p></blockquote><hr><br />
<br />
Last November (2012) Google announced that <a href="https://drive.google.com/">Google Drive</a> can now host static web content, for example html pages, javascript files, and flash. Here's the article where they announced this: <a href="http://googleappsdeveloper.blogspot.com/2012/11/announcing-google-drive-site-publishing.html">Announcing Google Drive Site Publishing</a>, and here's the documentation: <a href="https://developers.google.com/drive/publish-site">Google Drive SDK</a>.<br />
<br />
It all looks very good, you can programmatically make shared public folder for hosting and add content. But what if I just wanted to host some .js (javascript) files which I have ready? Must I write a program to implement this hosting? Fortunately, I don't.<br />
<br />
<b>Hosting web files on Google Drive</b><br />
<br />
First you have to create a directory in your drive. It can be a subdirectory (of a non-shared directory), for example in the root I have sub directory "Web Hosting" (private dir) which has all the public web hosting directories I have made.<br />
<br />
/Web Hosting<br />
--/Google Drive hosting url tool<br />
--/Some Other Web Project<br />
--/etc...<br />
<br />
After you have created the directory, you can upload files there. When you want to begin hosting those files, select "Share..." for the directory, and under "Who has access" change the directory to be public on the web. Copy the "Link to share" url from the sharing dialog.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-y1I5KY43ids/UP0Dg-w3AmI/AAAAAAAABZI/DoMD_CBrpDI/s1600/googledrivesharing.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="183" width="320" src="//2.bp.blogspot.com/-y1I5KY43ids/UP0Dg-w3AmI/AAAAAAAABZI/DoMD_CBrpDI/s320/googledrivesharing.jpg" /></a></div><br />
To get the web hosting url, use <a href="https://googledrive.com/host/0B3YOTS9GqN9nVk40XzlWWU9NSUU/">this tool</a> ("Google Drive hosting url tool" hosted under my Google Drive):<br />
<br />
<iframe width="100%" height="190px" src="https://googledrive.com/host/0B3YOTS9GqN9nVk40XzlWWU9NSUU/"><a href="https://googledrive.com/host/0B3YOTS9GqN9nVk40XzlWWU9NSUU/">Google Drive hosting url tool</a></iframe><br />
<br />
You can make the url manually, or use the Drive API and "webViewLink", but I made this simple javascript tool for the job. It is a hosting example at the same time.<br />
<br />
<b>Other options for web hosting with Google products</b><br />
<br />
You can also use <a href="https://sites.google.com/">Google Sites</a> to host your files. <a href="https://appengine.google.com/">Google App Engine</a> can be used, too, but that is a bit more compilicated.<br />
<br />
<b>Some tips for hosting on Google Drive</b><br />
<br />
<ul><li>Don't upload multiple files with same name (like two copies of index.html) under the same directory. Use the "Manage revisions" option.</li>
<li>You can use subdirectories under your web hosting directories.</li>
<li>Do you have a good tip for Google Drive hosting? Please post it as a comment.</li>
</ul><br />
Thanks to Ben for the article idea. :)<br />
<br />
<small><b>Update May 6th 2013:</b><br />
Updated the tool to handle the new Google Drive sharing urls.</small>MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com14tag:blogger.com,1999:blog-6729541215652149967.post-77756825812735882222012-08-31T09:08:00.002+03:002012-08-31T09:12:09.025+03:00Small update to my threaded comments hack v2If you have my <a href="http://yabtb.blogspot.com/2012/01/blogger-threaded-commenting-hack-v2.html">threaded comments hack v2</a> installed, and it stopped threading the comments, it is because Blogger changed the navbar iframe src attribute handling. Seemed to happen yesterday. To fix that, edit the template and find line 235 of the hack, which used to be:<br />
<br />
<pre>var cfeedbase = 'http://'+window.location.hostname+'/feeds/'+$("#navbar-iframe").attr("src").match(/targetPostID=([^&]*)/)[1]+'/comments'</pre><br />
and change it to:<br />
<br />
<pre>var cfeedbase = $('link[href$="comments/default"]').attr("href").split("/default")[0];</pre><br />
(all in one line)<br />
<br />
The source code has been updated in the <a href="http://yabtb.blogspot.com/2012/01/blogger-threaded-commenting-hack-v2.html">hack's article</a>.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com8tag:blogger.com,1999:blog-6729541215652149967.post-70081949028310934132012-07-07T13:06:00.001+03:002012-07-07T13:10:02.883+03:00Resize Blogger popular post thumbnailsI got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my <a href="http://yabtb.blogspot.com/2012/01/trim-blogger-popular-post-snippets.html?showComment=1341623947392#c2964691742580038177">Trim Blogger popular post snippets right</a> article. Here's how to do it, hack is similar to my previous popular post hacks.<br />
<br />
You must have jQuery loaded in your page for the script to work. Check your template, and if it does not have jQuery, insert this before </head:><br />
<pre class="brush:javascript;toolbar:false;"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script></pre><br />
You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget. The gadget must be after the popular posts gadget! Or you can put this code in your template's html, just before </body>. If you have my other popular post hacks, like <a href="http://yabtb.blogspot.com/2011/12/shuffle-blogger-popular-posts.html">shuffle</a>, <a href="http://yabtb.blogspot.com/2011/12/shuffle-and-limit-popular-post-gadget.html">shuffle and limit</a> or <a href="http://yabtb.blogspot.com/2012/01/trim-blogger-popular-post-snippets.html">Trim Blogger popular post snippets right</a>, you can put this code in the same place, after those hack's code.<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=ahWvWE6h" target="_blank">Download Raw</a> - <a href="http://pastebin.com/ahWvWE6h" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=ahWvWE6h"></script><br />
<br />
In the script there is the variable <i>var newSize = 100;</i> which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.<br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com34tag:blogger.com,1999:blog-6729541215652149967.post-13050787007433224082012-06-27T10:13:00.001+03:002012-06-27T12:06:42.349+03:00Add Post titles to Older and Newer Post links – reloadedWhen viewing a single Blogger blog post there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger...<br />
<br />
<b>Previous hacks</b><br />
<br />
There are already some hacks to do this. One of the first is by ETBlue, <a href="http://etblue.blogspot.com/2011/01/blogger-change-newer-posts-link-and.html">here's that hack</a>. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.<br />
<br />
I did a hack, too, which adresses the stats problem, <a href="http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html">it is here</a>. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.<br />
<br />
In a comment of my previous hack Duy Pham gave a link to <a href="http://blog.duypham.info/2012/01/thay-older-post-newer-post-bang-tieu-de.html">his Older/Newer post title hack</a>. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.<br />
<br />
Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:<br />
<br />
<b>Post titles to Older and Newer Post links – reloaded</b><br />
<br />
<div style="text-align: center;font-size:150%;font-weight:bold;"><a href="http://yabtb-demo1.blogspot.com/2012/06/post-titles-to-newerolder-page-links.html#blog-pager">Demo</a></div><br />
<b>Installing the hack</b><br />
<br />
You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:><br />
<pre class="brush:javascript;toolbar:false;"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script></pre><br />
Then find </body> and insert this code (just) before it:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=rTTpp8zH" target="_blank">Download Raw</a> - <a href="http://pastebin.com/rTTpp8zH" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=rTTpp8zH"></script><br />
<br />
If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!<br />
<br />
<b>Configuration</b><br />
<br />
You can configure the following javascript variables:<br />
<br />
olderLink - contains the template for older link, you can use [title] in this<br />
newerLink - template for newer link, you can use [title] in this<br />
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this<br />
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this<br />
<br />
You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.<br />
<br />
The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):<br />
<pre class="brush:css;toolbar:false;">.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
</pre>If you don't have Simple template, test and change styles if needed. Values for .home-link work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works). Of course you can style everything quite differently than me, that's just CSS. :)<br />
<br />
Hope you like this hack!<br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com23tag:blogger.com,1999:blog-6729541215652149967.post-89552763438739400792012-06-11T14:17:00.000+03:002012-06-11T14:17:09.268+03:00Contact Form addedI added a new page containing a <a href="http://yabtb.blogspot.fi/p/contact.html">contact form</a> to this blog. I use <b>EmailMeForm</b> service, which I already have used before in another blog of mine. EmailMeForm is free up to 200 form submissions per month and up to 5 different forms.<br />
<br />
<div style="text-align:center;"><a href="http://www.emailmeform.com/"><img border="0" height="80" width="312" src="http://1.bp.blogspot.com/-V064q6MwVk8/T9Wz4Nv9KeI/AAAAAAAAAys/pMzRvJi1fTE/s400/email-me-form-logo.gif" /></a></div><br />
<a href="http://yabtb.blogspot.fi/p/contact.html">Link to the contact form</a> can be found below the header, at the moment there are links to <a href="/">Home</a> (main page) and <a href="http://yabtb.blogspot.fi/p/contact.html">Contact form</a>.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com3tag:blogger.com,1999:blog-6729541215652149967.post-72282682950766199982012-06-08T21:23:00.000+03:002012-08-03T12:44:35.250+03:00Small update to Adding Post titles to Older and Newer Post linksSince Blogger has started rolling out local domains, depending where you view the blog, the links inside the blog may not be anymore <b>blogname.blogspot.com/</b> but may be for example <b>blogname.blogspot.co.uk/</b> or <b>blogname.blogspot.fi/</b>.<br />
<br />
However, the urls are internally still blogspot.com and also in blog's feeds. My hack for <a href="http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html">Adding post titles to Older and Newer Post links</a> fetches the posts' urls and titles from feed and tries to change the older/newer post links' texts to post titles using the url. Local domains disturbed this, no match was found and a pseudo title was generated instead.<br />
<br />
So I had to make a small update that changes the local domain back to .com before matching it with feed urls. Lines 34 and 41 are new, both containing this same code:<br />
<pre>href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
</pre>If you have this hack installed, I suggest you make the same update. See the whole hack with installation instructions here, source code updated: <a href="http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html">Add post titles to Older and Newer Post links</a>.<br />
<br />
<small><span style="font-weight:bold;color:red;">Update June 27th 2012:</span> new version of this hack is <a href="http://yabtb.blogspot.com/2012/06/titles-to-older-newer-links-reloaded.html">here</a>, I suggest you consider using it instead of this.</small><br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com3tag:blogger.com,1999:blog-6729541215652149967.post-24155149418042886482012-06-07T10:59:00.001+03:002012-06-08T21:26:13.484+03:00Round avatars, thumbnails, and other imagesLately I learned how images can be rounded using CSS. This seems to be a "good formula":<br />
<pre>.someclass {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</pre>For some templates, and maybe just for a change, those rounded images can look very good. I'll show you CSS you can add to my hacks, and one Blogger gadget, to make images round. In my hacks you should add the CSS in the code before <b></style></b>.<br />
<br />
<a href="http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html"><b>Better recent comments gadget</b></a><br />
<br />
Add this style:<br />
<pre style="font-size:80%;">.recent-comment-ico img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</pre><center><a href="http://4.bp.blogspot.com/--0L4PV-U9TA/T9BcXMCZ0oI/AAAAAAAAAxc/N5ojC5hapv8/s1600/round_recent.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em;"><img border="0" height="320" width="218" src="http://4.bp.blogspot.com/--0L4PV-U9TA/T9BcXMCZ0oI/AAAAAAAAAxc/N5ojC5hapv8/s320/round_recent.jpg" /></a></center><br />
<br />
<a href="http://yabtb.blogspot.com/2012/06/profile-gadget-with-avatars-and-post.html"><b>Profile gadget with post count</b></a><br />
<br />
Add this style:<br />
<pre style="font-size:80%;">.author-avatar {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</pre><center><a href="http://4.bp.blogspot.com/-xy3KjOR0_cA/T9BdGc0UQeI/AAAAAAAAAxo/fKMHK-VnXXs/s1600/round_authors.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="74" width="205" src="http://4.bp.blogspot.com/-xy3KjOR0_cA/T9BdGc0UQeI/AAAAAAAAAxo/fKMHK-VnXXs/s320/round_authors.jpg" /></a></center><br />
<br />
<a href="http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html"><b>Top Commentators gadget</b></a><br />
<br />
Add this style:<br />
<pre style="font-size:80%;">.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</pre><center><a href="http://2.bp.blogspot.com/-FeBCUJ3P26U/T9BdbISbMII/AAAAAAAAAx0/hoqQ22OiKuY/s1600/round_topcommentators.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="320" width="203" src="http://2.bp.blogspot.com/-FeBCUJ3P26U/T9BdbISbMII/AAAAAAAAAx0/hoqQ22OiKuY/s320/round_topcommentators.jpg" /></a></center><br />
<br />
<a href="http://yabtb.blogspot.com/2012/05/another-gadget-for-youtube-activity.html"><b>Gadget for YouTube activity feed</b></a><br />
<br />
This gives a nice "tube TV" like effect, add this style:<br />
<pre style="font-size:80%;">div.ytc_thumb img {
border:none;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</pre><br />
<center><a href="http://4.bp.blogspot.com/-GXyYf72yFrE/T9Bdr3aiHdI/AAAAAAAAAyA/q6j9NokuQVU/s1600/round_youtube.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="201" width="275" src="http://4.bp.blogspot.com/-GXyYf72yFrE/T9Bdr3aiHdI/AAAAAAAAAyA/q6j9NokuQVU/s320/round_youtube.jpg" /></a></center><br />
<br />
Just one more, and I think you'll get the hang of it. :)<br />
<br />
<b>Popular Posts (Blogger gadget)</b><br />
<br />
Add this style using Template Designer, Advanced, Add CSS:<br />
<pre style="font-size:80%;">.PopularPosts .item-thumbnail img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
</pre><br />
<center><a href="http://2.bp.blogspot.com/-H40_7DwELsw/T9Bd4lZhGBI/AAAAAAAAAyM/_FYE4C6eg_U/s1600/round_popular.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="320" width="161" src="http://2.bp.blogspot.com/-H40_7DwELsw/T9Bd4lZhGBI/AAAAAAAAAyM/_FYE4C6eg_U/s320/round_popular.jpg" /></a></center><br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com20tag:blogger.com,1999:blog-6729541215652149967.post-65402974933591668182012-06-06T15:05:00.000+03:002012-06-06T15:08:32.723+03:00Profile Gadget with avatars and post countsThis is especially for multi author blogs. In multi author blog the profile gadget is very simple looking. It only contains author names in <ul>/<li> list. There is "avatar" but that is the default blogger logo.<br />
<br />
<div style="text-align:center;"><img border="0" height="86" width="127" src="http://2.bp.blogspot.com/-7eN9uC8VfXA/T89FE8q1m6I/AAAAAAAAAwo/seudx_5Rh2w/s400/multiauthor1.jpg" /></div><br />
My multi author blog profile gadget looks like this:<br />
<br />
<div style="text-align:center;"><img border="0" height="84" width="218" src="http://4.bp.blogspot.com/-0FusSRVNbro/T89GrMEevaI/AAAAAAAAAxA/Z5S-IH4t3AE/s400/multiauthor2.jpg" /></div><br />
It works on single author blogs, too, and one could customize it to look about the same as the default single author blog profile gadget, but I'll leave that for you as an exercise. :)<br />
<br />
Installation is simple. Add HTML/Javascript gadget into your blog, and paste the following code there:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=dQTw3UuW" target="_blank">Download Raw</a> - <a href="http://pastebin.com/dQTw3UuW" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=dQTw3UuW"></script><br />
<br />
You can configure some things in the script: maximum user name length, author line template, avatar size, and is avatar cropped or streched. As always, you can also modify the CSS to your liking.<br />
<br />
This was "thrown together" very quickly, but it works ok so I decided to publish it. Hope you like it.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com17tag:blogger.com,1999:blog-6729541215652149967.post-17662843857591127202012-06-06T11:41:00.000+03:002012-06-08T21:25:58.926+03:00Customizable Author Box with post countI got this request for an author box with post count in my <a href="http://yabtb.blogspot.com/2011/09/count-blogger-posts-on-page.html?showComment=1338756856603#c3971558550333829038">blog's comments</a>. An author box is something that is displayed after a post, and it shows info about the author who wrote the post. WordPress.org has many author box extensions, for example <a href="http://wordpress.org/extend/plugins/author-box-after-posts/">Author Box After Posts</a>. There are some hacks for Blogspot blogs, too, but they are generally for single author blogs, and with no post count.<br />
<br />
My Author Box has support for blogs with multiple authors, and post counts per author.<br />
<br />
<div style="text-align:center;font-size:140%;font-weight:bold;"><a href="http://yabtb-demo1.blogspot.com/2012/06/author-info-box-with-post-count.html">Demo</a></div><br />
I must warn you, this hack suits best people who can do their own template customizations and basically already <a href="http://yabtb.blogspot.com/2011/09/know-your-way-around.html">know their way around</a>. These instructions have worked "as is" for Simple and Awesome templates, should work for all others, too, especially if you know you to adapt the code. Not for dynamic templates, though.<br />
<br />
<b>How to install</b><br />
<br />
Installing is quite simple. Edit template HTML, expand widget templates. This hack uses jQuery, so if your template does not already have jQuery, add the following code in your template before </head>:<br />
<pre class="brush:html;toolbar:false;"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
</pre><br />
Then find: <b><data:post.jumpText/></b>, there should be only one instance. Few lines down from there is line:<br />
<pre><div class='post-footer'></pre>just before that line paste all this code:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=GEJzFntb" target="_blank">Download Raw</a> - <a href="http://pastebin.com/GEJzFntb" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=GEJzFntb"></script><br />
<br />
This (+ possibly jQuery loading) is the only code you need to put into the template. Later I'll show you three snippets from this same code, don't put them in the template, just edit the previous code at those points. After pasteing the code to the template, you can save the template and see if there were any errors. You can also test the hack at this time. After that you must customize the hack to suit your blog and blog's authors.<br />
<br />
<b>Configuration</b><br />
<br />
This hack works for both single author and multi author blogs. If you have multi author blog, you must set var multiAuthor = true; This setting can be true for single author blogs, too, but it is sligthly faster if you put false there for single user blogs.<br />
<br />
With onePost and manyPosts variables you can localize the words "post"/"posts" or use other word like "article"/"articles".<br />
<br />
There are more configurable things in javascript parts, but I'll tell more about them later.<br />
<br />
<b>HTML markup</b><br />
<br />
This part defines the look of author box.<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=Sf7Q2gb0" target="_blank">Download Raw</a> - <a href="http://pastebin.com/Sf7Q2gb0" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=Sf7Q2gb0"></script><br />
<br />
Author box html comes partly from the template, and author specific thigs are set by javascript. If you have a <b>single author blog</b>, you can put basically any html between <b><div class='post-author-block'></b> and <b></div></b>.<br />
<br />
Just use <b><span class='authorinfopostcount'>0</span></b> where you want the post count to appear, and <b><span class='authorinfopostpost'>posts</span></b> where you want the singular/pluralis post word to appear. You can also use the same classes as in multiple author blogs, and you can use additional classes and make CSS for them as you wish.<br />
<br />
With <b>multi author blog</b>, author specific information contains post count, author (profile) link, author avatar image, author description, and author name. So these can not be "hard coded" into the box, but they are set via javascript. Inside <b><div class='post-author-block'></b> and <b></div></b>, when you use the following tags + classes, their contents will be dynamically set:<br />
<br />
<b><a class='authorinfolink'>somemarkup</a></b> this will link the text "somemarkup" to author profile link<br />
<b><img class='authorinfoimage' src=''/></b> this will get author avatar<br />
<b><span class='authorinfoname'/></a></b> author name will be put inside this span<br />
<b><span class='authorinfopostcount'>0</span></b> and post count here<br />
<b><span class='authorinfopostpost'>posts</span></b> this will be post/posts (singular, pluralis) according to how many posts author has<br />
<b><span class='authorinfodescription'></span></b> this will be replaced by the author specific description, which can be plain text or complex html (but no scripts). Class can be used in div, too.<br />
<br />
You can also add classes and CSS for elements if you wish. It is just basic template editing. And probably want to customize the CSS too, to get the box look like you want. CSS part is this:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=uxXraJc3" target="_blank">Download Raw</a> - <a href="http://pastebin.com/uxXraJc3" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=uxXraJc3"></script><br />
<br />
Then in the javascript part, for every author or the blog you should set variable <b>aut_desc['AUTHORNAME']</b>. Element with <b>class='authorinfodescription'</b> will receive that description. You can use html here, put div's there, br's, links, imgs, pretty much everything, but not scripts. Now there is only some info about me and some dummy info, you can replace them with content that is relevant to your blog.<br />
<br />
For every author or the blog you can (but it is not necessary) set/override <b>auth_url['AUTHORNAME']</b>. This way you can link author straight to his Google+ profile, or any other page you wish, instead of the blogger profile page. Here's the configuration part of the javascript:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=xViw2Znn" target="_blank">Download Raw</a> - <a href="http://pastebin.com/xViw2Znn" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=xViw2Znn"></script><br />
<br />
I would have liked to get the author description automatically, but there is no feasible way of getting author profile descriptions in multi author blog, so the descriptions must be set in script. Positive side is that you can use any description you want, with links, images etc. Because descriptions could not be fetched automatically, I decided to leave the whole hack simple, so its users can customize the author box look themselves.<br />
<br />
If anyone wants to develop this idea further, go right ahead. I'm not so good at making html/css, some of you will make this look much better. If you use it, please drop a comment so I can see what it looks like in your blog. :)MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com12tag:blogger.com,1999:blog-6729541215652149967.post-82296030186293250652012-06-06T11:13:00.000+03:002012-06-08T21:26:33.534+03:00Hack for my recent comments hack: don't show own commentsMaybe you don't want to show your own comments in recent comments? Here is quick and simple hack for my <a href="http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html">Son of the better recent comments gadget</a> to make it not show own comments.<br />
<br />
Edit the HTML/Javascript gadget. Change lines 93 and 115, which both look like this now:<br />
<pre>var entry = json.feed.entry[i];</pre>to:<br />
<pre>var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="PUT YOUR USERNAME HERE") continue;</pre>Edit your username inside the quotation marks. Save the gadget. Your comments won't be displayed anymore in recent comments.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com8tag:blogger.com,1999:blog-6729541215652149967.post-83714938734993487952012-05-25T09:23:00.000+03:002012-05-25T13:03:15.393+03:00Extending Yahoo! Pipes with Google App EngineIn my <a href="http://pipes.yahoo.com/mspotilas/youtubeuploadsfavoritesfeed">Uploads and Favorites pipe</a> I wanted to turn the timestamps into so called "humanized dates", like these six examples:<br />
<br />
23 seconds ago<br />
1 minute ago<br />
4 hours ago<br />
2 days ago<br />
7 months ago<br />
1 year ago<br />
<br />
This could not be done by using only Yahoo! Pipes.<br />
<br />
<b>Google App Engine to the rescue</b><br />
<br />
Yahoo! Pipes can be extended using a web service, which accepts the feed items as json, and outputs them (after changes) as json. I used this blog article <a href="http://www.javarants.com/2008/04/13/using-google-app-engine-to-extend-yahoo-pipes/">Using Google App Engine to Extend Yahoo! Pipes</a> as a starting point. Django framework has date humanizing functions coded in Python, and I borrowed those functions from there. Then I created a new Google App Engine application "humandate", and made files app.yaml and humandate.py.<br />
<br />
<b>app.yaml</b><br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=UZi7q235" target="_blank">Download Raw</a> - <a href="http://pastebin.com/UZi7q235" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=UZi7q235"></script><br />
<br />
<b>humandate.py</b><br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=4KaTt7vW" target="_blank">Download Raw</a> - <a href="http://pastebin.com/4KaTt7vW" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=4KaTt7vW"></script><br />
<br />
I put these two files in a directory called "humandate" under my Google App Engine directory, with favicon.ico (the GAE default icon), and the development environment is ready. I now can deploy the application using "./appcfg.py update humandate/" or test it locally using "./dev_appserver.py humandate/", then the app runs at http://localhost:8080.<br />
<br />
<b>Testing the date humanizer</b><br />
<br />
I made also an url based interface to "humandate" in addition to Yahoo! Pipes json interface. Url based interface works by giving a unix timestamp as "unixtime" parameter, <a href="http://humandate.appspot.com/?unixtime=1337752504" target="_blank">like this</a>. This made testing the date humanizer easier.<br />
<br />
<b>Using the service in Yahoo! Pipes</b><br />
<br />
This service expects items to have y:published.utime field present. Service reads it from every item, turns it into a humanized date, and makes a new field "when" containing the humanized date. Then the service returns the items back to pipes.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-eylXWhG615s/T78jgFHYvNI/AAAAAAAAAvI/WPjEJxq5iv4/s1600/humandate_webservice_in_pipes.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="114" width="400" src="http://2.bp.blogspot.com/-eylXWhG615s/T78jgFHYvNI/AAAAAAAAAvI/WPjEJxq5iv4/s400/humandate_webservice_in_pipes.jpg" /></a></div><br />
<br />
See also <a href="http://yabtb.blogspot.com/2012/05/yahoo-pipes-pipes-and-more-pipes-for.html">my previous article</a> about the four youtube pipes I've made (one of them uses this humandate, and one uses it indirectly). And have fun with Google App Engine and Yahoo! Pipes.<br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com0tag:blogger.com,1999:blog-6729541215652149967.post-30222568094946939852012-05-24T20:04:00.001+03:002012-05-25T09:44:55.616+03:00Yahoo! Pipes, pipes, and more pipes for YouTubeLately I've been playing around with Yahoo! Pipes and learned some new things. I already presented the <a href="http://yabtb.blogspot.com/2012/05/yahoo-pipe-to-show-youtube-activity.html">YouTube Activity Feed</a>, which I've cleaned up a little. And I've made three more pipes.<br />
<br />
<br />
<b>YouTube Activity Feed</b><br />
<br />
Pipe ID: 58c841d14337ba4fbf693abd9701dc49<br />
Pipe Web Address: <a href="http://pipes.yahoo.com/mspotilas/youtubeactivityfeed">http://pipes.yahoo.com/mspotilas/youtubeactivityfeed</a><br />
<br />
Here's my <a href="http://yabtb.blogspot.com/2012/05/yahoo-pipe-to-show-youtube-activity.html">previous article</a> about this feed. <a href="https://developers.google.com/youtube/2.0/developers_guide_protocol_activity_feeds">YouTube API 2.0 does provide activity feeds</a>, 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.<br />
<br />
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.<br />
<br />
<br />
<b>YouTube Likes Feed</b><br />
<br />
Pipe ID: a58d86555f7eb396e73d58ff50edc8f1<br />
Pipe Web Address: <a href="http://pipes.yahoo.com/mspotilas/youtubelikesfeed">http://pipes.yahoo.com/mspotilas/youtubelikesfeed</a><br />
<br />
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.<br />
<br />
<br />
<b>YouTube Uploads and Favourites</b><br />
<br />
Pipe ID: 0c2ee991c8d94ed0ceb19865c252e047<br />
Pipe Web Address: <a href="http://pipes.yahoo.com/mspotilas/youtubeuploadsfavoritesfeed">http://pipes.yahoo.com/mspotilas/youtubeuploadsfavoritesfeed</a><br />
<br />
YouTube has gdata feeds for user uploads and user favorites.<br />
<br />
http://gdata.youtube.com/feeds/base/users/USERNAME/uploads?alt=rss&v=2<br />
and<br />
http://gdata.youtube.com/feeds/base/users/USERNAME/favorites?alt=rss&v=2<br />
<br />
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 <a target="_blank" href="http://humandate.appspot.com/">web service I coded into Google AppEngine</a>. 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: <a href="http://yabtb.blogspot.com/2012/05/extending-yahoo-pipes-with-google-app.html">Extending Yahoo! Pipes with Google App Engine</a>.<br />
<br />
This pipe should be robust, as it uses feeds as source, not page html.<br />
<br />
<br />
<b>YouTube Feed</b><br />
<br />
Pipe ID: 73c5ee4a46e1837d908deaa60b1858d2<br />
Pipe Web Address: <a href="http://pipes.yahoo.com/mspotilas/youtubefeed">http://pipes.yahoo.com/mspotilas/youtubefeed</a><br />
<br />
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.<br />
<br />
<br />
All pipes are compatible with <a href="http://yabtb.blogspot.com/2012/05/another-gadget-for-youtube-activity.html">my gadget which works also on Opera</a> (Yahoo! Pipes badge does not). Just change the pipe ID (_id) to use a different pipe.<br />
<br />
Feel free to examine these pipes, you can also make clones which you can modify. Comments are welcome, too. :)MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com0tag:blogger.com,1999:blog-6729541215652149967.post-44563741387224541292012-05-21T08:37:00.000+03:002012-05-21T08:37:14.687+03:00Another gadget for YouTube Activity Feed, works with OperaFew days ago I finished making <a href="http://yabtb.blogspot.com/2012/05/yahoo-pipe-to-show-youtube-activity.html">my first Yahoo! Pipe</a>, which collects info from YouTube channel feed page, and republishes that info. Yesterday I noticed, that Yahoo! Pipes badge output <a href="http://pipes.yahoo.com/pipes/docs?doc=troubleshooting#q7">does not support Opera</a> – with Opera, nothing is shown. It is strange that Yahoo does not fix this, maybe it is because Pipes is a free product. About 3 % of my blogs readers use Opera.<br />
<br />
I knew I could make a gadget that works on Opera, too. Yesterday evening I coded first a javascript version, and today morning a little tidier jQuery version.<br />
<br />
<div style="text-align:center;font-weight:bold;font-size:140%;"><a href="http://yabtb-demo1.blogspot.com/2012/05/new-youtube-activity-feed-gadget.html">Demo</a></div><br />
Installation is simple: add an HTML/Javascript gadget and put the following code in it:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=FN1ttLww" target="_blank">Download Raw</a> - <a href="http://pastebin.com/FN1ttLww" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=FN1ttLww"></script><br />
<br />
You can leave out the first line, if your template already loads jQuery. Make necessary configuration changes (change YouTube user name, for example). I did only very basic CSS, you can of course modify it to your liking. Code can be used also outside Blogger (in any html page).<br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com10tag:blogger.com,1999:blog-6729541215652149967.post-34096278367053517642012-05-18T11:37:00.000+03:002012-05-21T08:41:20.254+03:00Yahoo! Pipe to show YouTube activity feed in Blogger, WordPress, etc.<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-TJm157sT1YY/T7X9jQBAJQI/AAAAAAAAAuo/lVjrrl1YYgk/s1600/mypipe.png" imageanchor="1" style="clear:right; float:right; margin-left:1em; margin-bottom:1em"><img border="0" height="150" width="150" src="http://1.bp.blogspot.com/-TJm157sT1YY/T7X9jQBAJQI/AAAAAAAAAuo/lVjrrl1YYgk/s200/mypipe.png" /></a></div>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 <b>Yahoo! Pipes</b>. 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. <br />
<br />
Link to the pipe: <a href="http://pipes.yahoo.com/mspotilas/youtubeactivityfeed">pipes.yahoo.com/mspotilas/youtubeactivityfeed</a>.<br />
<br />
<b>And here's the "badge output" of that pipe</b> from <a href="http://www.youtube.com/user/mspotilas/feed">my youtube feed page</a>, with 5 items:<br />
<style type="text/css">
.postwidget img { border: 0; padding: 0; margin: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
</style><br />
<div style="text-align:center;clear:both;"><div class="postwidget" style="text-align:left;display:inline-block;"><script src="http://l.yimg.com/a/i/us/pps/listbadge_1.6.js">{"pipe_id":"58c841d14337ba4fbf693abd9701dc49","_btype":"list","pipe_params":{"disallow":"","allow":"","user":"mspotilas","max-results":"5"},"width":"300","height":"100%","hideHeader":true}</script></div></div><br />
This can be put into a sidebar gadget, like I've done in <a href="http://yabtb-demo1.blogspot.com/2012/05/youtube-activity-feed-gadget.html">YABTB demo blog</a>. The code to put inside an HTML/Javascript gadget is simple:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=KPDGui0y" target="_blank">Download Raw</a> - <a href="http://pastebin.com/KPDGui0y" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=KPDGui0y"></script><br />
<br />
You may also use the "Get as a Badge" link when the pipe is run in <a href="http://pipes.yahoo.com/mspotilas/youtubeactivityfeed">the pipe's page</a>, it offers an automated gadget installation into Blogger blogs, WordPress blogs and others.<br />
<br />
<b>Update May 21th:</b> Because Badge output does not work with Opera browser, you might consider using instead <a href="http://yabtb.blogspot.com/2012/05/another-gadget-for-youtube-activity.html">a gadget made by me, which works with Opera</a>.<br />
<br />
<b>Parameters of the pipe:</b><br />
<br />
<i>user</i>: youtube user name,<br />
<i>max-results</i>: maximum number of items returned,<br />
<i>allow</i>: only accept entries that have this word in description, for example "liked" to get only likes or "uploaded" to get only uploads,<br />
<i>disallow</i>: don't allow entries that have this word in description, for example "commented" to filter out commenting activity.<br />
<br />
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 <a href="http://yabtb-demo1.blogspot.com/2012/05/youtube-activity-feed-gadget.html">YABTB demo blog</a>, 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:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=gPxAb3QY" target="_blank">Download Raw</a> - <a href="http://pastebin.com/gPxAb3QY" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=gPxAb3QY"></script><br />
<br />
<b>There is also a YouTube RSS feed, but...</b> YouTube gdata feed for YouTube channel includes only uploads. No likes, favourites, comments, etc. Link to YouTube user's RSS feed of uploads is:<br />
<br />
<div style="text-align:center;"><i>http://gdata.youtube.com/feeds/base/users/<b>youtubeusername</b>/uploads?alt=rss&v=2&orderby=published</i></div><br />
For example my YouTube channel's RSS feed is:<br />
<br />
<div style="text-align:center;"><a href="http://gdata.youtube.com/feeds/base/users/mspotilas/uploads?alt=rss&v=2&orderby=published">gdata.youtube.com/feeds/base/users/<b>mspotilas</b>/uploads?alt=rss&v=2&orderby=published</a></div><br />
<br />
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.<br />
<br />
<b>Update May 20th:</b> I found out that <a href="http://pipes.yahoo.com/pipes/docs?doc=troubleshooting#q7">Opera browser is not supported</a> 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.<br />
<b>Update May 21th:</b> Here's the <a href="http://yabtb.blogspot.com/2012/05/another-gadget-for-youtube-activity.html">gadget I made, works with Opera</a>, too.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com4tag:blogger.com,1999:blog-6729541215652149967.post-67095822665570700082012-05-02T21:45:00.000+03:002017-08-01T09:18:35.085+03:00Top Commentators Gadget with avatarsI had a request of this gadget in one blog comment. There are some top commentators gadgets around, most relying on a Yahoo pipe. I knew it can be done with just javascript, with no pipes. Demo: it is installed on this blog, look at the <a href="#topcommentators">right sidebar</a>. Hope you like it. :)<br />
<br />
<b>Features</b><br />
<br />
You can configure the maximum number of top commentators, and minimum number of comments one must have to get on the list (to weed out the 1 comment commentators, if wanted, for example). Own nick and a list of other nicks (for example "Anonymous") can be excluded from the list. Output strings can be translated.<br />
<br />
<b>The Script, installing</b><br />
<br />
Add a HTML/Javascript gadget to your blog, and paste the following code into it.<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=mFXpKTah" target="_blank">Download Raw</a> - <a href="http://pastebin.com/mFXpKTah" target="_blank">See Original</a></div><script src="//pastebin.com/embed_js.php?i=mFXpKTah"></script><br />
<br />
<b>Script configuration</b><br />
<br />
There are two CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and a short explanation.<br />
<br />
maxTopCommenters: how big the list is at maximum<br />
minComments: how many comments must top commentator have at least<br />
numDays: from how many days (ex. 30), or 0 from "all the time" (max 500 comments)<br />
excludeMe: true, if own comments excluded<br />
excludeUsers: array of usernames to exclude<br />
maxUserNameLength: if 0, don't cut; if > 4, cut lenghty usernames<br />
<br />
txtTopLine: specifies, what is output on each line. This text can have simple variables, which are: [#], [image], [user], and [count]. [#] is substituted by position on the list, [image] by commentator's avatar image, [user] by commentator name and [count] by number of comments. Text can also contain html.<br />
txtNoTopCommenters: what to display, if list is empty<br />
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used<br />
getTitles: if true, fetch titles from post feed; if false, titles are generated from url<br />
blogger favico [B]<br />
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image<br />
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!<br />
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want, possibly this<br />
urlNoAvatar: comment feed offers the icon (Blogger logo) for those Bloggers who have not set their profile image. You can override the icon with this setting (default: ).<br />
<br />
cropAvatar: crop avatar to square (true) or stretch (false) to square<br />
sizeAvatar: size of avatar in x and y direction, pixels<br />
<br />
If you have very much comments (thousands and thousands of them), I suggest you to use this as "top commentators of 30 days" gadget or something like that (set numDays variable to 30), so that it won't take too long to load and calculate all the comments.<br />
<br />
<small><b>June 5th 2012: Small CSS update</b>: Blogger changed the paddings of .profile-name-link, that's why I added this line (line 3.):<br />
.top-commenter-line .profile-name-link {padding-left:0;}<br />
<br />
<b style='color:red;'>August 1st 2017</b>: To fix avatars, please change lines 48 and 49 (article code is updated).<br />
</small>MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com36tag:blogger.com,1999:blog-6729541215652149967.post-42029447807940186182012-04-08T11:49:00.001+03:002012-04-08T11:50:21.850+03:00How to make Blogger sticky post using a gadgetI have this <a href="http://yabtb.blogspot.com/2011/11/real-sticky-posts-for-blogger.html">other sticky post hack</a>, which uses real Blogger posts. But for some Blogspot blogs that may not be the best solution, so lets see how we can do the sticky post thing using a HTML/Javascript gadget. I did not find "full solutions" where the sticky post works like it should, i.e. displays only on the first page of the blog, but not on other pages. So here is one, by me.<br />
<br />
<div style="text-align: center;">
<h3><a href="http://yabtb-demo1.blogspot.com/">Live demo</a></h3>
</div>
<br />
<b>Adding the gadget</b><br />
<br />
Go to Design, Page elements. Click Add a Gadget (any link will do, we will move the gadget to proper place afterwards).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ax5gRRcmtu8/T4E6oxM8lKI/AAAAAAAAApw/a30HtUKLjoI/s1600/stickygadget1.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="214" width="320" src="http://3.bp.blogspot.com/-ax5gRRcmtu8/T4E6oxM8lKI/AAAAAAAAApw/a30HtUKLjoI/s320/stickygadget1.jpg" /></a></div>
<br />
Write the text/html you want in your "sticky post", click Save. I suggest to not use any title, it helps the correct alignment when gadget is hidden.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-2ihPtlhHbrM/T4E60n0NgsI/AAAAAAAAAp8/SlxkcciOOqg/s1600/stickygadget2.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="320" width="302" src="http://3.bp.blogspot.com/-2ihPtlhHbrM/T4E60n0NgsI/AAAAAAAAAp8/SlxkcciOOqg/s320/stickygadget2.jpg" /></a></div>
<br />
Now drag the new gadget to top of blog posts, like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JHv3JzC7Vkw/T4E69IvnXrI/AAAAAAAAAqI/fOAVbuUbHNk/s1600/stickygadget3.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="214" width="320" src="http://3.bp.blogspot.com/-JHv3JzC7Vkw/T4E69IvnXrI/AAAAAAAAAqI/fOAVbuUbHNk/s320/stickygadget3.jpg" /></a></div>
<br />
Save.<br />
<br />
<b>Hide the gadget on other pages than first</b><br />
<br />
Open template html for editing. Before </head> add this:<br />
<br />
<pre class="brush: css">
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
div.main div.widget.HTML .widget-content { display:none; }
div.main div.widget.HTML { margin-bottom:-30px; visibility: hidden;}
</style>
</b:if>
</pre>
<br />
Depending on your template you might have to change the value -30px to adjust the position of blog texts. -30px works for "Simple" template.<br />
<br />
<b>How to mimic a post in gadget html</b><br />
<br />
Here's a "template" you can use in HTML/Javascript gadget contents to make the gadget have post-like title, spacing and body text.<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=ThBYaQXc" target="_blank">Download Raw</a> - <a href="http://pastebin.com/ThBYaQXc" target="_blank">See Original</a></div>
<script src="http://pastebin.com/embed_js.php?i=ThBYaQXc"></script>
<br />
This template works at least in "Simple" and "Awesome Inc." templates, probably in others, too. :)<br />
<br />
<div style="text-align: center;">
<h3><a href="http://yabtb-demo1.blogspot.com/">Live demo</a></h3>
</div>MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com11tag:blogger.com,1999:blog-6729541215652149967.post-28051471709459772072012-04-06T12:42:00.000+03:002012-04-06T12:42:15.839+03:00Small update for recent comments gadgetsI have updated the source code of all three recent comments gadgets today.<br />
<br />
<b>1. Bug fix</b><br />
<br />
The gadget choked with comments on blog pages (versus articles). Fix for that was easy, search for line:<br />
<br />
<span style="background:#eee;font-family: 'Courier New', Courier, monospace;">postTitle = hrefPost.split(&quot;/&quot;)[5].split(&quot;.html&quot;)[0].replace(/_\d{2}$/, &quot;&quot;);</span><br />
<br />
and change it to:<br />
<br />
<span style="background:#eee;font-family: 'Courier New', Courier, monospace;">if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, &quot;&quot;);</span><br />
<br />
That line is line number 88 in <a href="http://yabtb.blogspot.com/2011/10/better-recent-comments-gadget-for.html">recent comments gadget</a>, line 138 in <a href="http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html">return of recent comments gadget</a>, and line number 141 in <a href="http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html">son of recent comments gadget</a>.<br />
<br />
<b>2. Default/empty post title</b><br />
<br />
I also updated this line (line number 85/135/138):<br />
<br />
<span style="background:#eee;font-family: 'Courier New', Courier, monospace;">var postTitle="";</span><br />
<br />
to this:<br />
<br />
<span style="background:#eee;font-family: 'Courier New', Courier, monospace;">var postTitle="-";</span><br />
<br />
So at least something is displayed, if title cannot be parsed.<br />
<br />
<b>3. Better linking to post page comments</b><br />
<br />
In return of, and son of recent comments gadged, I also added this line:<br />
<br />
<span style="background:#eee;font-family: 'Courier New', Courier, monospace;">if(!/#/.test(href)) href += "#comments";</span><br />
<br />
It is line 185 in "return of", and line 192 in "son of". With a comment on a page this gets us positioned on top of the comments (versus top of the article). I did not make this update on the oldest gadget, if you're still using it, I suggest you try the latest version, <a href="http://yabtb.blogspot.com/2011/12/son-of-better-recent-comments-gadget.html">son of the recent comments gadget</a>.<br />
<br />
I've updated the source code in the blog articles, you can look up the changes there.<br />MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com1tag:blogger.com,1999:blog-6729541215652149967.post-26848610695706302712012-03-14T09:56:00.001+02:002012-03-14T09:58:14.007+02:00Google App Engine, Python 2.7, and lxml<a href="http://code.google.com/appengine/">Google App Engine (GAE)</a> 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 <a href="http://yabtb.blogspot.com/2011/11/python-tool-to-get-blogger-avatar.html">my tool to get blogger avatars</a> (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.<br />
<br />
Previously I used GAE Python 2.5 environment, which was the default and supported version. <a href="http://googleappengine.blogspot.com/2012/02/announcing-general-availability-of.html">On February 27th Python 2.7 became fully supported</a>. GAE with Python 2.7 contains more external libraries than version 2.5, one of those libraries being <a href="http://lxml.de/">lxml</a>.<br />
<br />
I tried to search for different solutions and examples, but there were not many. With GAE Python 2.5, one can use <i>BeautifulSoup</i>, but there are some issues (<a href="http://www.crummy.com/software/BeautifulSoup/bs3/3.1-problems.html">problematic 3.1.0 version</a>, uncertain development future of BS, etc.). And there is <i>minidom</i>, but it may not handle broken html well. Blogger profile page should not have broken html, but you never know. <i>lxml</i> is definitely better and faster, supports XPath, etc.<br />
<br />
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 <b>app.yaml</b> looks like this:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=ZQVZa6AZ" target="_blank">Download Raw</a> - <a href="http://pastebin.com/ZQVZa6AZ" target="_blank">See Original</a></div>
<script src="http://pastebin.com/embed_js.php?i=ZQVZa6AZ"></script>
<br />
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:<br />
<br />
>>> tree = etree.HTML(result)<br />
>>> r=tree.xpath("//img[@id='profile-photo']/@src")<br />
<br />
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 <b>blogava.py</b> source file:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=5wjPaf32" target="_blank">Download Raw</a> - <a href="http://pastebin.com/5wjPaf32" target="_blank">See Original</a></div>
<script src="http://pastebin.com/embed_js.php?i=5wjPaf32"></script>
<br />
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. :)MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com4tag:blogger.com,1999:blog-6729541215652149967.post-71498453313290615872012-03-08T22:18:00.009+02:002012-03-27T14:10:06.598+03:00YouTube/JSONP oEmbed service "oembed-js"In the previous post I introduced my oembed-js service and an application using it: <a href="http://yabtb.blogspot.com/2012/03/embed-youtube-in-blogger-comments.html">YouTube embeds in Blogger comments</a>.<br />
<br />
Oembed-js is a Google Appengine application coded in Python. It relays YouTube oembed calls and offers results also in JSONP format, so javascript applications can use it.<br />
<br />
<b>Parameters</b><br />
<br />
url: the (youtube) url to embed (best to be urlencoded)<br />
maxwidth: max width of embedded object (optional)<br />
maxheight: max height of embedded object (optional)<br />
format: json/jsonp or xml (optional, default:json/jsonp)<br />
callback or jsonp: the javascript callback function, required, if jsonp format is wanted<br />
callID: a call ID that is passed through to response (optional)<br />
<br />
Sample call:<br />
<br />
<a href="http://oembed-js.appspot.com/?callback=foo&callID=123&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGMra5Wh51oU">http://oembed-js.appspot.com/?callback=foo&callID=123&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGMra5Wh51oU</a><br />
<br />
<b>Response</b><br />
<br />
YouTube oEmbed response in json(p) or xml format, including field html (see <a href="">oembed specs</a>), and:<br />
<br />
callID: if callID was given, it is passed through (can identify the response)<br />
url: pass through the url that is being embedded<br />
videoid: contains 11 char long YouTube videoid, if single video embed<br />
playlist: contains playlist id, if playlist embed<br />
<br />
Sample response:<br />
<br />
foo({"provider_url": "http://www.youtube.com/", "version": "1.0", "title": "Sviatoslav Richter in Kiev, 1958 - Pictures at an Exhibition", "url": "http://www.youtube.com/watch?v=GMra5Wh51oU", "type": "video", "videoid": "GMra5Wh51oU", "thumbnail_width": 480, "height": 344, "width": 459, "html": "<iframe width=\"459\" height=\"344\" src=\"http://www.youtube.com/embed/GMra5Wh51oU?fs=1&feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>", "author_name": "FirstPublicChannel", "callID": "123", "provider_name": "YouTube", "thumbnail_url": "http://i4.ytimg.com/vi/GMra5Wh51oU/hqdefault.jpg", "thumbnail_height": 360, "author_url": "http://www.youtube.com/user/FirstPublicChannel"})<br />
<br />
<b>Another demo how to use it</b><br />
<br />
<center>Enter YouTube URL (video or playlist): <input type="text" id="oemb" style="padding:5px;width:400px;"/><br />
<br /></center>
<div id="oembed" style="width:400px;height:300px;margin-left:auto;margin-right:auto;border:1px solid black;"> </div>
<br />
This demo and its source is also here in <a href="http://jsfiddle.net/AktLs/">this jsFiddle</a>.
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>
var oe_clrtimer;
var oe_edttimer;
var oe_oldhtml="";
var oe_oldeditval="";
function oembed_indiv(response) {
clearTimeout(oe_clrtimer);
if(response && response.html && oe_oldhtml != response.html) {
$('#oembed').html(response.html);
oe_oldhtml = response.html;
}
}
function oembedit(urli) {
filename = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(urli) + "&callback=oembed_indiv&maxwidth="+$('#oembed').width()+"&maxheight="+$('#oembed').height();
var scr=document.createElement('script');
scr.setAttribute("type","text/javascript");
scr.setAttribute("src",filename);
document.getElementsByTagName("head")[0].appendChild(scr);
}
$(window).load(function() {$('#oemb').bind('input keyup change',function() {
if(oe_edttimer) clearTimeout(oe_edttimer);
oe_edttimer = window.setTimeout(function() {
if($('#oemb').val() != oe_oldeditval) {
oe_clrtimer = window.setTimeout(function() {
$('#oembed').html(""); oe_oldhtml="";
}, 2000);
matches = $('#oemb').val().match(/[^/s]*(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})[^\s]*/i);
if(matches && matches.length)
oembedit(matches[0]);
}
oe_oldeditval = $('#oemb').val();
oe_edttimer = 0;
}, 1500 );
});
});
</script>
<br /><br />
<small>
<b>Update March 27th 2012</b>: Now oembed-js supports youtu.be urls (YouTube oembed service does not support them). Also now supports videos which have embedding turned off (YouTube oembed does not support these either).
</small>MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com3tag:blogger.com,1999:blog-6729541215652149967.post-81183542809114471022012-03-04T08:31:00.004+02:002012-10-06T12:41:35.013+03:00Allow users embed YouTube videos in Blogger commentsSome time ago while googling something about video embeds I came across with <a href="http://oembed.com/">oEmbed specification</a>. 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.<br />
<br />
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 <a href="http://embed.ly/">Embedly</a> service, which is unfortunately <a href="http://embed.ly/pricing">not free</a>.<br />
<br />
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://<b>oembed-js</b>.appspot.com/?url=[youtube url to embed][&callback=foo] But now where to use it...<br />
<br />
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 <b>oembed-js</b> this became possible in Blogger. Of course we need to hack the blog first a bit. :)<br />
<br />
<div style="font-size:125%;font-weight:bold;text-align:center;"><a href="http://yabtb-demo1.blogspot.com/2012/02/easy-embed-youtube-videos-in-comments.html">See the demo blog!</a></div><br />
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 <i>youtube</i> or <i>embed</i> more. If you have <a href="http://yabtb.blogspot.com/2012/02/youtube-videos-lazy-load-improved-style.html">lazy loading</a> 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:<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=UBBNK8zA" target="_blank">Download Raw</a> - <a href="http://pastebin.com/UBBNK8zA" target="_blank">See Original</a></div><script src="http://pastebin.com/embed_js.php?i=UBBNK8zA"></script> <br />
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.<br />
<br />
<b>References:</b><br />
- <a href="http://oembed.com/">oEmbed specification</a><br />
- <a href="http://apiblog.youtube.com/2009/10/oembed-support.html">YouTube API blog: oEmbed support</a><br />
<br />
<small> <b>Update 27th March 2012</b>: Line #74 updated, to handle better the case of <a href="http://yabtb-demo1.blogspot.com/2012/02/easy-embed-youtube-videos-in-comments.html?showComment=1332431137401#c2364826494994946555">only a YouTube url as comment text</a> in new Blogger threaded comments (you do not need to update if you use videotag, or don't use Blogger threaded comments).</small>MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com30tag:blogger.com,1999:blog-6729541215652149967.post-80927551513418425842012-02-26T13:19:00.003+02:002012-02-26T21:53:47.438+02:00Youtube videos lazy load, improved styleI styled my <a href="http://yabtb.blogspot.com/2011/12/lazy-load-youtube-videos.html">previous youtube lazy load hack</a> 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):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://2.bp.blogspot.com/-eg2zGFg45xI/T0oUHUowgbI/AAAAAAAAAoI/5cfnSi-edj0/s1600/old_youtube_lazyload.jpg" /></div>
<br />
HTML needed to produce this is:
<pre>
<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></pre>
With the new style, it looks like this (actual embed):<br />
<br />
<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>
<br />
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.<br />
<br />
<div class="embedMyFooter">Data provided by <a href="http://pastebin.com/" target="_blank">Pastebin.com</a> - <a href="http://pastebin.com/raw.php?i=cKT7pZ2K" target="_blank">Download Raw</a> - <a href="http://pastebin.com/cKT7pZ2K" target="_blank">See Original</a></div>
<script src="http://pastebin.com/embed_js.php?i=cKT7pZ2K"></script>
<br />
This script is installed on this blog.MS-potilashttp://www.blogger.com/profile/05137522196636058302noreply@blogger.com34