Social Media Content Sharing Implementation for Website

Implementing social sharing buttons

Share buttons let users share content on social networks. Key — correct Open Graph and Twitter Card meta tags so preview looks attractive when link is posted.

Open Graph and Twitter Card meta tags

// Blade: meta tags for article
<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="en_US">
<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 }}">

Generating OG image dynamically

// Dynamic OG image generation 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: share buttons

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);
    // show toast
  };

  // Native Share API (mobile browsers)
  const nativeShare = async () => {
    if (navigator.share) {
      await navigator.share({ title, url });
    }
  };

  return (
    <div className="share-buttons" role="group" aria-label="Share">
      {navigator.share && (
        <button onClick={nativeShare} aria-label="Share">↗ Share</button>
      )}
      <button onClick={() => share('telegram')} aria-label="Share on Telegram">TG</button>
      <button onClick={() => share('vk')} aria-label="Share on VK">VK</button>
      <button onClick={copyLink} aria-label="Copy link">🔗</button>
    </div>
  );
}

Implementation time

Open Graph meta tags + share buttons for React: 0.5–1 day. With dynamic OG image generation: 1–2 days.