new Embed stuff in your pages: Hacking Blogger widgets - embedding Newsreel outside Blogger
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'));

1 comment:

Nisse said...

Hi,
thanks for de 'hack'. I have 'embed' it in my WP-blog.

blogg.ngn.nu.

I wrote a WP PlugIn and Your code as a template.

It seems that the best idea is to have a accont on blogger (blogspot) and aktivate a blog and then aktivate the widget.

Then You get access to code that is adapted for just you. (I think?) I do so.

If there is another blog URL and that blog die. Then Your news 'die'. I'm I right?

Very well, thanks!