From c791ebb5db99e32a3c8887fbb3698b7d66613110 Mon Sep 17 00:00:00 2001 From: Williams Isaac Date: Sat, 27 Oct 2018 13:14:08 +0100 Subject: [PATCH] Completed social button integration --- index.html | 23 +++++++++++++++++++- index.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++--- styles.css | 14 +++++++++++++ 3 files changed, 94 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index e6225dc..43ee59d 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ New Tab - Random 48 Laws of Power +
@@ -16,9 +17,29 @@

+
+ + +
+
- + + + + \ No newline at end of file diff --git a/index.js b/index.js index eec8e23..285738e 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,60 @@ +(function(window){ console.log(data); var random = Math.floor(Math.random() * 48); - document.getElementById('id').innerHTML = data[random].name; - document.getElementById('law-title').innerHTML = data[random].title; - document.getElementById('law-desc').innerHTML = data[random].desc; \ No newline at end of file + document.getElementById('id').innerHTML = data[random].name; + document.getElementById('law-title').innerHTML = data[random].title; + document.getElementById('law-desc').innerHTML = data[random].desc; + + window.fbAsyncInit = function () { + FB.init({ + appId : '326214488180876', // App ID + status : false, + version: 'v2.0', + cookie : true, + xfbml : false // parse XFBML + }); + } + document.getElementById('fb-share-dialog').onclick = function() { + var defaultUrl = "https://chrome.google.com/webstore/detail/random-48-laws-of-power/ldmplljofmghhnjapmbabolnigaeimed"; + var fullQuote = getCurrentQuote(); + FB.ui({ + method: 'share', + display: 'popup', + href: defaultUrl, + quote: fullQuote, + }, function(response){ + console.log(response); + }); + } + + document.getElementById('twitter-share-dialog').onclick = function() { + var defaultUrl = "https://chrome.google.com/webstore/detail/random-48-laws-of-power/ldmplljofmghhnjapmbabolnigaeimed"; + var fullQuote = getCurrentQuote('twitter'); + var twitterRedirectUrl = buildTwitterUrlParts(fullQuote, defaultUrl); + window.open(twitterRedirectUrl, '_blank'); + } + + function getCurrentQuote(type){ + var type = type || 'facebook' + document.getElementById('law-desc') + var quoteId = " Law " + document.getElementById('id').textContent; + var lawTitle = " Quote: " + document.getElementById('law-title').textContent; + var lawDescription = "Description: " + document.getElementById('law-desc').textContent; + var fullQuote = quoteId + "\n" + lawTitle ; + // Since twitter only allows 140 Characters Max, it doesn't sense to + // add the description to it. + if (type !== 'twitter') { + fullQuote = fullQuote + "\n" + lawDescription; + } + return fullQuote; + } + + function buildTwitterUrlParts(text, url){ + var baseUrl = "https://twitter.com/intent/tweet?" + var textParam = "text="+text; + var urlParam = "url="+url; + return baseUrl+textParam+"&"+urlParam; + } + +})(window) + diff --git a/styles.css b/styles.css index b52adca..e0cf379 100644 --- a/styles.css +++ b/styles.css @@ -62,4 +62,18 @@ body { #id { font-size: 125px; font-weight: 300; +} + +.social-share-button { + width: 30%; + background-color: #131111; + font-size: 20px; + line-height: 1.5; + border-radius: 10px; + cursor: pointer; +} + +.social-share-button i { + margin-right: 5px; + font-size: 17px; } \ No newline at end of file