Recently, I was looking for a solution to add social share buttons to my Astro-based website, and I found exactly what I needed: the astro-social-share package Official repository.
Why astro-social-share?
This package provides a simple yet customizable way to add social media share buttons to your Astro site. It comes with pre-built components for various social platforms and uses icons from Simple Icons, ensuring a clean and professional look.
Installation
You can install the package using your preferred package manager:
# Using NPM
npm install astro-social-share
# Using Yarn
yarn add astro-social-share
# Using PNPM
pnpm add astro-social-share
Basic Usage
Adding share buttons to your page is straightforward. Here’s a basic example:
---
import { SocialShare } from "astro-social-share";
---
<SocialShare
description="Description of the page/post"
title="Page Title"
/>
Custom Components
One of the great features of this package is the ability to create custom share buttons. Here’s an example of a custom HackerNews share button component:
---
import type ButtonProps from './types';
type Props = ButtonProps;
const { url=Astro.request.url, title } = Astro.props;
let URL = `http://news.ycombinator.com/submitlink?u=${url}&t=${title}`
---
<a class="social-share-btn" target="_blank" href={URL} rel="noopener noreferrer">
<slot>
<style>
svg:hover {
fill:#F0652F;
}
</style>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Y Combinator</title>
<path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z"/>
</svg>
</slot>
</a>
Remember to always include proper rel="noopener noreferrer" attributes when using target="_blank" for security best practices.
Customization Tips
- You can customize the appearance of the share buttons using CSS
- The package supports custom icons through the slot system
- Each button component can be styled independently
- You can choose which social platforms to include
The social share functionality requires JavaScript to be enabled in the browser for proper functionality.
Conclusion
The astro-social-share package provides an elegant solution for adding social share functionality to your Astro website. Its simplicity and customization options make it a valuable addition to any Astro project.
For more information and advanced usage, check out the official repository.
