Share Buttons Component for Framer

In Framer, adding native share buttons isn't currently a built-in feature. To make this process simple and seamless, I created a custom Share Buttons Component that you can easily integrate into your projects.

Jan 5, 2025

Component

Component

Share Buttons Component for Framer
Share Buttons Component for Framer

Social Share Buttons for Framer Projects

This component is designed to provide functionality for sharing your webpage directly on popular platforms like X (Twitter), Instagram, Facebook, and LinkedIn. With a sleek, modern design, these buttons blend perfectly into any project while maintaining a professional look.

When users click on a share button, it automatically redirects them to the designated platform, preloaded with the link to the webpage they’re sharing. This makes sharing quick and effortless for your visitors, helping you boost engagement and amplify your content’s reach.

You can easily access and use this component in your Framer projects, saving you time and enhancing your website’s functionality. Add it today to make sharing a breeze for your audience!

Key Features:

  • Platform Integration: Works with X, Instagram, Facebook, and LinkedIn.

  • Automatic Linking: Shares the current webpage effortlessly.

  • Modern Design: Minimalistic and sleek, perfect for any aesthetic.

  • Easy Integration: Add to your Framer projects by clicking here to remix this project.

Try the Share Buttons Component now and make your pages more shareable than ever!


Code used in this component

import { addPropertyControls, ControlType } from "framer"
import * as React from "react"

export function ShareButton(props) {
    const handleClick = () => {
        const url = window.location.href // The current page URL
        switch (props.platform) {
            case "Facebook":
                window.open(
                    `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
                        url
                    )}`,
                    "_blank"
                )
                break
            case "Instagram":
                navigator.clipboard
                    .writeText(url)
                    .then(() => {
                        alert(
                            "URL copied to clipboard. You can now paste it into Instagram."
                        )
                    })
                    .catch((err) => {
                        console.error("Failed to copy URL: ", err)
                        alert(
                            "Couldn't copy URL. Please copy it manually: " + url
                        )
                    })
                break
            case "X":
                window.open(
                    `https://twitter.com/intent/tweet?url=${encodeURIComponent(
                        url
                    )}`,
                    "_blank"
                )
                break
            case "LinkedIn":
                window.open(
                    `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
                        url
                    )}`,
                    "_blank"
                )
                break
            default:
                break
        }
    }

    return (
        <div
            style={{
                width: "100%",
                height: "100%",
                background: "transparent",
                cursor: "pointer",
            }}
            onClick={handleClick}
        />
    )
}

addPropertyControls(ShareButton, {
    platform: {
        type: ControlType.Enum,
        defaultValue: "Facebook",
        options: ["Facebook", "Instagram", "X", "LinkedIn"],
        optionTitles: ["Facebook", "Instagram", "X", "LinkedIn"],
        title: "Platform",
    },
})


Memoji Elliot Jones

Become a Highly Skilled and Well Paid Framer Designer!

Become a Highly Skilled and Well Paid Framer Designer!

A Framer community for landing page designers to share experiences, access templates, master CRO, and become highly skilled, well paid professionals.

A Framer community for landing page designers to share experiences, access templates, master CRO, and become highly skilled, well paid professionals.

Join community!

Get Started with Basic

Join community!

Get Started with Basic

Remix project