Is there a way to like a post for a user and display it?

Using Ghost
1

Hi,

I am looking for a simple integration that would count likes of blog users.
I provide here an image of what I am trying to achieve.
image

It would just be a module where user can add a like to a post.

Thank you for the help

2

Maybe you could repurpose this library called ‘Applause’ which mimics the claps feature shown on Medium: https://applause-button.com/

2 Likes
3

Thanks for the suggestion. I have to see if I can integrate it and change the button to be a heart instead !

1 Like
4

Did you manage to get it to work?

Actually it would be a really nice addition to ghost. With Wordpress it’s as easy as installing a plugin to get it into your site. Up & running in no time.

1 Like
5

@janmueller Finally I implemented the applause-button as it was suggested, I had to rewrite component in React, I didn’t find any other library or simple way to integrate it ! As you said this is really a feature that is missing and should be implemented for sure.

1 Like
6

hmm… so do you have a version that can be integrated into ghost?

7

As I said I made a react component that is connected to the applause-button library. It is a third party free service. For our implementation it was ok for us to use that king of library. This way was easier and quicker to implement than adding a table to the ghost database and connecting it to our backend. As it is only the number of likes we do not need to store in our database. The API gives you the number of likes per article and there is also another endpoint where you can get likes from different url’s.

1 Like
8

Sounds great I would love to see some code in action on this.

9

Unfortunately I cannot give access to this private repo but i can share the component i created in my app

/* eslint-disable react/prop-types */
import React, { useState, useEffect } from "react"
import '../../styles/likeButton.scss'
import axios from "axios"
import { withPrefix } from 'gatsby'

const API = `https://api.applause-button.com`
const VERSION = `3.3.0`
const mainUrl = `https://lemonads.com/`

const HEADERS = {
    "Content-Type": `text/plain`,
}

const getClaps = async (url) => {
    const query = url ? `?url=${url}` : ``
    return await axios.get(`${API}/get-claps${query}`, {
        headers: HEADERS,
    })
}

const updateClaps = async (url, claps = 1) => {
    console.log(claps)
    const query = url ? `?url=${url}` : ``
    return await axios.post(`${API}/update-claps${query}`,
        JSON.stringify(`${claps},${VERSION}`), {
            headers: HEADERS,
        })
}

const LikeButton = ({ url = mainUrl }) => {
    const [count, setCount] = useState(0)
    const [isClapped, setIsClapped] = useState(false)
    const doApplause = () => {
        if (!isClapped) {
            console.log(`do clapping`)
            const callBackend = async () => {
                const result = await updateClaps(url, 1)
                setCount(result.data)
                setIsClapped(true)
            }
            callBackend()
        }
    }

    useEffect(() => {
        const fetchData = async () => {
            const result = await getClaps(url)
            console.log(result)
            setCount(result.data)
        }
        fetchData()
    }, [])

    return (
        <div className="like-button" onClick={doApplause}>
            <div>
                <img src={withPrefix(`/assets/img/like.svg`)} />
                {count > 0 && 
                    <div className="count-container" >
                        {<div className="count">{count}</div>}
                    </div>
                }
               
            </div>

        </div>
    )
}

export default LikeButton

And than I used it in the post template, I just had to pass the url prop.
Hope it helps !

10

I’ve got something in the works that should be ready to start testing soon. If you are interested in being part of the test group let me know on Twitter or email!

Twitter: @amgrammer
Email: usual.zone3165@fastmail.com (yes the email is weird looking. This is not a scam. I’m using a masked email since this is a public forum)