Enable Facebook comments on blog posts ()

* Enable comment on blog post

* adjust css

* Tweak
This commit is contained in:
Endilie Yacop Sucipto 2018-05-20 00:26:57 +08:00 committed by Yangshun Tay
parent 24da6bfba0
commit aae106c018
4 changed files with 100 additions and 73 deletions

View file

@ -16,46 +16,66 @@ class BlogPostLayout extends React.Component {
renderSocialButtons() {
const post = this.props.metadata;
const fbLike = this.props.config.facebookAppId ? (
<div
className="fb-like"
data-layout="standard"
data-share="true"
data-width="225"
data-show-faces="false"
/>
) : null;
const fbComment = this.props.config.facebookAppId &&
this.props.config.facebookComments && (
<div className="blogSocialSectionItem">
<div
className="fb-comments"
data-href={
this.props.config.url +
this.props.config.baseUrl +
'blog/' +
post.path
}
data-width="100%"
data-numposts="5"
data-order-by="time"
/>
</div>
);
const twitterShare = this.props.config.twitter ? (
<a
href="https://twitter.com/share"
className="twitter-share-button"
data-text={post.title}
data-url={
this.props.config.url +
this.props.config.baseUrl +
'blog/' +
post.path
}
data-related={this.props.config.twitter}
data-via={post.authorTwitter}
data-show-count="false">
Tweet
</a>
) : null;
const fbLike = this.props.config.facebookAppId && (
<div className="blogSocialSectionItem">
<div
className="fb-like"
data-href={
this.props.config.url +
this.props.config.baseUrl +
'blog/' +
post.path
}
data-layout="standard"
data-share="true"
data-width="225"
data-show-faces="false"
/>
</div>
);
if (!fbLike && !twitterShare) {
return;
}
const twitterShare = this.props.config.twitter && (
<div className="blogSocialSectionItem">
<a
href="https://twitter.com/share"
className="twitter-share-button"
data-text={post.title}
data-url={
this.props.config.url +
this.props.config.baseUrl +
'blog/' +
post.path
}
data-related={this.props.config.twitter}
data-via={post.authorTwitter}
data-show-count="false"
/>
</div>
);
return (
<div>
<aside className="entry-share">
<div className="social-buttons">
{fbLike}
{twitterShare}
</div>
</aside>
<div className="blogSocialSection">
{twitterShare}
{fbLike}
{fbComment}
</div>
);
}