Add share buttons for Twitter and Facebook

css/main.css

@@ -207,7 +207,58 @@ body {
 
 
 
+#share {
+	position: absolute;
+	top: -10px;
+	right: -164px;
+	
+	background: #f0f0f0;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	
+	-webkit-box-shadow: 0px 0px 5px #222;
+	-moz-box-shadow: 0px 0px 5px #222;
+	-ms-box-shadow: 0px 0px 5px #222;
+	-o-box-shadow: 0px 0px 5px #222;
+	box-shadow: 0px 0px 5px #222;
 
+	width: 140px;
+	height: 84px;	
+	opacity: 0.7;
+	z-index: 10;
+
+	-webkit-transition: opacity ease-in 0.2s;
+	-moz-transition: opacity ease-in 0.2s;
+	-ms-transition: opacity ease-in 0.2s;
+	-o-transition: opacity ease-in 0.2s;
+	transition: opacity ease-in 0.2s;
+}
+#share:hover {
+	opacity: 1;
+}
+#share::after {
+	position: absolute;
+	top: 15px;
+	left: -10px;
+	content: '';
+	display: block;
+	width: 0;
+	height: 0;
+	border-right: 10px solid #f0f0f0;
+	border-top: 10px solid transparent;
+	border-bottom: 10px solid transparent;
+}
+#share #twitter {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+}
+#share #facebook {
+	position: absolute;
+	top: 10px;
+	left: 76px;
+}
 
 
 .page {
@@ -236,7 +287,7 @@ body {
 
 #explaination {
 	width: 200px;
-	margin: 60px 0 40px 20px;
+	margin: 100px 0 40px 20px;
 }
 #explaination p {
 	margin: 1em 0;
@@ -1278,6 +1329,35 @@ body {
 	.resultsTable table thead td span.bonus span {
 		display: none;
 	}
+	
+	#share {
+		position: relative;
+		right: auto;
+		top: auto;
+		
+		width: 100%;
+		opacity: 1;
+		margin: -10px 0 20px;
+	}
+	#share::after {
+		top: -8px;
+		left: 50%;;
+		right: auto;
+		margin: 0 0 0 -10px;
+
+		border-top: none;
+		border-left: 10px solid transparent;
+		border-right: 10px solid transparent;
+		border-bottom: 10px solid #f0f0f0;
+	}
+	#share #twitter {
+		right: 53%;
+		left: auto;
+	}
+	#share #facebook {
+		left: 53%;
+		right: auto;
+	}
 }
 @media (max-width: 360px) {
 	.header h1 {

index.html

@@ -23,6 +23,13 @@
 		<link rel="icon" href="/images/icon.png">
 		<link rel="apple-touch-icon" href="/images/button.png">
 		
+		<meta property="og:title" content="The HTML5 test - How well does your browser support HTML5?" />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="http://html5test.com" />
+		<meta property="og:image" content="http://html5test.com/images/button.png" />
+		<meta property="og:site_name" content="HTML5test.com" />
+		<meta property="fb:admins" content="1087142132" />
+
 		<style>
 		<!-- 		
 
@@ -78,6 +85,8 @@
 		</script>
 		<!-- End BuySellAds.com Ad Code -->
 
+		<div id="fb-root"></div>
+
 		<div class='header'>
 			<h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h1>
 			<ul>
@@ -91,11 +100,13 @@ <h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h
 		
 		<div class='page'>
 			<div class='column'>
+				<!--
 				<div class='updated'>
 					Updated!
 					<span>3 April 2012</span>
 				</div>
-			
+				-->
+				
 				<noscript>
 					<h2>
 						To view the results of your browser you need to enable Javascript!
@@ -259,6 +270,56 @@ <h2>
 
 
 
+			var Share = function() { this.initialize.apply(this, arguments) };
+			Share.prototype = {
+				initialize: function(parent, options) {
+					var that = this;
+
+					this.parent = parent;
+					this.options = options;
+					
+					this.parent.innerHTML +=
+						"<div id='share' style='opacity:0'>" +
+						"<div id='twitter'>" +
+						"<a href='https://twitter.com/share' class='twitter-share-button' " +
+							"data-url='http://html5test.com' " +
+							"data-related='rakaz' " +
+							"data-text='" + this.options.browser + " scored " + this.options.score + "+" + this.options.bonus + " points. How well does your browser support HTML5?' " + 
+							"data-lang='en' "+
+							"data-count='vertical'"+
+							">Tweet</a>" +
+						"</div>" +
+
+						"<div id='facebook'>" +
+						"<div class='fb-like' " +
+							"data-href='http://html5test.com' " + 
+							"data-send='false' " + 
+							"data-layout='box_count' " +
+							"data-width='60' " +
+							"data-show-faces='false'" +
+							"></div>" +
+						"</div>" +
+						"</div>";
+						
+					window.setTimeout(function() {
+						var e = document.getElementById('share');
+						e.style.opacity = '';
+					}, 1000);
+				
+					!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
+					{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
+					(document,"script","twitter-wjs");
+
+					(function(d, s, id) {
+					  var js, fjs = d.getElementsByTagName(s)[0];
+					  if (d.getElementById(id)) return;
+					  js = d.createElement(s); js.id = id;
+					  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=202643099847776";
+					  fjs.parentNode.insertBefore(js, fjs);
+					}(document, 'script', 'facebook-jssdk'));
+				}
+			}
+
 
 			Browsers = new UserAgents(navigator.userAgent, {
 				useFeatures:		true,
@@ -281,11 +342,17 @@ <h2>
 				var total = document.getElementById('total');
 				total.innerHTML = r.maximum;
 				
+				new Share(results, {
+					score: 		r.score,
+					bonus: 		r.bonus,
+					browser:	Browsers.toString()
+				});
+				
 				/* Show box for confirming useragent detection */
 				new Confirm(results, {
 					onConfirm:	function() { submit('confirm', '{"uniqueid": "' + r.uniqueid + '"}'); },
 					onReport:	function() { submit('report', '{"uniqueid": "' + r.uniqueid + '"}'); }
-				})
+				});
 				
 				/* Show detailed report of scores */
 				var div = document.createElement('div');