|
import React from 'react' |
|
import classNames from 'classnames' |
|
|
|
export default class SocialButtons extends React.Component { |
|
|
|
componentWillMount() { |
|
this.setupTwitter() |
|
this.setupFacebook() |
|
} |
|
|
|
setupTwitter() { |
|
|
|
return window.twttr = (function (d, s, id) { |
|
let js = undefined; |
|
let fjs = d.getElementsByTagName(s)[0]; |
|
let t = window.twttr || {}; |
|
if (d.getElementById(id)) { |
|
return t; |
|
} |
|
js = d.createElement(s); |
|
js.id = id; |
|
js.src = 'https://platform.twitter.com/widgets.js'; |
|
fjs.parentNode.insertBefore(js, fjs); |
|
t._e = []; |
|
|
|
t.ready = function (f) { |
|
t._e.push(f); |
|
}; |
|
|
|
return t; |
|
})(document, 'script', 'twitter-wjs'); |
|
} |
|
|
|
setupFacebook() { |
|
return (function (d, s, id) { |
|
let js = undefined; |
|
let 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#xfbml=1&version=v2.6'; |
|
fjs.parentNode.insertBefore(js, fjs); |
|
})(document, 'script', 'facebook-jssdk'); |
|
} |
|
|
|
render() { |
|
|
|
let tweetText = 'Check out www.gifstudio.me by @infiniteloopco'; |
|
let shareText = 'This gif was made with www.gifstudio.me by @infiniteloopco'; |
|
let hashtags = 'gifstudio, infiniteloopco'; |
|
|
|
let hidden = classNames({ |
|
'hidden': this.props.snapping || (this.props.count < 4) |
|
}) |
|
|
|
let shareBtn = classNames({ |
|
'hidden': !this.props.linkCreated |
|
}) |
|
|
|
let tweetBtn = classNames({ |
|
'hidden': this.props.linkCreated || this.props.snapping || (this.props.count < 4) |
|
}) |
|
|
|
return( |
|
<div className={hidden}> |
|
|
|
<a className={`tweet-btn action-btn btn ${shareBtn}`} |
|
href={`https://twitter.com/intent/tweet?text=${shareText}&hashtags=${hashtags}&url=${window.location.href}`}> |
|
<i className="fa fa-twitter"/> |
|
<span className="text">Tweet</span> |
|
</a> |
|
|
|
<a className={`tweet-btn action-btn btn ${tweetBtn}`} |
|
href={`https://twitter.com/intent/tweet?text=${tweetText}&hashtags=${hashtags}&url=https://www.gifstudio.me`}> |
|
<i className="fa fa-twitter"/> |
|
<span className="text">Tweet</span> |
|
</a> |
|
|
|
<div |
|
className="facebook-btn action-btn btn" |
|
data-href="https://www.gifstudio.me" |
|
data-layout="link" |
|
data-mobile-iframe="true" |
|
> |
|
<i className="fa fa-facebook"/> |
|
<a |
|
className="fb-xfbml-parse-ignore" |
|
target="_blank" |
|
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.gifstudio.me%2F&src=sdkpreparse" |
|
> |
|
<span className="text">Share</span> |
|
</a> |
|
</div> |
|
|
|
</div> |
|
) |
|
} |
|
} |
|
|
|
SocialButtons.propTypes = { |
|
snapping: React.PropTypes.bool, |
|
count: React.PropTypes.number, |
|
linkCreated: React.PropTypes.bool |
|
} |
