ShareButtons 設定

設定を変更してShareButtonsコンポーネントの表示を確認できます

ShareButtons 設定

Direction

Variant

Size

プレビュー

X
Facebook
はてな

ShareButtons Example

TSX
<ShareButtons
  title="Next.jsでSNSシェアボタンを実装する方法"
  url="https://example.com/blog/nextjs-sns-share-buttons"
  direction="horizontal"
  variant="icon-with-label"
  size="md"
/>

ShareButtons バリエーション

異なる設定でのShareButtonsコンポーネントの表示例

Horizontal - Icon with Label

X
Facebook
はてな

コード例

TSX
<ShareButtons
  title="サンプル記事タイトル"
  url="https://example.com/sample-article"
  direction="horizontal"
  variant="icon-with-label"
  size="md"
/>

Horizontal - Icon Only

コード例

TSX
<ShareButtons
  title="サンプル記事タイトル"
  url="https://example.com/sample-article"
  direction="horizontal"
  variant="icon-only"
  size="md"
/>

Vertical - Icon with Label

X
Facebook
はてな

コード例

TSX
<ShareButtons
  title="サンプル記事タイトル"
  url="https://example.com/sample-article"
  direction="vertical"
  variant="icon-with-label"
  size="md"
/>

Vertical - Icon Only

コード例

TSX
<ShareButtons
  title="サンプル記事タイトル"
  url="https://example.com/sample-article"
  direction="vertical"
  variant="icon-only"
  size="md"
/>

使用方法

ShareButtonsコンポーネントの実装方法とベストプラクティス

基本的な使用例

TSX
import { ShareButtons } from "@/app/components/ShareButtons";

export default function BlogPost() {
  return (
    <article>
      <h1>記事タイトル</h1>
      <div className="article-content">
        {/* 記事内容 */}
      </div>
      
      {/* 記事下部にシェアボタンを設置 */}
      <ShareButtons
        title="記事タイトル"
        url="https://example.com/article"
        direction="horizontal"
        variant="icon-with-label"
        size="md"
      />
    </article>
  );
}

サイドバーでの使用例

TSX
// サイドバーやフローティング表示の場合
<div className="sidebar">
  <ShareButtons
    title="記事タイトル"
    url="https://example.com/article"
    direction="vertical"
    variant="icon-only"
    size="sm"
  />
</div>

Props説明

TypeScript
interface ShareButtonsProps {
  title: string;           // シェアする記事のタイトル
  url: string;             // シェアするURL
  direction?: 'horizontal' | 'vertical';  // ボタンの配置方向
  variant?: 'icon-only' | 'icon-with-label';  // アイコンのみ or ラベル付き
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';     // ボタンサイズ
  className?: string;      // 追加のCSSクラス
}