Social media share buttons

src/components/widget/share-button.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import IconButton from './icon-button'
+
+const links = {
+  facebook: 'https://www.facebook.com/sharer/sharer.php?u=',
+  twitter: 'https://twitter.com/share?url=',
+  telegram: 'https://telegram.me/share/?url=',
+  whatsapp: 'https://api.whatsapp.com/send?text=',
+  pinterest: 'https://pinterest.com/pin/create/button/?url='
+}
+
+export const ShareButton = ({ type, url, ...wrapperProps }) => (
+  <IconButton icon={type} to={links[type] + url} {...wrapperProps} />
+)
+
+export const ShareButtons = ({ url, ...wrapperProps }) => (
+  <>
+    {Object.keys(links).map((k, i) => (
+      <ShareButton key={`${k}--${i}`} type={k} url={url} {...wrapperProps} />
+    ))}
+  </>
+)

src/templates/blog-post.js

@@ -14,10 +14,11 @@ import {
 import { hashCode, queryType } from '../shared/util'
 import BottomSheet from '../components/widget/bottom-sheet'
 import Toast from '../components/widget/toast'
+import { ShareButtons } from '../components/widget/share-button'
 
 const paramType = 'blog'
 
-const BlogPost = ({ data, pageContext }) => {
+const BlogPost = ({ data, pageContext, location }) => {
   // All fileds post
   const { excerpt, frontmatter, html, timeToRead, fields } = data.blog
   const { title, date, tags, category, cover } = frontmatter
@@ -88,6 +89,14 @@ const BlogPost = ({ data, pageContext }) => {
                   <LoveContext.Provider value={{ state, dispatch }}>
                     <BottomSheet pageContext={pageContext} title={title} />
                   </LoveContext.Provider>
+                  {/* Social media share */}
+                  <p className='has-text-centered'>
+                    <ShareButtons
+                      url={location.href}
+                      iconSize='24'
+                      buttonClass='is-white has-text-grey'
+                    />
+                  </p>
                 </div>
               </div>
             </div>

src/templates/gallery-post.js

@@ -14,10 +14,11 @@ import {
 } from '../store/love-reducer'
 import { hashCode, queryType } from '../shared/util'
 import Toast from '../components/widget/toast'
+import { ShareButtons } from '../components/widget/share-button'
 
 const paramType = 'gallery'
 
-const GalleryPost = ({ data, pageContext }) => {
+const GalleryPost = ({ data, pageContext, location }) => {
   // All fileds post
   const { excerpt, frontmatter, html, timeToRead, fields } = data.gallery
   const { title, date, tags, category, cover } = frontmatter
@@ -84,6 +85,14 @@ const GalleryPost = ({ data, pageContext }) => {
                   <LoveContext.Provider value={{ state, dispatch }}>
                     <BottomSheet pageContext={pageContext} title={title} />
                   </LoveContext.Provider>
+                  {/* Social media share */}
+                  <p className='has-text-centered'>
+                    <ShareButtons
+                      url={location.href}
+                      iconSize='24'
+                      buttonClass='is-white has-text-grey'
+                    />
+                  </p>
                 </div>
               </div>
             </div>