0 530 498 95 53

Sosyal Medya Entegrasyonları ve Web Entegre Uygulamalar: Kapsamlı Rehber

19 Ocak 2026•Web Geliştirme•
Sosyal MedyaAPI EntegrasyonuOAuth

Sosyal Medya Entegrasyonları Nedir?

Sosyal medya entegrasyonları, web sitenizi sosyal medya platformlarıyla bağlayan ve kullanıcı deneyimini geliştiren özelliklerdir. Bu entegrasyonlar, müşteri etkileşimini artırır, marka görünürlüğünü yükseltir ve web trafiğini artırır.

Sosyal Medya Entegrasyonlarının Faydaları

  • Artırılmış Trafik: Sosyal medyadan web sitenize yönlendirme
  • Marka Farkındalığı: Sosyal medyada daha fazla görünürlük
  • Kullanıcı Etkileşimi: Paylaşım ve yorum özellikleri
  • SEO Avantajı: Sosyal sinyaller arama motoru sıralamasını etkiler
  • Müşteri Kazanımı: Sosyal login ile kolay kayıt

Sosyal Medya Paylaşım Butonları

1. Temel Paylaşım Butonları

Web sitenizde içerik paylaşımı için sosyal medya butonları ekleyin:

// React/Next.js için Sosyal Paylaşım Bileşeni
import { FacebookShareButton, TwitterShareButton, LinkedinShareButton, WhatsappShareButton } from 'react-share';
import { FacebookIcon, TwitterIcon, LinkedinIcon, WhatsappIcon } from 'react-share';

export function SocialShareButtons({ url, title, description }) {
  return (
    <div className="social-share-buttons">
      <FacebookShareButton url={url} quote={title}>
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      
      <TwitterShareButton url={url} title={title}>
        <TwitterIcon size={32} round />
      </TwitterShareButton>
      
      <LinkedinShareButton url={url} title={title} summary={description}>
        <LinkedinIcon size={32} round />
      </LinkedinShareButton>
      
      <WhatsappShareButton url={url} title={title}>
        <WhatsappIcon size={32} round />
      </WhatsappShareButton>
    </div>
  );
}

2. Native Share API Kullanımı

Modern tarayıcılarda native paylaşım API'sini kullanın:

// Native Share API
function shareContent({ title, text, url }) {
  if (navigator.share) {
    navigator.share({
      title: title,
      text: text,
      url: url,
    })
    .then(() => console.log('Başarıyla paylaşıldı'))
    .catch((error) => console.log('Paylaşım hatası:', error));
  } else {
    // Fallback: Manuel paylaşım butonları göster
    showManualShareButtons();
  }
}

// Kullanım
shareContent({
  title: 'Blog Yazısı Başlığı',
  text: 'Bu harika bir blog yazısı!',
  url: 'https://www.muharremsen.com/blog/yazi'
});

Sosyal Medya Login Entegrasyonları

1. Google Login Entegrasyonu

Google OAuth 2.0 ile kullanıcı girişi:

// Google OAuth 2.0 Entegrasyonu
import { GoogleLogin } from '@react-oauth/google';

function GoogleLoginButton() {
  const handleSuccess = (credentialResponse) => {
    // Backend'e credential gönder
    fetch('/api/auth/google', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token: credentialResponse.credential })
    })
    .then(res => res.json())
    .then(data => {
      // Kullanıcı oturumunu başlat
      localStorage.setItem('token', data.token);
      window.location.href = '/dashboard';
    });
  };

  return (
    <GoogleLogin
      onSuccess={handleSuccess}
      onError={() => console.log('Login Failed')}
    />
  );
}

2. Facebook Login Entegrasyonu

Facebook SDK ile login entegrasyonu:

// Facebook Login Entegrasyonu
import { useFacebookLogin } from 'react-facebook-login';

function FacebookLoginButton() {
  const responseFacebook = (response) => {
    // Backend'e access token gönder
    fetch('/api/auth/facebook', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        accessToken: response.accessToken,
        userID: response.userID 
      })
    })
    .then(res => res.json())
    .then(data => {
      localStorage.setItem('token', data.token);
      window.location.href = '/dashboard';
    });
  };

  return (
    <FacebookLogin
      appId="YOUR_FACEBOOK_APP_ID"
      autoLoad={false}
      fields="name,email,picture"
      callback={responseFacebook}
      cssClass="facebook-login-button"
    />
  );
}

