Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add share buttons for Twitter and Facebook

  • Loading branch information...
commit b96ca0be3c32a833806005ca25cdd59f5157bdfb 1 parent bcb808a
@NielsLeenheer NielsLeenheer authored
Showing with 150 additions and 3 deletions.
  1. +81 −1 css/main.css
  2. +69 −2 index.html
View
82 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 {
View
71 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 @@
<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 @@
+ 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 @@
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');
Please sign in to comment.
Something went wrong with that request. Please try again.