Google +1 button: how do they do it?

Question

While studying the Google +1 button, I found two odd things about the code they supply:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'en-GB'} </script> <g:plusone size="tall" href="http://www.google.com"></g:plusone> 

So, I have two questions:
First and foremost: Second: Is the <g:plusone ... HTML syntax valid? What is this called?

Answer 1

How can Google use text between script tags?

Items

<script> clearly visible in the DOM:

 <script type="text/javascript">//FIRST SCRIPT BLOCK</script> <script type="text/javascript"> var s= document.getElementsByTagName('script')[0]; alert(s.textContent); // "//FIRST SCRIPT BLOCK" </script> 

The Google sneaky trick is to put content in a <script> that has an external src . In this case, src overrides the contents inside the block and instead runs an external script, but the contents of the <script> element are still read through the DOM, even if they do nothing.

Is the syntax <g:plusone ... HTML valid? What is this called?

No. If they made their own doctype for HTML + plusone, that might be fair, but it is not true for HTML, and it's not even a namespace well-formed in an XHTML document unless you add extra xmlns:g for it too .

Answer 2

Is the <g:plusone ... HTML syntax valid?

No

What is this called?

Invalid psuedo namespaces

Answer 3

The first trick is interesting. This seems like a creative way to pass “global” arguments from page layout to external scripts. There are ways to find the <script> element that runs the current code, and I would not be surprised if the internal text of this <script> element from the DOM were available, although the browser ignores it.

In your question, this template allows each external client side of the script to use (at least) its own localization parameters, and also allows the server code to display this parameter as a side effect of rendering the <script> the element itself. This is impressive.

The second trick, I'm not so sure. Basically, I think most browsers see an element named <g:plusone> as unknown or even invalid, so they should display its contents, but it won’t do anything, of course, since this element is empty to start with.

However, client code may still be able to map an item to a namespace using DOM navigation and replace it with its own generated content.

Answer 4

• Maybe it's JSON and they access it through the DOM
• This is XHTML valid