Sosyal Medya ve Web Sitesi Entegrasyonu: Kapsamlı Rehber

Q: Hangi sosyal medya butonlarını eklemeliyim?

Hedef kitlenizin aktif olduğu platformları seçin. Türkiye için genellikle: WhatsApp, Instagram, Twitter/X, Facebook. B2B için LinkedIn ekleyin. 4-5 buton optimal, daha fazlası kafa karıştırır. A/B test yaparak performansı ölçün.

Q: Sosyal medya widgetları siteyi yavaşlatır mı?

Evet, native widget'lar özellikle yavaşlatabilir. Çözümler: Lazy loading uygulayın, facade pattern kullanın (YouTube için), share URL'leri tercih edin (native SDK yerine), 3rd party script'leri minimize edin.

Q: Open Graph görseli için ideal boyut nedir?

1200x630px (1.91:1 oran) çoğu platform için optimal. Facebook, LinkedIn, Twitter bu boyutu iyi gösterir. Önemli metin ve görselleri "safe zone" içinde tutun (kenarlardan uzak). Dosya boyutu <300KB olmalı.

Q: Instagram feedimi siteme nasıl eklerim?

Instagram API doğrudan erişimi zorlaştırdı. Widget servisleri (SnapWidget, Elfsight, LightWidget) en kolay çözüm. Business hesap için daha fazla seçenek var. Native embed sadece tek post için çalışır.

Q: Sosyal login güvenli mi?

Evet, OAuth 2.0 standart ve güvenli protokoldür. Avantajları: Şifre saklamak yok, doğrulanmış e-posta, 2FA devralınır. Dezavantajları: Platform bağımlılığı, gizlilik endişeleri. Alternatif login yöntemi de sunun.

Sosyal medya ve web sitesi birbirini tamamlayan iki güçlü kanaldır. Doğru entegrasyon, trafiği artırır, marka bilinirliğini güçlendirir ve dönüşümleri iyileştirir. Web sitenizin sosyal medya görünürlüğü, içeriklerinizin paylaşılabilirliğini ve organik erişimini doğrudan etkiler.

Entegrasyon Neden Önemli?

Sosyal medya ve web sitesi sinerjisi iş sonuçlarını artırır.

Faydaları

Trafik:

Sosyal medyadan web sitesine yönlendirme
Viral paylaşım potansiyeli
Referral trafik artışı
SEO sinyalleri

Güven:

Sosyal kanıt
Marka tutarlılığı
Topluluk algısı
Müşteri güveni

Etkileşim:

Çok kanallı iletişim
Kullanıcı deneyimi
Dönüşüm yolları
Retargeting imkanı

İstatistikler

Metrik	Etki
Paylaşım butonu olan siteler	+7x daha fazla paylaşım
Sosyal login	+50% form doldurma
Sosyal kanıt	+15% dönüşüm
Open Graph	+20% CTR

Paylaşım Butonları

İçeriklerinizin paylaşılmasını kolaylaştırın.

Button Türleri

Native Butonlar:

Platform Native Butonları:
├── Facebook Share/Like
├── Twitter Tweet
├── LinkedIn Share
├── Pinterest Pin
├── WhatsApp (mobilde önemli)
└── Telegram

Custom Butonlar:

Kendi tasarımınızla
Share URL kullanarak
Daha hızlı yükleme
Tutarlı görünüm

Konum Stratejisi

Optimal Konumlar:

Paylaşım Butonu Konumları:
├── Blog yazısı başı
├── Blog yazısı sonu
├── Floating sidebar
├── İçerik arasında
└── Header/Footer

Platform Link Formatları:

Share URLs:
├── Facebook:
│   https://www.facebook.com/sharer/sharer.php?u={URL}
│
├── Twitter/X:
│   https://twitter.com/intent/tweet?url={URL}&text={TEXT}
│
├── LinkedIn:
│   https://www.linkedin.com/shareArticle?mini=true&url={URL}
│
├── WhatsApp:
│   https://wa.me/?text={URL}
│
└── Pinterest:
    https://pinterest.com/pin/create/button/?url={URL}&media={IMAGE}

Performance Considerations

Hız Optimizasyonu:

Native SDK'lar yerine share URL kullanın
Lazy load uygulayın
SVG ikonlar tercih edin
3rd party script'leri minimize edin

Open Graph ve Meta Etiketleri

Paylaşıldığında içerik nasıl görünecek?

Open Graph Temelleri

Zorunlu Etiketler:

<head>
  <meta property="og:title" content="Sayfa Başlığı" />
  <meta property="og:description" content="Açıklama metni..." />
  <meta property="og:image" content="https://site.com/image.jpg" />
  <meta property="og:url" content="https://site.com/sayfa" />
  <meta property="og:type" content="article" />
</head>

Ek Etiketler:

<meta property="og:site_name" content="Site Adı" />
<meta property="og:locale" content="tr_TR" />
<meta property="article:published_time" content="2025-01-15" />
<meta property="article:author" content="Yazar Adı" />

Twitter Card

Twitter Spesifik:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Başlık" />
<meta name="twitter:description" content="Açıklama" />
<meta name="twitter:image" content="https://site.com/image.jpg" />

Görsel Gereksinimleri

Optimal Boyutlar:

OG Image Boyutları:
├── Facebook: 1200 x 630px
├── Twitter: 1200 x 675px (1.91:1)
├── LinkedIn: 1200 x 627px
├── Pinterest: 1000 x 1500px (2:3)
└── WhatsApp: 400 x 400px min

Best Practices:

Minimum 1200px genişlik
Okunabilir metin
Markalı tasarım
Optimize edilmiş dosya boyutu (<300KB)