3. Twitter/X Login Entegrasyonu

Twitter OAuth 1.0a ile login:

// Twitter Login Entegrasyonu
function TwitterLoginButton() {
  const handleTwitterLogin = () => {
    // Twitter OAuth flow başlat
    window.location.href = '/api/auth/twitter';
  };

  return (
    <button onClick={handleTwitterLogin} className="twitter-login-btn">
      <svg>...</svg> Twitter ile Giriş Yap
    </button>
  );
}

// Backend: Twitter OAuth Callback
app.get('/api/auth/twitter/callback', async (req, res) => {
  const { oauth_token, oauth_verifier } = req.query;
  
  // Access token al
  const tokenResponse = await twitterClient.getAccessToken({
    oauth_token,
    oauth_verifier
  });
  
  // Kullanıcı bilgilerini al
  const userInfo = await twitterClient.getUserInfo(tokenResponse);
  
  // Kullanıcıyı kaydet veya giriş yap
  const user = await findOrCreateUser({
    provider: 'twitter',
    providerId: userInfo.id,
    email: userInfo.email,
    name: userInfo.name
  });
  
  // JWT token oluştur
  const token = generateJWT(user);
  res.redirect(`/dashboard?token=${token}`);
});

Sosyal Medya API Entegrasyonları

1. Instagram API Entegrasyonu

Instagram feed'inizi web sitenize entegre edin:

// Instagram Basic Display API
async function getInstagramPosts(accessToken) {
  const response = await fetch(
    `https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,permalink,timestamp&access_token=${accessToken}`
  );
  const data = await response.json();
  return data.data;
}

// Instagram Feed Bileşeni
function InstagramFeed() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    getInstagramPosts(accessToken)
      .then(setPosts)
      .catch(console.error);
  }, []);
  
  return (
    <div className="instagram-feed">
      {posts.map(post => (
        <a key={post.id} href={post.permalink} target="_blank">
          <img src={post.media_url} alt={post.caption} />
        </a>
      ))}
    </div>
  );
}

2. Twitter/X API Entegrasyonu

Twitter feed'inizi web sitenize ekleyin:

// Twitter API v2 Entegrasyonu
async function getTwitterTweets(bearerToken, username) {
  // Kullanıcı ID'sini al
  const userResponse = await fetch(
    `https://api.twitter.com/2/users/by/username/${username}`,
    {
      headers: { 'Authorization': `Bearer ${bearerToken}` }
    }
  );
  const userData = await userResponse.json();
  const userId = userData.data.id;
  
  // Tweet'leri al
  const tweetsResponse = await fetch(
    `https://api.twitter.com/2/users/${userId}/tweets?max_results=10&tweet.fields=created_at,public_metrics`,
    {
      headers: { 'Authorization': `Bearer ${bearerToken}` }
    }
  );
  const tweetsData = await tweetsResponse.json();
  return tweetsData.data;
}

// Twitter Feed Bileşeni
function TwitterFeed({ username }) {
  const [tweets, setTweets] = useState([]);
  
  useEffect(() => {
    getTwitterTweets(bearerToken, username)
      .then(setTweets)
      .catch(console.error);
  }, [username]);
  
  return (
    <div className="twitter-feed">
      {tweets.map(tweet => (
        <div key={tweet.id} className="tweet">
          <p>{tweet.text}</p>
          <span>{new Date(tweet.created_at).toLocaleDateString()}</span>
        </div>
      ))}
    </div>
  );
}

3. LinkedIn API Entegrasyonu

LinkedIn şirket sayfası içeriklerini gösterin:

// LinkedIn API Entegrasyonu
async function getLinkedInPosts(accessToken, companyId) {
  const response = await fetch(
    `https://api.linkedin.com/v2/ugcPosts?q=authors&authors=List(${companyId})&count=10`,
    {
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'X-Restli-Protocol-Version': '2.0.0'
      }
    }
  );
  const data = await response.json();
  return data.elements;
}

// LinkedIn Feed Bileşeni
function LinkedInFeed({ companyId }) {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    getLinkedInPosts(accessToken, companyId)
      .then(setPosts)
      .catch(console.error);
  }, [companyId]);
  
  return (
    <div className="linkedin-feed">
      {posts.map(post => (
        <div key={post.id} className="linkedin-post">
          <p>{post.specificContent['com.linkedin.ugc.ShareContent'].text.text}</p>
        </div>
      ))}
    </div>
  );
}

Web Entegre Uygulamalar

1. WhatsApp Business API Entegrasyonu

WhatsApp üzerinden müşteri iletişimi:

// WhatsApp Business API Entegrasyonu
async function sendWhatsAppMessage(phoneNumber, message) {
  const response = await fetch('https://graph.facebook.com/v18.0/YOUR_PHONE_NUMBER_ID/messages', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${WHATSAPP_ACCESS_TOKEN}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      messaging_product: 'whatsapp',
      to: phoneNumber,
      type: 'text',
      text: { body: message }
    })
  });
  
  return await response.json();
}

// WhatsApp Butonu Bileşeni
function WhatsAppButton({ phoneNumber, message }) {
  const handleClick = () => {
    const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
    window.open(url, '_blank');
  };
  
  return (
    <button onClick={handleClick} className="whatsapp-button">
      <svg>...</svg> WhatsApp ile İletişime Geç
    </button>
  );
}

2. Facebook Messenger Entegrasyonu

Facebook Messenger chat widget'ı:

// Facebook Messenger Widget
function FacebookMessenger({ pageId }) {
  useEffect(() => {
    // Facebook SDK'yı yükle
    window.fbAsyncInit = function() {
      FB.init({
        xfbml: true,
        version: 'v18.0'
      });
    };
    
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/tr_TR/sdk/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }, []);
  
  return (
    <>
      <div className="fb-customerchat"
        page_id={pageId}
        theme_color="#0084ff"
        logged_in_greeting="Merhaba! Size nasıl yardımcı olabilirim?"
        logged_out_greeting="Merhaba! Size nasıl yardımcı olabilirim?">
      </div>
    </>
  );
}

3. YouTube API Entegrasyonu

YouTube videolarını web sitenize entegre edin:

// YouTube Data API v3
async function getYouTubeVideos(apiKey, channelId) {
  const response = await fetch(
    `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet&order=date&maxResults=10`
  );
  const data = await response.json();
  return data.items;
}

// YouTube Video Listesi Bileşeni
function YouTubeVideoList({ channelId }) {
  const [videos, setVideos] = useState([]);
  
  useEffect(() => {
    getYouTubeVideos(YOUTUBE_API_KEY, channelId)
      .then(setVideos)
      .catch(console.error);
  }, [channelId]);
  
  return (
    <div className="youtube-videos">
      {videos.map(video => (
        <div key={video.id.videoId} className="video-item">
          <a href={`https://www.youtube.com/watch?v=${video.id.videoId}`} target="_blank">
            <img src={video.snippet.thumbnails.medium.url} alt={video.snippet.title} />
            <h3>{video.snippet.title}</h3>
          </a>
        </div>
      ))}
    </div>
  );
}

Sosyal Medya Widget'ları

1. Facebook Like Box

<div className="fb-page" 
  data-href="https://www.facebook.com/yourpage"
  data-tabs="timeline"
  data-width="500"
  data-height="600"
  data-small-header="false"
  data-adapt-container-width="true"
  data-hide-cover="false"
  data-show-facepile="true">
</div>

2. Twitter Timeline Widget

<a className="twitter-timeline" 
  href="https://twitter.com/yourusername"
  data-height="600"
  data-theme="light">
  Tweets by @yourusername
</a>
<script async src="https://platform.twitter.com/widgets.js"></script>

3. Instagram Feed Widget

// Instagram Embed
function InstagramEmbed({ url }) {
  return (
    <blockquote 
      className="instagram-media"
      data-instgrm-permalink={url}
      data-instgrm-version="14"
    >
      <a href={url}>Instagram Post</a>
    </blockquote>
  );
}

