Enhance footer with Facebook and Twitter buttons (#666)

* enhance footer with social media buttons * Update api-site-config.md * Update Footer.js * fix minor issue on social-footer * update facebookAppId description in api-site-config * rm heading & pad footer social button * Update api-site-config.md
facebook · May 18, 2018 · f8521c2 · f8521c2
1 parent f9a0907
commit f8521c2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 25 deletions.
diff --git a/docs/api-site-config.md b/docs/api-site-config.md
@@ -93,7 +93,7 @@ customDocsPath: 'website-docs'
 
 `editUrl` - url for editing docs, usage example: `editUrl + 'en/doc1.md'`. If this field is omitted, there will be no "Edit this Doc" button for each document.
 
-`facebookAppId` - If you want Facebook Like/Share buttons at the bottom of your blog posts, provide a [Facebook application id](https://www.facebook.com/help/audiencenetwork/804209223039296), and the buttons will show up on all blog posts.
+`facebookAppId` - If you want Facebook Like/Share buttons in the footer and at the bottom of your blog posts, provide a [Facebook application id](https://www.facebook.com/help/audiencenetwork/804209223039296).
 
 `facebookPixelId` - [Facebook Pixel](https://www.facebook.com/business/a/facebook-pixel) ID to track page views.
 
@@ -154,6 +154,8 @@ h1 {
 
 `twitter` - Set this to `true` if you want a Twitter social button to appear at the bottom of your blog posts.
 
+`twitterUsername` - If you want a Twitter follow button at the bottom of your page, provide a Twitter username to follow. For example: `docusaurus`.
+
 `twitterImage` - Local path to your Twitter card image (e.g., `img/myImage.png`). This image will show up on the Twitter card when your site is shared on Twitter.
 
 `useEnglishUrl` - If you do not have [translations](guides-translation.md) enabled (e.g., by having a `languages.js` file), but still want a link of the form `/docs/en/doc.html` (with the `en`), set this to `true`.
@@ -231,6 +233,7 @@ const siteConfig = {
   facebookAppId: '1615782811974223',
   facebookPixelId: '352490515235776',
   twitter: 'true',
+  twitterUsername: 'docusaurus',
   twitterImage: 'img/docusaurus.png',
   ogImage: 'img/docusaurus.png',
 };

diff --git a/lib/core/Site.js b/lib/core/Site.js
@@ -113,7 +113,7 @@ class Site extends React.Component {
               }}
             />
           )}
-          {this.props.config.twitter && (
+          {(this.props.config.twitter || this.props.config.twitterUsername) && (
             <script
               dangerouslySetInnerHTML={{
                 __html: `window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],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'));`,

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -1826,6 +1826,10 @@ footer .copyright {
   text-align: center;
 }
 
+footer .social {
+  padding: 5px 0;
+}
+
 .entry-share {
   padding: 36px 0;
   display: block;

diff --git a/website/core/Footer.js b/website/core/Footer.js
@@ -8,21 +8,49 @@ const PropTypes = require('prop-types');
 
 const React = require('react');
 
-const GitHubButton = props => (
-  <a
-    className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
-    href={`https://github.com/${props.config.organizationName}/${props.config.projectName}`}
-    data-icon="octicon-star"
-    data-count-href={`/${props.config.organizationName}/${props.config.projectName}/stargazers`}
-    data-show-count="true"
-    data-count-aria-label="# stargazers on GitHub"
-    aria-label="Star this project on GitHub"
-  >
-    Star
-  </a>
+const SocialFooter = props => (
+  <div>
+    <h5>More</h5>
+    <div className="social">
+      <a
+        className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
+        href={`https://github.com/${props.config.organizationName}/${
+          props.config.projectName
+        }`}
+        data-count-href={`/${props.config.organizationName}/${
+          props.config.projectName
+        }/stargazers`}
+        data-show-count="true"
+        data-count-aria-label="# stargazers on GitHub"
+        aria-label="Star this project on GitHub">
+        {props.config.projectName}
+      </a>
+    </div>
+    {props.config.twitterUsername && (
+      <div className="social">
+        <a
+          href={`https://twitter.com/${props.config.twitterUsername}`}
+          className="twitter-follow-button">
+          Follow @{props.config.twitterUsername}
+        </a>
+      </div>
+    )}
+    {props.config.facebookAppId && (
+      <div className="social">
+        <div
+          className="fb-like"
+          data-href={props.config.url}
+          data-layout="standard"
+          data-share="true"
+          data-width="225"
+          data-show-faces="false"
+        />
+      </div>
+    )}
+  </div>
 );
 
-GitHubButton.propTypes = {
+SocialFooter.propTypes = {
   config: PropTypes.object
 };
 
@@ -77,17 +105,8 @@ class Footer extends React.Component {
             >
               User Showcase
             </a>
-            <a href="https://twitter.com/docusaurus">
-              Twitter
-            </a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a href="https://github.com/facebook/docusaurus">
-              GitHub
-            </a>
-            <GitHubButton config={this.props.config} />
           </div>
+          <SocialFooter config={this.props.config} />
         </section>
 
         <a

diff --git a/website/siteConfig.js b/website/siteConfig.js
@@ -50,6 +50,7 @@ const siteConfig = {
   gaTrackingId: 'UA-44373548-31',
   facebookAppId: '1615782811974223',
   twitter: 'true',
+  twitterUsername: 'docusaurus',
   ogImage: 'img/docusaurus.png',
   twitterImage: 'img/docusaurus.png',
   onPageNav: 'separate',