new Embed stuff in your pages
Add to Technorati Favorites

Tuesday, April 3, 2007

Hacking Blogger widgets - embedding Newsreel outside Blogger

Google provides some nice widgets in Blogger. They have to, since typepad and other blogging platforms are far more rich in widgets than Blogger :-). However, widgets provided inside Blogger are not available to other platforms, like WordPress or any other custom pages.

That's why I did a little hacking and extract the essentials needed to embed widgets like Newsreel in pages/sites built on top of something else than Blogger.

This is actually a technique that could be easily applied to other Blogger widgets as well.

I wrote the code for an HTML page that can work standalone. Simply take the following code and paste it inside a new file, save that file and open it in your browser. You'll get the Blogger Newsreel widget embedded in a page other than the one served by Blogger.

Of course, as any other hack, this might not work if Google decides to change something. So do use it at your own risk.

<html>
<head>
<style>
.my-own-widget {
width:150px;
border:1px solid green;
font: 10px Arial;
padding: 4px;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://www2.blogger.com/widgets/3087377642-widgets.js"></script>
<script type='text/javascript'>
_WidgetManager._Init('http://www2.blogger.com/rearrange?blogID=4512778208317229786', 'http://embeddable.blogspot.com/index.html','4512778208317229786');
_WidgetManager._RegisterWidget('_NewsBarView', new _WidgetInfo('NewsBar1', 'sidebar',{'main': {'varName': '', 'template': '\u003cb:if cond\u003d\'data:title !\u003d \"\"\'\> \u003ch2 class\u003d\'title\'\>\u003cdata:title\>\u003c/data:title\>\u003c/h2\> \u003c/b:if\> \u003cdiv class\u003d\'widget-content\'\> \u003cdiv expr:id\u003d\'data:widget.instanceId + \"_bar\"\'\> \u003cspan class\u003d\'newsBar-status\'\>Loading...\u003c/span\> \u003c/div\> \u003c/div\> \u003cb:include name\u003d\'quickedit\'\>\u003c/b:include\>'}}, document.getElementById('NewsBar1'), {'title': '', 'format': 'VERTICAL', 'expression': 'embed stuff on your blog', 'linkNewWindow': false, 'key': 'ABQIAAAAVBJEtyJuLxgUs8KlzeA1lRRexG7zW5nSjltmIc1ZE-b8yotBWhQCAqymr8sfNdtXcWxm9PMHAFF7rw'}, 'displayModeFull'));
</script>

<div class='my-own-widget' id='NewsBar1'>
<div class='widget-content'>
<div id='NewsBar1_bar'>
<span class='newsBar-status'>Loading...</span>
</div>
</div>
</div>
</body>
</html>


Update: a test page has been uploaded at http://blog.tremend.ro/wp-content/uploads/2007/02/upload/test-newsreel.htm

Update2: to modify the news you wish to see inside your widget, use the script below. In the line var expression = "blog";, just replace the "blog" with anything you wish from news.google.com

var expression = "blog";
_WidgetManager._Init('http://www2.blogger.com/rearrange?blogID=4512778208317229786', 'http://embeddable.blogspot.com/index.html','4512778208317229786');
_WidgetManager._RegisterWidget('_NewsBarView', new _WidgetInfo('NewsBar1', 'sidebar',{'main':
{'varName': '', 'template': '\u003cb:if cond\u003d\'data:title !\u003d \"\"\'\> \u003ch2 class\u003d\'title\'\>\u003cdata:title\>\u003c/data:title\>\u003c/h2\> \u003c/b:if\> \u003cdiv class\u003d\'widget-content\'\> \u003cdiv expr:id\u003d\'data:widget.instanceId + \"_bar\"\'\> \u003cspan class\u003d\'newsBar-status\'\>Loading...\u003c/span\> \u003c/div\> \u003c/div\> \u003cb:include name\u003d\'quickedit\'\>\u003c/b:include\>'}},
document.getElementById('NewsBar1'), {'title': '', 'format': 'VERTICAL', 'expression': expression, 'linkNewWindow': false, 'key': 'ABQIAAAAVBJEtyJuLxgUs8KlzeA1lRRexG7zW5nSjltmIc1ZE-b8yotBWhQCAqymr8sfNdtXcWxm9PMHAFF7rw'}, 'displayModeFull'));

Monday, April 2, 2007

Customize your blog - remove the blogger toolbar

You don't like the blogger toolbar and don't know how to get rid of it? Here's a small script I wrote that helps you do that:

<script>$_$=function() {var $a = document.getElementById("navbar");if($a){$a.style.width = "0px";$a.style.height = "0px";$a.style.display = "none";}window.setTimeout("$_$()", 100);};$_$();</script>


Just embed this small javascript inside your blogger template. A good place would be right after the <head> tag.

Here's a blog that uses this script: http://rotite.blogspot.com/. Enjoy!

Embedding page previews with Snap Preview Anywhere

Snap Preview Anywhere is being used by at least half of the bloggers around the world. To embed it into your blog, go to http://www.snap.com/about/spa.php and follow their wizard.

The final result of the wizard will be a script you'll have to include inside your blog template, or inside the HTML for your page.

Here's how the code looks like:

<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=3d7b4f2996e258835e948028489c0f23&sb=1&th=green&cl=1&si=0&oi=0&lang=en-us&domain=embeddable.blogspot.com&platform=blogger"></script>


The preview ... just move the mouse over any external link and you will get to see it.

Sunday, April 1, 2007

Embed your calendar from 30boxes inside your blog

If you wish to embed a public calendar in your blog, 30boxes is a good solution. They support integration with blogger, webshots, flickr, wordpress, twitter and any other RSS feeds. I wouldn't put all my 100 RSS newsfeeds inside, since the calendar is not built as a newsfeed reader.

However, if you want to share a calendar with everyone, it's really simple. Just click on the "Share" button and choose "Add to blog". From there, copy the HTML code under the "EMBED CALENDAR" entry and paste it into your site.



Here's how the embedded calendar looks like:



And here's the code:

<iframe scrolling="no" frameborder="0" src="http://30boxes.com/widget/146514/Mariusmarius/fd1259d18da03e8b7203d781ecf5f180/0/" width="450" height="400" style="border: none; overflow: auto;"></iframe>


However, the calendar is not well suited for smaller dimensions. 30boxes sets the default width to 800 pixels which is too much since most bloggers would embed it somewhere in the left/right columns and not in the middle of the page. The widget is cool, it has all sorts of dialogs and popups, but, again, due to the widget's long width, they are larger than the space intended.

This is a problem almost for all iframe based widgets. Offering widgets inside an iframe is a simple solution from a technological point of view, but it doesn't look that good in a blog. Iframe-s are probably useful for larger embeddable items, such as spreadsheets, or powerpoint presentations, but not for such a common widget like a calendar.

Friday, March 30, 2007

Decorate your google ads with AdSense Decorator

AdSense Decorator is a cute product allowing customization of Google ads on your website. It's probably a bit too heavy for what it does since nowadays we see much more complex web tools, but it does its job.



Here's a screenshot with one of their default templates:

Thursday, March 29, 2007

Embed spreadsheets in your website using Zoho sheet

Zoho sheet is another great product from Zoho that can generate spreadsheets embeddable in your blog or your website.

Just create your spreadsheet and click on the "Publish" menu, where you will find the option "Embed in Website/Blog". From there, after agreeing on making the spreadsheet public, you can copy the HTML and paste it in your website.



Here is how the embedded Zoho spreadsheet looks like:



And here's the code:

<iframe src='http://sheet.zoho.com/publish.do?docurl=uQcCx5q7c8%2BexjSstIh0sQ%3D%3D&name=W5%2BmaSCODVz%2BuVm31GQvyw%3D%3D'
frameborder='0' scrolling='no'
style='height:500px;width:600px'>
</iframe>

Embedding powerpoint presentations in your page - Slideshows from Zoho

Zoho launched some time ago the Zoho Show service, allowing creation of web based Powerpoint like presentations. Embedding such a presentation in your page is really simple. Once you logged in your account at Zoho, create your presentation and then go to "Actions" menu and choose embed slideshow. From there, pick up the HTML code and simply paste it in your site.



Here is the code for one sample presentation:

<iframe src="http://show.zoho.com/ViewURL.sas?USER=hanganum&DOC=welcome&IFRAME=yes" height="370" width="480" name="Welcome" scrolling=no frameBorder="0" ></iframe>


And here's how it looks like: