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.htmUpdate2: 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.comvar 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'));
