Add Twitter button

js/components/ascribe_detail/media_container.js

@@ -8,6 +8,7 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import MediaPlayer from './../ascribe_media/media_player';
 
 import FacebookShareButton from '../ascribe_social_share/facebook_share_button';
+import TwitterShareButton from '../ascribe_social_share/twitter_share_button';
 
 import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
@@ -98,6 +99,7 @@ let MediaContainer = React.createClass({
                         </Button>
                     </AclProxy>
                     <FacebookShareButton />
+                    <TwitterShareButton />
                     {embed}
                 </p>
             </div>

js/components/ascribe_social_share/facebook_share_button.js

@@ -40,8 +40,7 @@ let FacebookShareButton = React.createClass({
         return (
             <span
                 ref="fbShareButton"
-                style={{width: '56px', height: '24px'}}
+                className="fb-share-button btn btn-ascribe-social"
-                className="fb-share-button btn btn-xs"
                 data-href={this.props.url}
                 data-layout={this.props.type}>
            </span>

js/components/ascribe_social_share/twitter_share_button.js

@@ -0,0 +1,54 @@
+'use strict';
+
+import React from 'react';
+
+import AppConstants from '../../constants/application_constants';
+
+import { InjectInHeadUtils } from '../../utils/inject_utils';
+
+let TwitterShareButton = React.createClass({
+    propTypes: {
+        count: React.PropTypes.string,
+        counturl: React.PropTypes.string,
+        hashtags: React.PropTypes.string,
+        size: React.PropTypes.string,
+        text: React.PropTypes.string,
+        url: React.PropTypes.string,
+        via: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            count: 'none'
+        };
+    },
+
+    componentDidMount() {
+        InjectInHeadUtils.inject(AppConstants.twitter.sdkUrl).then(this.loadTwitterButton);
+    },
+
+    loadTwitterButton() {
+        const { count, counturl, hashtags, size, text, url, via } = this.props;
+
+        twttr.widgets.createShareButton(url, this.refs.twitterShareButton.getDOMNode(), {
+            count,
+            counturl,
+            hashtags,
+            size,
+            text,
+            via,
+            dnt: true   // Do not track
+        });
+    },
+
+    render() {
+        return (
+            <span
+                ref="twitterShareButton"
+                className="btn btn-ascribe-social">
+            </span>
+        );
+    }
+});
+
+export default TwitterShareButton;

js/constants/application_constants.js

@@ -79,6 +79,9 @@ let constants = {
         'appId': '420813844732240',
         'sdkUrl': '//connect.facebook.net/en_US/sdk.js'
     },
+    'twitter': {
+        'sdkUrl': 'https://platform.twitter.com/widgets.js'
+    },
     'copyrightAssociations': ['ARS', 'DACS', 'Bildkunst', 'Pictoright', 'SODRAC', 'Copyright Agency/Viscopy', 'SAVA',
         'Bildrecht GmbH', 'SABAM', 'AUTVIS', 'CREAIMAGEN', 'SONECA', 'Copydan', 'EAU', 'Kuvasto', 'GCA', 'HUNGART',
         'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',

sass/ascribe_social_share.scss

@@ -0,0 +1,7 @@
+.btn-ascribe-social {
+    height: 20px;
+    width: 56px;
+    box-sizing: content-box;   /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */
+    margin-left: 5px;
+    padding: 1px 0;
+}

sass/main.scss

@@ -31,6 +31,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'offset_right';
 @import 'ascribe_settings';
 @import 'ascribe_slides_container';
+@import 'ascribe_social_share';
 @import 'ascribe_property';
 @import 'ascribe_form';
 @import 'ascribe_panel';