Add Sharing buttons in single post page

mymakarim · 6 July 2020 01:33

Add Sharing buttons

Live Demo https://newschin.mymakarim.vercel.app/2020/01/citizens-rights-should-be-protected-in-peace-talks-says-aihrc-chairperson/

Create new file called SharingButtons.js in my-app/packages/YOUR-PACKAGE-NAME/src/components
copy and paste the following code

import React from 'react'

import {styled} from 'frontity';

const SharingButtons = ({link, title}) => {

    return (

        <SharingButton>

          Sharing is Caring: 

            <a target="_blank" href={`http://www.facebook.com/share.php?u=https://newschin.mymakarim.vercel.app${link}&title=${title}`}>

              <svg className="svg-inline--fa fa-facebook fa-w-14" height="20px" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">

                <path fill="currentColor" d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path></svg>

            </a>

            <a target="_blank" href={`http://twitter.com/share?text=${title}&url=https://newschin.mymakarim.vercel.app${link}`}>

              <svg className="svg-inline--fa fa-twitter fa-w-16" height="20px" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">

                <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>

            </a>

            <a target="_blank" href={`http://www.linkedin.com/shareArticle?mini=true&url=https://newschin.mymakarim.vercel.app${link}&title=${title}&source=https://newschin.mymakarim.vercel.app${link}`}>

              <svg className="svg-inline--fa fa-linkedin fa-w-14" aria-hidden="true" height="20px" focusable="false" data-prefix="fab" data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">

              <path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>

            </a>

        </SharingButton>

    )

}

export default SharingButtons

const SharingButton = styled.div`

  a {

    display: inline-block;

    margin:0px 10px;

  }

  @media (max-width: 576px) {

    padding: 10px 0px;

  }

`;

add below two lines in post.js

import SharingButtons from "./SharingButtons";
<SharingButtons link={state.router.link} title={post.title.rendered} />

Make a or if you found this useful.

A small issue: Currently I have hardcoded the domain name. How can I make it automate?

SOLVED


import React from 'react'
import {styled, connect} from 'frontity';

const SharingButtons = ({state, link, title}) => {
    const url = state.frontity.url;
    return (
        <SharingButton>
            <a target="_blank" href={`http://www.facebook.com/share.php?u=${url}${link}&title=${title}`}>
              <svg className="svg-inline--fa fa-facebook fa-w-14" height="20px" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                <path fill="currentColor" d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path></svg>
            </a>
            <a target="_blank" href={`http://twitter.com/share?text=${title}&url=${url}${link}`}>
              <svg className="svg-inline--fa fa-twitter fa-w-16" height="20px" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
            </a>
            <a target="_blank" href={`http://www.linkedin.com/shareArticle?mini=true&url=${url}${link}&title=${title}&source=${url}${link}`}>
              <svg className="svg-inline--fa fa-linkedin fa-w-14" aria-hidden="true" height="20px" focusable="false" data-prefix="fab" data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>
            </a>
        </SharingButton>
    )
}

export default connect(SharingButtons)

const SharingButton = styled.div`
  a {
    display: inline-block;
    margin:0px 10px;
  }

  @media (max-width: 576px) {
    padding: 10px 0px;
  }
`;

mburridge · 6 July 2020 11:30

Hi @mymakarim

That’s great, thanks for sharing.

Regarding your question about the hardcoded domain name, why not use the state.frontity.url property in frontity.settings.js and then pass state in as a prop to your component in order to use that property.

You will, of course, also need to add connect to the line import {styled} from 'frontity'; in your component, and also change export default SharingButtons to export default connect(SharingButtons).

mymakarim · 6 July 2020 11:45

Thanks, I don’t know why didn’t think of that

luisherranz · 7 July 2020 08:17

Awesome work again @mymakarim! If you want to turn it into a the first Frontity share package let me know and I will explain you how

mymakarim · 7 July 2020 12:40

Sure. I’d love to

luisherranz · 8 July 2020 16:02

Awesome! I’ve started an implementation proposal for the share packages in Frontity. As you can see, it’s not difficult, just getting a consensus so themes know where the components are if they want to include them.

I’ll review the implementation proposal tomorrow: The `share` namespace.