quran · mmahalwy · Jul 3, 2016 · Jun 25, 2016 · Jul 2, 2016
diff --git a/src/components/Share/index.js b/src/components/Share/index.js
@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+const Style = require('./style.scss');
+export default class Share extends Component {
+
+
+  static propTypes = {
+    surah: PropTypes.object.isRequired
+  };
+
+
+  onClickPopup(url, title) {
+    window.open(url, title, 'width=670,height=540,scrollbars=no,toolbar=0');
+  }
+
+  render() {
+
+    const {surahId, name} = this.props.surah;
+    const surahUrl = encodeURIComponent(`http://quran.com/${surahId}`);
+
+    return (
+      <div className={Style.shareContainer}>
+
+        <i
+          onClick={() => this.onClickPopup(`https://www.facebook.com/sharer/sharer.php?u=${surahUrl}`, 'Facebook')}
+          className={`${Style.iconContainer} ${Style.facebook}`}
+          data-metrics-event-name="Share:Facebook"
+          title="Share on Facebook"
+        >
+        </i>
+
+        <i
+          onClick={() => this.onClickPopup(`https://twitter.com/intent/tweet?url=${surahUrl}&text=Surat ${name.simple}`, 'Twitter')}
+          className={`${Style.iconContainer}  ${Style.twitter}`}
+          data-metrics-event-name="Share:Twitter"
+          title="Share on Twitter"
+        >
+        </i>
+
+      </div>
+    );
+  }
+}
diff --git a/src/components/Share/style.scss b/src/components/Share/style.scss
@@ -0,0 +1,34 @@
+.shareContainer {
+  position: relative;
+  bottom: 2px;
+  left: 5px;
+
+  .iconContainer {
+    padding: 0 30px 10px 0;
+  }
+
+  .facebook {
+    background-image: url(../../../static/images/FB-grn.png);
+    background-repeat: no-repeat;
+
+    background-size: 12px;
+    padding-top: 1px;
+
+    &:hover {
+      background-image: url(../../../static/images/FB-beige.png);
+    }
+  }
+
+  .twitter {
+    background-image: url(../../../static/images/Twitter-grn.png);
+    background-repeat: no-repeat;
+    background-size: 21px;
+
+    &:hover {
+      background-image: url(../../../static/images/Twitter-beige.png);
+    }
+  }
+
+}
+
+
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
@@ -24,6 +24,7 @@ import Ayah from 'components/Ayah';
 import Line from 'components/Line';
 import SearchInput from 'components/SearchInput';
 import Bismillah from 'components/Bismillah';
+import Share from 'components/Share';
 
 // utils
 import scroller from 'utils/scroller';
@@ -407,7 +408,7 @@ export default class Surah extends Component {
   }
 
   renderTopOptions() {
-    const { toggleReadingMode, options } = this.props; // eslint-disable-line no-shadow
+    const { toggleReadingMode, options, surah } = this.props; // eslint-disable-line no-shadow
 
     return (
       <Row>
@@ -433,6 +434,9 @@ export default class Surah extends Component {
                 onReadingModeToggle={toggleReadingMode}
               />
             </li>
+            <li>|</li>
+            <li><Share surah={surah}/></li>
+
           </ul>
         </Col>
       </Row>

diff --git a/src/helpers/Html.js b/src/helpers/Html.js
@@ -18,6 +18,9 @@ const Html = ({ store, component, assets }) => {
         {head.script.toComponent()}
         {head.style.toComponent()}
 
+        <script dangerouslySetInnerHTML={{__html: `/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(c){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","quran.zendesk.com");
+        /*]]>*/`}} />
+
         {Object.keys(assets.styles).map((style, i) => (
           <link
             href={assets.styles[style]}

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -54,7 +54,7 @@ $tracker-height-hundred-boolean: false;
 
 $font-family-sans-serif: 'Montserrat', sans-serif;
 $font-montserrat: $font-family-sans-serif;
-
+$font-awesome: 'FontAwesome', serif;
 $icon-font-path: "bootstrap-sass/assets/fonts";
 
 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";