Реализация шеринга контента в социальные сети с сайта

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

Кнопки шэринга позволяют делиться контентом в социальных сетях. Главное — корректные 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="ru_RU">
<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</button>
      <button onClick={copyLink} aria-label="Скопировать ссылку">🔗</button>
    </div>
  );
}

Срок реализации

Open Graph мета-теги + кнопки шэринга для React: 0.5–1 день. С динамической генерацией OG-изображений: 1–2 дня.