Twitter share

_layouts/pun.html

@@ -4,12 +4,47 @@ footer: hidden
 ---
 <main class="pun">
 	<div class="puncontent" style="background: {{ page.background }}; color: {{ page.color }};">
-		{{content}}
+		{{ content }}
 	</div>
 	<div class="share">
-		{% if page.previous %}<a class="btn previous" href="{{ page.previous.url }}"><i class="icon-arrow-left"></i>Prev</a>{% endif %}
-		<a class="btn" href="#facebook"><i class="icon-facebook"></i><span class="hidewhensmall">Facebook</span></a>
-		<a class="btn" href="#twitter"><i class="icon-twitter"></i><span class="hidewhensmall">Twitter</span></a>
-		{% if page.next %}<a class="btn next" href="{{ page.next.url }}"><i class="icon-arrow-right"></i>Next</a>{% endif %}
+		{% if page.previous %}<a class="btn previous" href="{{ page.previous.url }}"><i class="icon-arrow-left"></i><span>Prev</span></a>{% endif %}
+		<a class="btn facebook" href="#facebook"><i class="icon-facebook"></i><span class="hidewhensmall">Facebook</span></a>
+		<a class="btn twitter" href="#twitter"><i class="icon-twitter"></i><span class="hidewhensmall">Twitter</span></a>
+		{% if page.next %}<a class="btn next" href="{{ page.next.url }}"><span>Next</span><i class="icon-arrow-right"></i></a>{% endif %}
 	</div>
-</main>
+</main>
+<script>
+var url = "http://2punny.uni.me" + window.location.pathname;
+var text = encodeURI("{{ content | strip_html }} | " + "Funny? Get more puns on 2punny! |");
+
+document.querySelector(".twitter").addEventListener("click", function (e) {
+	e.preventDefault();
+	window.open("https://twitter.com/share?url=" + url + "&text=" + text + "", "_blank", "height=320,width=480");
+});
+
+document.querySelector(".facebook").addEventListener("click", function (e) {
+	e.preventDefault();
+	FB.ui(
+	 {
+	  method: 'share',
+	  href: url
+	}, function(response){});
+});
+
+  window.fbAsyncInit = function() {
+    FB.init({
+      appId      : '556080077853061',
+      xfbml      : true,
+      version    : 'v2.0'
+    });
+  };
+
+  (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/sdk.js";
+     fjs.parentNode.insertBefore(js, fjs);
+   }(document, 'script', 'facebook-jssdk'));
+
+</script>

index.html

@@ -2,4 +2,12 @@
 layout: page
 title: "hello"
 ---
-We are busy fixing the site up for the best pun-viewing experience. Watch out!
+
+  {% assign post = site.posts.last %}
+  {% assign content = post.content %}
+
+<h1>Ready for puns? </h1>
+
+<p>And cancer? And madness?</p>
+<br />
+<a href="{{ post.url }}" class="btn" style="font-size: 1.2em;">If you dare <i class="icon-arrow-right"></i></a>

styles/main.css

@@ -88,14 +88,14 @@ a:hover, a:focus {
 	font-size: 1.2em;
 	font-family: "Shadows Into Light Two", sans-serif;
 }
-.share .btn * {
+.btn * {
 	vertical-align: bottom;
 }
-.share .btn i {
+.btn i {
 	margin: 0 0.1em;
 }
-.share .btn span {
-	margin-left: 0.3em;
+.btn span {
+	margin: 0 0.3em;
 }
 .btn[href="#facebook"] {
 	border-color: #3b5998 !important;