new Embed stuff in your pages: 2007
Add to Technorati Favorites

Tuesday, May 8, 2007

Embed documents from Scribd

The overhauled Scribd (as GigaOM puts it) is something close to YouTube for documents. It's really easy to embed a document in your pages using Scribd.

Take a look at how the following document looks like embedded in a page:

Similar to YouTube, Scribd uses flash as base technology for rendering documents. Here's how the embedded code looks like:
<object width="500" height="200"><param name="allowScriptAccess" value="SameDomain" /><param name="movie" value="" /><embed width="500" height="200" src="" type="application/x-shockwave-flash"></embed> </object>

Getting the code is again as simple as YouTube:

Friday, April 13, 2007

Track statistics for your website using SiteMeter

Sitemeter is a fair web analytics tool. Not as cool as Google Analytics, but it does provide things like public statistics where users can see the number of visitors for your website. They actually started as a web counter, migrating towards a web analytics tool afterwards.

If you wish to track number of visitors for your website and make it public, as well as use other services of SiteMeter (keep in mind this is not a review of SiteMeter), here's what you have to do.

First, create an account. Second, customize your SiteMeter tracker. You can choose between 6 types of logos. And finally, copy the Javascript code they provide and paste it in your website. They provide a nice set of instructions on how to paste their Javascript code in various public blogging platforms or web hosting services.

You can check how SiteMeter logo looks on this page by scrolling down.

Thursday, April 12, 2007

Embed Recent Readers widget from MyBlogLog

MyBlogLog provides some nice services for bloggers, like the list of recent readers you often see in some sites. I'm not particularly a big fan of MyBlogLog especially due to the design of their website, but for those who wish to join this community, here's how you can do it:

First of all, you need to have an account on MyBlogLog. After creating an account, go to My Home page inside your account and look for a button called Get widgets (which is actually only one widget right now).

In the next step you can customize (to some degree) your Recent Readers widget. When I say "to some degree" I mean you can choose colors only from a palette. There's no free text color entry (I needed a special color for integrating the widget inside this website).

Next, you have to copy the tracking script from the bottom of the page inside your HTML template for your blog.

And finally, you can take the code for the widget and again put it somewhere inside your HTML template. Here's how the code looks like:

<script type="text/javascript"

Check out how it looks by scrolling down this page and look for the widget in the right part.

That's it!

Thursday, April 5, 2007

Embed Amazon wishlist widget on your site

The guys at ProgrammableWeb mention the Amazon wishlist widget. If you wish to personalize your page and add your book preferences, this one may help you.

Although the original page gives you the option of embedding the widget only in Google pages, you can extract the script and embed it in sites other than Google.

Here's how the embedded widget looks like:

And here's the source code:

<script src=""></script>

Embed google spreadsheets in your website

Google Docs and Spreadsheets provides a lot of sharing options for your spreadsheets. In this page, they explain how you can embed your spreadsheet inside your website.

Here's how a sample spreadsheet looks like:

And here's the generated code:
<iframe width='500' height='' frameborder='0'src=''></iframe>

They also provide a lot of different other options for embedding:

Embed videos from Godtube, the christian video sharing website

Techcrunch blogs about GodTube, a video sharing website for christians. As any serious video sharing website, you can embed videos from GodTube:

Tuesday, April 3, 2007

Embedding slideshows created with Picasa Web Album

Picasa is a great tool allowing you amongst others, integration of slideshow previews. Unfortunately, they don't provide also a single piece of HTML code that you could easily copy and embed it in your site.

What you can do after creating your album, is to embed the link to the page that displays the slideshow in an iframe, as presented below:

Here's how the embedded slideshow looks like:

To get the link, simply right on the Slideshow button in Picasa and press Copy link location (in Firefox).

Here's the HTML code for the embedded slideshow:

<iframe style="float:right;" height="500" width="250" src=""></iframe>

There are a lot of limitations to this slideshow. There's nothing you can customize and the width/height can't be too small (you need to set the width to at least 450 pixels). Also, you can't control the way the users will see the slideshow - the speed, the effects, etc.

However, if you wish to quickly create a slideshow of your favorites pictures, this might be a reasonable way to do it.

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.

.my-own-widget {
border:1px solid green;
font: 10px Arial;
padding: 4px;
<script type="text/javascript" src=""></script>
<script type='text/javascript'>
_WidgetManager._Init('', '','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'));

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

Update: a test page has been uploaded at

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

