Add social media share possibility

* Add buttons to make Twitter and Facebook posts about records. * Buttons redirect to Twitter or Facebook with a URL reference to the B2SHARE record. Signed-off-by: Joni Tahvanainen <joni.tahvanainen@csc.fi>
EUDAT-B2SHARE · Aug 31, 2022 · fe6515d · fe6515d
1 parent cc3730b
commit fe6515d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/webui/app/css/app.css b/webui/app/css/app.css
@@ -349,6 +349,13 @@ input:focus, select:focus, textarea:focus, button:focus, a:focus {
 
 /* route */
 
+.SocialMediaShareButton {
+  width: 36px;
+  display: inline-flex;
+  margin-right: 0px;
+  height: 32px;
+}
+
 .route-appear {
   opacity: 0.01;
   transition: opacity .1s;

diff --git a/webui/package.json b/webui/package.json
@@ -52,6 +52,7 @@
     "react-bootstrap": "^0.31.3",
     "react-dom": "^15.7.0",
     "react-piwik": "^1.11.0",
+    "react-share": "^2.4.0",
     "react-router": "^2.1.1",
     "react-toggle": "^2.2.0",
     "react-widgets": "^3.2.4",

diff --git a/webui/src/components/record.jsx b/webui/src/components/record.jsx
@@ -15,6 +15,7 @@ import { Versions } from './versions.jsx';
 import { getSchemaOrderedMajorAndMinorFields } from './schema.jsx';
 import { Card } from 'react-bootstrap';
 import PiwikTracker from 'piwik-react-router';
+import { TwitterShareButton, TwitterIcon, FacebookShareButton, FacebookIcon} from 'react-share';
 
 const PT = React.PropTypes;
 
@@ -381,6 +382,34 @@ const Record = React.createClass({
         'community', 'titles', 'descriptions', 'creators', 'keywords', 'disciplines', 'publication_state'
     ],
 
+    renderShareButtons(doi){
+        const record = this.props.record.toJS ? this.props.record.toJS() : this.props.record;
+        const title = record.metadata.titles[0].title || "";
+        return(
+                <div>
+                <span>
+                <TwitterShareButton
+                    title={title}
+                    url={doi}
+                    windowWidth={800}
+                    windowHeight={800}
+                    style={{cursor: "pointer"}}
+                    ><TwitterIcon size={32} round/>
+                </TwitterShareButton> 
+                </span>
+                <span>
+                <FacebookShareButton
+                    quote={title}
+                    url={doi}
+                    windowWidth={800}
+                    windowHeight={800}
+                    style={{cursor: "pointer"}}
+                    ><FacebookIcon size={32} round/>
+                </FacebookShareButton>
+                </span>
+                </div>
+        )
+    }, 
 
     renderCitations(doi) {
 
@@ -414,6 +443,16 @@ const Record = React.createClass({
             }
             return (
                 <div className="well">
+                <div className="row">
+                    <h3 className="col-sm-9">
+                        { 'Share' }
+                    </h3>
+                </div>
+                <div className="row">
+                    <div className="col-sm-9">
+                        {this.renderShareButtons(doi)}
+                    </div>
+                </div>
                 <div className="row">
                     <h3 className="col-sm-9">
                         { 'Cite as' }