I already undertook three attemps (attempt 1, attempt 2 and attempt 3) to include a Google Sheet into a blogger post without much succes. I almost surrendered but I got a new idea. I started from the proposal I found in "Insert HTML page into another HTML page" that basically proposed the following code:
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
The above code is very good for direct inclusion into a HTML page, but Blogger filters out the conditionals for selecting the code based upon the user agent. So it's not the solution we're seeking for. But then I got another idea. Maybe I could insert the above code using Javascript that IS allowed to be inserted in Bloggers HTML. In that way, it's possible to circumvent the restriction in Blogger HTML. I pasted the code into a HTMl-to-Javascript convertor. This gave me:
<script language="JavaScript" type="text/javascript">
<!--
function writeJS(){
var url = 'http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true';
var str='';
str+='<!--[if IE]>';
str+='<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="'+url+'">';
str+='<p>backup content<\/p>';
str+='<\/object>';
str+='<![endif]-->';
str+=' <!--[if !IE]> <-->';
str+='<object type="text\/html" data="'+url+'">';
str+='<p>backup content<\/p>';
str+='<\/object>';
str+='<!--> <![endif]-->';
document.write(str);
}
writeJS();
//-->
</script>
that renders as:
Above code reders nicely in Firefox and Safari but not in Interet Explorer 6.
Therefore I changed the code such that in IE an iframe is displayed and otherwise an object. The code was put into javascript:
<script language="javaScript" type="text/javascript" src="http://lode.nachtergaele.googlepages.com/includeHTML3.js">
</script>
and on IE6 it renders to:
So finally, we start to view some light:
- First, include into blogger a Javascript:
<script language="JavaScript" src="http://lode.nachtergaele.googlepages.com/includeHTML3.js" type="text/javascript" ></script> - Put in the Javascript file the following Javascript code:
<!--
function writeJS(){
var str='';
str+='<!--[if IE]>';
str+=' <iframe src="http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true" width='550' height='370' frameborder='0'>';
str+='<p>backup content</p>';
str+='</iframe>';
str+='<![endif]-->';
str+='<!--[if !IE]> <-->';
str+=' <object type="text/html" data="http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true" width='550' height='370' frameborder='0'>';
str+=' <p>backup content</p>';
str+=' </object>';
str+='<!--> <![endif]-->';
document.write(str);
}
writeJS();
//--> - Alternatively, Javascript can detect the user agent as well. This leads to the following code:
<!--
function writeJS(){
var str='';
if (navigator.appName.indexOf("Microsoft") != -1) {
str+=" <iframe src='http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true' width='550' height='370' frameborder='0'>";
str+='<p>backup content</p>';
str+='</iframe>';
} else {
str+=" <object type='text/html' data='http://spreadsheets.google.com/pub?key=pzcvT0aLrnhuxklkh_C8AVA&output=html&gid=0&single=true&widget=true' width='550' height='370' frameborder='0'>";
str+=' <p>backup content</p>';
str+=' </object>';
}
document.write(str);
}
writeJS();
//--> - And that wil do the trick. The Javascript code generates HTML code that includes an Iframe if viewed by Internet Explorer and an object for other browsers. I agree that this is maybe a big detour just to able to include an object. And hopefully it shows up in the feed readers....
In 50 ways to include HTML into a Blogger post an overview is given of all kinds of techniques and can be used for testing.
Posts
