Google +1 button (method to avoid W3C error)

The plus one button of Google (+ 1 button) was put up. However, it becomes an error because of the check on W3C Markup Validation Service. Because the method of evading this was found, I introduce it.

What is the Google plus one button ?

Google started the service of the plus one button. It immediately put it on the web page because it seemed to be good also for the retrieval and SEO. The way is easy. The following script is added at the end of the head tag.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

The following tag is put on position in which it wants to display the plus one button in the body tag next.

<g:plusone></g:plusone>

It check on W3C Markup Validation Service. element "g:plusone" becomes an error named undefined in the part of g:plusone.

Method to avoid error of Google plus one button

Then, it groped for the method of evading this error.

http://code.google.com/intl/ja/apis/+1button/#example-explicit-render

I tried and erred referring to the script that existed in a specified display of the plus one button.

<html>
<head>
<title> + 1 demonstration: Specified display </title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>

<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>

</head>
<body>
<a href="#" onClick="renderPlusone();">Display +1 button</a>
<div id="Plusone-div"></div>
</body>
</html>

Even if this is used as it is, it becomes an error in onclick. It doesn't become an error if it calls it in the body tag with onload without using onclick as follows.

<body onload="renderPlusone();">

However, other onload operation doesn't go well because another has already used onload.

Method of operating two or more Javascript events

Might normally it not operate, and only either operate when two or more JavaScript libraries are used. It is because only the instruction described at the end is executed because this is executed after a browser reads everything to onload of JavaScript.

The method of making the following functions when two or more onload was used and rewriting the description at onload was found.

function addEvent(elm,listener,fn){
	try{
		elm.addEventListener (listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

This seems to become a function that adds the instruction to the event by using the function named addEventListener.

Because addEventListener cannot be used in IE, it seems to substitute it by the function named attachEvent.

Conclusion of method of evading error of plus one button of Google

After all, the following script was described at the end in the head tag.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>

And, the content of the called js file was as follows.

// addEvent
function addEvent(elm,listener,fn){
	try{
		elm.addEventListener (listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

// google plusone
function renderPlusone() {
gapi.plusone.render("plusone-div");
}

addEvent(window,"load",renderPlusone);

The following tag was described in the place where the plus one button in the body tag was displayed.

<div id="plusone-div"> </div>

Even if the plus one button was applied by this, it came to be able to display it also with W3C Markup Validation Service without becoming an error.

Advantage of method of operating two or more Javascript events

Onclick confirmed both IE and Firefox were operated well though it introduced only onload in the method of operating two or more above-mentioned Javascript events.