Test Araçları

Debug/Preview:

Facebook Sharing Debugger
Twitter Card Validator
LinkedIn Post Inspector
opengraph.xyz (genel)

Sosyal Medya Feedleri

Sosyal içeriği sitenizde gösterin.

Instagram Feed

Entegrasyon Yöntemleri:

Instagram Feed Seçenekleri:
├── Official API (karmaşık, onay gerektirir)
├── Widget servisleri
│   ├── SnapWidget
│   ├── Elfsight
│   └── LightWidget
└── Embed (tek post için)

Embed Seçenekleri:

Timeline widget
Tweet embed
Follow button
Hashtag embed

YouTube Embed

Video Entegrasyonu:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  loading="lazy"
  title="Video Başlığı"
  allowfullscreen>
</iframe>

Performans İpuçları:

Lazy loading kullanın
Lite embed (facade pattern)
Thumbnail ile başlayın
Click-to-play

Facebook Page Plugin

Sayfa Widget:

<div class="fb-page"
  data-href="https://facebook.com/SAYFA"
  data-tabs="timeline"
  data-width="340"
  data-height="500"
  data-small-header="false">
</div>

Kayıt sürecini kolaylaştırın.

Avantajları

Kullanıcı İçin:

Hızlı kayıt
Şifre hatırlama yok
Güvenilir hissettirme
Tek tıkla giriş

İşletme İçin:

Daha yüksek kayıt oranı
Doğrulanmış e-posta
Sosyal veri erişimi
Daha az form abandonment

Popüler Seçenekler

Platform Login:

Sosyal Login Seçenekleri:
├── Google (en yaygın)
├── Facebook
├── Apple (iOS için önemli)
├── LinkedIn (B2B)
├── Twitter/X
└── Microsoft

Uygulama

OAuth 2.0 Akışı:

Kullanıcı "Google ile Giriş" tıklar
Google'a yönlendirilir
İzin verir
Token ile geri döner
Hesap oluşturulur/giriş yapılır

Kütüphaneler:

NextAuth.js (Next.js)
Passport.js (Node.js)
Firebase Auth
Auth0

Privacy Considerations

KVKK/GDPR:

Sadece gerekli verileri isteyin
İzin metni gösterin
Veri kullanımını açıklayın
Hesap silme seçeneği

Sosyal Kanıt

Sosyal medya güveni web sitesine taşıyın.

Sosyal Kanıt Türleri

Takipçi Sayıları:

Gösterilebilecek Metrikler:
├── Takipçi sayısı
├── Like/Beğeni sayısı
├── Paylaşım sayısı
├── Yorum sayısı
└── Rating (yıldız)

User Generated Content:

Müşteri fotoğrafları
Sosyal medya mention'ları
Hashtag kampanyaları
Video testimonial'lar

Testimonial Entegrasyonu

Sosyal Medya Yorumları:

Tweet embed
Facebook review
Instagram mention
LinkedIn recommendation

Güvenlik Rozetleri

Gösterilebilecekler:

Sosyal medya verified badge
Takipçi milestones
Etkileyici ortaklıklar
Basın coverage

Performans Optimizasyonu

Sosyal entegrasyonlar siteyi yavaşlatmamalı.

Script Yönetimi

Lazy Loading:

// Sosyal widgetları lazy load
const loadSocialWidget = () => {
  const script = document.createElement('script')
  script.src = 'https://platform.twitter.com/widgets.js'
  script.async = true
  document.body.appendChild(script)
}

// Viewport'a girince yükle
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadSocialWidget()
    observer.disconnect()
  }
})

Facade Pattern

YouTube Lite Embed:

İlk yükleme:
├── Sadece thumbnail görsel
├── Play butonu overlay
└── Click olunca gerçek player yükle

Core Web Vitals

Etki ve Çözümler:

Performance Impact:
├── LCP: Ağır widget'lar geciktirir
│   └── Çözüm: Lazy load, facade pattern
│
├── CLS: Dinamik içerik layout shift
│   └── Çözüm: Fixed dimensions, placeholder
│
└── INP: 3rd party script blocking
    └── Çözüm: Async load, defer

Platform Spesifik Entegrasyonlar

Her platform için özel stratejiler.

Instagram

Web Sitesi Entegrasyonu:

Feed widget
Story highlights embed
Shop entegrasyonu
DM link

Facebook

Entegrasyon Araçları:

Page plugin
Comment plugin
Messenger chat
Shop tab

B2B Odaklı:

Share button (önemli)
Company page follow
Job posting embed
Article linking

E-ticaret İçin:

Pin It button
Rich Pins
Catalog feed
Shopping ads entegrasyonu

TikTok

Video Embed:

Video embed
Profile link
Shop entegrasyonu (yakında)

Ölçüm ve Analiz

Sosyal entegrasyonların etkisini ölçün.

Tracking Setup

UTM Parametreleri:

UTM Yapısı:
├── utm_source: facebook, twitter, instagram
├── utm_medium: social, referral
├── utm_campaign: kampanya_adi
├── utm_content: post_tipi
└── utm_term: hedef_kitle

Ölçülecek Metrikler

Sosyal Trafik:

GA4 Metrikleri:
├── Sessions by source
├── Engagement rate
├── Conversions
├── Revenue (e-ticaret)
└── User behavior flow

Paylaşım Metrikleri:

Total shares
Share by platform
Viral coefficient
Earned media value

Attribution

Sosyal Medya Etkisi:

First-touch vs last-touch
Assisted conversions
Multi-channel funnel
Cross-device tracking

Sıkça Sorulan Sorular

Hangi sosyal medya butonlarını eklemeliyim?