Güvenlik ve Best Practices

1. API Key Güvenliği

  • API key'leri environment variable'larda saklayın
  • Backend'de API çağrıları yapın, frontend'de expose etmeyin
  • Rate limiting uygulayın
  • HTTPS kullanın
// Environment Variables (.env.local)
NEXT_PUBLIC_FACEBOOK_APP_ID=your_app_id
FACEBOOK_APP_SECRET=your_app_secret
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secret
TWITTER_API_KEY=your_api_key
TWITTER_API_SECRET=your_api_secret

// Backend API Route
export async function POST(request: Request) {
  const { provider, token } = await request.json();
  
  // Backend'de API çağrısı yap
  const apiKey = process.env.FACEBOOK_APP_SECRET; // Güvenli
  // ... doğrulama işlemleri
}

2. OAuth Güvenliği

  • State parameter kullanın (CSRF koruması)
  • PKCE (Proof Key for Code Exchange) kullanın
  • Token'ları güvenli saklayın (httpOnly cookies)
  • Token refresh mekanizması ekleyin

3. Veri Gizliliği

  • KVKK/GDPR uyumluluğu
  • Kullanıcı onayı alın
  • Veri şifreleme
  • Gizlilik politikası

Performans Optimizasyonu

1. Lazy Loading

// Sosyal medya widget'larını lazy load edin
import { lazy, Suspense } from 'react';

const FacebookWidget = lazy(() => import('./FacebookWidget'));
const TwitterWidget = lazy(() => import('./TwitterWidget'));

function SocialMediaSection() {
  return (
    <Suspense fallback={<div>Yükleniyor...</div>}>
      <FacebookWidget />
      <TwitterWidget />
    </Suspense>
  );
}

2. Caching Stratejisi

// API yanıtlarını cache'leyin
const CACHE_DURATION = 5 * 60 * 1000; // 5 dakika

async function getCachedSocialMediaData(key, fetchFunction) {
  const cached = localStorage.getItem(key);
  const cachedData = cached ? JSON.parse(cached) : null;
  
  if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) {
    return cachedData.data;
  }
  
  const freshData = await fetchFunction();
  localStorage.setItem(key, JSON.stringify({
    data: freshData,
    timestamp: Date.now()
  }));
  
  return freshData;
}

muharremsen'in Sosyal Medya Entegrasyon Hizmetleri

muharremsen olarak, web sitenize profesyonel sosyal medya entegrasyonları ekliyoruz:

  • Sosyal Medya Paylaşım Butonları: Tüm platformlar için paylaşım butonları
  • Sosyal Login Entegrasyonları: Google, Facebook, Twitter, LinkedIn login
  • Sosyal Medya Feed'leri: Instagram, Twitter, LinkedIn feed entegrasyonları
  • WhatsApp Business API: WhatsApp ile müşteri iletişimi
  • Facebook Messenger: Messenger chat widget'ı
  • YouTube Entegrasyonu: Video listesi ve embed
  • Sosyal Medya Widget'ları: Like box, timeline, embed widget'ları
  • API Entegrasyonları: Tüm sosyal medya API'leri
  • Güvenlik: OAuth güvenliği, API key yönetimi
  • Performans Optimizasyonu: Lazy loading, caching
  • 7/24 Destek: Teknik destek ve bakım

Sonuç

Sosyal medya entegrasyonları, modern web sitelerinin vazgeçilmez bir parçasıdır. Doğru entegrasyonlar ile:

  • Web trafiğinizi artırabilirsiniz
  • Marka görünürlüğünüzü yükseltebilirsiniz
  • Müşteri etkileşimini artırabilirsiniz
  • Kullanıcı deneyimini iyileştirebilirsiniz
  • SEO performansınızı artırabilirsiniz

Sosyal medya entegrasyonları ve web entegre uygulamalar için muharremsen'in deneyimli ekibi yanınızda. Profesyonel entegrasyon hizmetlerimiz ile web sitenizi sosyal medya ile güçlendirin!

← Tüm Yazılara Dön
1