new Embed stuff in your pages: blogger
Add to Technorati Favorites
Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

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!