Web sitenize YouTube kanalınızdaki videoları otomatik olarak eklemek, içeriklerinizi daha geniş bir kitleye ulaştırmak ve sitenizin dinamizmini artırmak için harika bir yöntemdir. Bu rehberde, YouTube API’sini kullanarak nasıl yapılacağını adım adım açıklayacağız.
Adım 1: YouTube Data API Anahtarı Alın
YouTube videolarınızı web sitenize eklemek için öncelikle YouTube Data API’sine erişim sağlamanız gerekmektedir. Bunun için bir API anahtarı almanız gerekir.
- Google Cloud Platform’a (https://console.cloud.google.com/) gidin ve bir proje oluşturun.
- “API’ler ve Hizmetler” bölümüne gidin ve “YouTube Data API v3″ü etkinleştirin.
- “Kimlik Bilgileri” sekmesine giderek yeni bir API anahtarı oluşturun.
Adım 2: YouTube Kanal ID’nizi Bulun
YouTube kanalınızın ID’sini bulmanız gerekmektedir. Bu, genellikle YouTube kanal URL’nizde bulunur ve “channel/CHANNEL_ID” formatındadır.
Adım 3: Web Sitenize Videoları Eklemek için HTML ve JavaScript Kodları
Aşağıda, YouTube kanalınızdaki son videoları sitenize eklemek için kullanabileceğiniz temel bir HTML ve JavaScript kod örneği verilmiştir.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Videos</title>
</head>
<body>
<div id="youtube-videos"></div>
<script src="youtube.js"></script>
</body>
</html>
JavaScript Kodu (youtube.js)
document.addEventListener('DOMContentLoaded', function() {
var apiKey = 'YOUR_API_KEY'; // Adım 1'de aldığınız API anahtarını girin
var channelId = 'YOUR_CHANNEL_ID'; // Adım 2'de bulduğunuz Kanal ID'sini girin
var url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=20`;
fetch(url)
.then(response => response.json())
.then(data => {
var videos = data.items;
var output = '<h3>Son Videolar</h3>';
videos.forEach(function(video) {
var videoId = video.id.videoId;
var videoTitle = video.snippet.title;
var videoThumbnail = video.snippet.thumbnails.high.url;
output += `
<div>
<h4>${videoTitle}</h4>
<a href="https://www.youtube.com/watch?v=${videoId}" target="_blank">
<img src="${videoThumbnail}" alt="${videoTitle}">
</a>
</div>`;
});
document.getElementById('youtube-videos').innerHTML = output;
})
.catch(error => console.log(error));
});
Bu kodlar, YouTube API’sini kullanarak kanalınızdaki en son 20 videoyu çeker ve bunları web sitenizde bir liste halinde gösterir.
Adım 4: Kodları Web Sitenize Ekleyin
Yukarıdaki HTML ve JavaScript kodlarını sitenizin uygun bölümlerine ekleyin. API anahtarınızı ve kanal ID’nizi ilgili yerlere girin.
Sonuç
Bu rehber, YouTube kanalınızdaki videoları web sitenize eklemenize yardımcı olacaktır. Kodları özelleştirerek ihtiyaçlarınıza göre düzenleyebilirsiniz. Bu işlem, sitenizin içerik zenginliğini artırırken, YouTube kanalınızın da daha fazla izleyiciye ulaşmasını sağlayacaktır.
