Реалізація шерингу контенту в соціальні мережі з сайту

Реалізація кнопок соціального шерингу

Кнопки шерингу дозволяють ділитися контентом у соціальних мережах. Головне — корректні Open Graph та Twitter Card мета-теги, щоб превью виглядало привабливо при публікації посилання.

Open Graph та Twitter Card мета-теги

// Blade: мета-теги для статті
<meta property="og:title"       content="{{ $article->title }}">
<meta property="og:description" content="{{ $article->excerpt }}">
<meta property="og:image"       content="{{ $article->og_image_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url"         content="{{ url()->current() }}">
<meta property="og:type"        content="article">
<meta property="og:locale"      content="uk_UA">
<meta property="article:published_time" content="{{ $article->published_at->toIso8601String() }}">

<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="{{ $article->title }}">
<meta name="twitter:description" content="{{ $article->excerpt }}">
<meta name="twitter:image"       content="{{ $article->og_image_url }}">

Генерація OG-зображення динамічно

// Динамічна генерація OG-картинки 1200×630
Route::get('/og/{article}', function (Article $article) {
    $image = \Intervention\Image\Facades\Image::make(public_path('og-template.png'));

    $image->text($article->title, 600, 280, function ($font) {
        $font->file(public_path('fonts/Inter-Bold.ttf'));
        $font->size(48);
        $font->color('#1a1a1a');
        $font->align('center');
        $font->valign('middle');
    });

    return response($image->encode('jpg', 90))->header('Content-Type', 'image/jpeg')
        ->header('Cache-Control', 'public, max-age=86400');
})->name('og.image');

React: кнопки шерингу

const SHARE_URLS = {
  telegram: (url: string, title: string) =>
    `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
  vk: (url: string, title: string) =>
    `https://vk.com/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
  twitter: (url: string, title: string) =>
    `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
  whatsapp: (url: string, title: string) =>
    `https://wa.me/?text=${encodeURIComponent(title + ' ' + url)}`,
};

function ShareButtons({ url, title }: { url: string; title: string }) {
  const share = (network: keyof typeof SHARE_URLS) => {
    window.open(SHARE_URLS[network](url, title), '_blank', 'width=600,height=400,noopener');
  };

  const copyLink = async () => {
    await navigator.clipboard.writeText(url);
    // показати toast
  };

  // Native Share API (мобільні браузери)
  const nativeShare = async () => {
    if (navigator.share) {
      await navigator.share({ title, url });
    }
  };

  return (
    <div className="share-buttons" role="group" aria-label="Поділитись">
      {navigator.share && (
        <button onClick={nativeShare} aria-label="Поділитись">↗ Поділитись</button>
      )}
      <button onClick={() => share('telegram')} aria-label="Поділитись у Telegram">TG</button>
      <button onClick={() => share('vk')} aria-label="Поділитись у VK">VK</button>
      <button onClick={copyLink} aria-label="Скопіювати посилання">🔗</button>
    </div>
  );
}

Час реалізації

Open Graph мета-теги + кнопки шерингу для React: 0,5–1 день. З динамічною генерацією OG-зображень: 1–2 дні.