var expression = "blog";
_WidgetManager._Init('', '','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){$ = "0px";$ = "0px";$ = "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: 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 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=""></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="" 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=''
frameborder='0' scrolling='no'

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="" height="370" width="480" name="Welcome" scrolling=no frameBorder="0" ></iframe>

And here's how it looks like:

Embed images in your website using Webshots

Webshots allows you to embed photos in your website. Just click on the image and you'll find underneath the image, the rightmost link called "Publish photos". From there, you can pick the text underneath the entry called "post in your blog or website"

Here's how the code looks like:

<a href=""><img src="" alt="Colosseum at night, Rome"></a>

And here's the embedded image:
Colosseum at night, Rome

Wednesday, March 28, 2007

Embed DailyMotion videos in your website

DailyMotion - another great video sharing site. Embedding videos from DailyMotion is just as simple as YouTube. Underneath the video you'll find the "Embeddable Player" entry from which you can copy and then paste on your site the HTML code for that video.

<div><object width="425" height="335"><param name="movie" value=""></param><param name="allowfullscreen" value="true"></param><embed src="" type="application/x-shockwave-flash" width="425" height="335" allowfullscreen="true"></embed></object><br /><b><a href="">BURN_web</a></b><br /><i>Uploaded by <a href="">rescuescg619</a></i></div>

And here's the embedded video:

You can customize too the width/height of the video.

Embed videos from Metacafe

Looking to embed videos from Metacafe? Here's how: on the page of the video on Metacafe, look underneath the video for the "Blog/Embed player".

Here's how the code looks like:

<embed src="" width="400" height="345" wmode="transparent" pluginspage="" type="application/x-shockwave-flash"></embed><br><font size = 1><a href="">Amazing Dance</a> - <a href=''>The best bloopers are here</a></font>

And here's the embedded videos:

Talking Cats - Click here for this week’s top video clips

You can customize the width and height of the video. They even feature a nice option of having your blog name listed on the page of that videoclip. "By embedding this video, you can have your blog listed on this page. Click here to see how.Place this video in your website or blog. Works on: MySpace, Blogger, Xanga, Friendster and many more".

Embedding videos in your blog - YouTube

Everyone knows how to embed YouTube videos in their website. We're taking a quick look today at how it's done.

Basically, for each video you found on YouTube for which you want to embed it in your blog or your website, look for the "Embed" entry in the right part of the video. There you'll find a string similar to

<object width="425" height="350"><param name="movie" value=""></param><param name="wmode" value="transparent"></param><embed src="" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

and this is how it looks in your website:

Note you can change the size of the video accordingly. Just replace the width and height attributes in the HTML code above. Here's a smaller version:

Embed flash games in your site

Embedding flash games in your site is just as simple as embedding youtube videos. Take the absolute location of the swf file and write the following code, making sure that the src attribute for the embed tag is replaced with the URL to the swf file.

Here's the code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,0,0" width="400" height="300">
<param name=movie value="week13/images/copter.swf">
<param name=quality value=high>
<embed src="" quality=high pluginspage="" type="application/x-shockwave-flash" width="400" height="300">


And here's how the game looks like. Give it a try!

Embed custom widgets from allows embedding of custom created widget in your pages. Here's how the embedded widget looks like:

The code for embedding is here:

<embed src='' type='application/x-shockwave-flash' FlashVars='subString=folderId=konguisj9s,color=000000,title=My shared files' scale='noscale' wmode='transparent' width='289' height='258'></embed>

The widget is REALLY cool - anyone can see a list of pictures/videos you may want to share. It has specific integration tips for blogger, wordpress and a few others. What's really cool is that you can upload files within the widget itself. You don't need to visit their website to upload new photos. It's that simple!

  • it comes only in 3 colors
  • no HTML alternative - only Flash

Embed google reader in your blog or your homepage

Google Reader is my favorite news reader. You can embed the news in your page either by importing the shared items in your page. Here's how it looks:

and here is the code for it:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="'green'%2Ct%3A'Shared%20items'%2Cs%3A'false'%7D)%3Bnew%20GRC"></script>

You simply go to the "Shared items" sections in google reader and follow the link in the section "Put a clip on your site or blog".

Note: if you use Blogger, it's even easier to embed.

Cons: you can't change the coloring, which makes the visual integration difficult. The green color they's displaying around the news it's probably one of the least used colors, so if your theme has a black background, you'll end up with a small stain on your beautiful blog.

Embed Visual DNA in your page have created a cool people profiler.

Here's how you can embed it in your blog: just paste the following code in your page:

<embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false" src="" quality="best" bgcolor="#000000" width="340" height="240" name="widget" align="middle" type="application/x-shockwave-flash" pluginspage="" flashvars="bgcolor=#000000&i1= BUG&funlabel=CONQUEROR&habitslabel=NEW WAVE PURITAN&uid=408756-8b07&srv=iwebhd3" ></embed> <div style="text-align:center; width:340px;height:25px;margin-top:0px; border-top:1px solid rgb(150,150,150);background-color:rgb(0,0,0);padding:5px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="" style="color:rgb(255,255,255)">Read my VisualDNA</a><span style="font-size:10px;color:#cccccc">™</span> <a href="" style="color:rgb(255,255,255) ">Get your own VisualDNA™</a></div>

and here's the output: