Uzunca bir zaman oldu yazma fırsatı bulamadım ve bugün bir ziyaretçimizin yorumunu görünce hem kendisine yardımcı olmak hem de sitede sabit kalması için bu yazıyı ele aldım umarım faydalı yardımcı olur.
Youtube arama sayfası daha doğrusu sitenizde kullanacağınız kodlar ile Youtube üzerinde arama yaparak sonuçları kendi sayfamızda listeleme yapacağız.
Ben anlatımda ve sonuna ekleyeceğim örneklerde PHP, ASP ve JAVASCRİPT çeşitlerini kullanacağım siz sitenizde istediğiniz kodlama dilini kullanın.
Google'dan API kimliği almak
Konuyu uzatmamak için eğer API kimliğiniz yoksa Youtube canlı yayını sitene ekle dersimizdeki Google'dan API kimliği almak başlığı altında anlatılanları yaparak kendi API kimliğinizi alın.
API anahtarı alma ile ilgili buradaki videoyu da izleyebilirsiniz.
Çalışma mantığı
Kodları incelerken mantığı kavramanız için çalışma mantığını biraz anlatayım.
Google'un hazır olarak sunduğu hizmetler var biliyorsunuz, Harıta, YouTube, Takvim vb birçok hizmeti bize API-KIMLIGI ile istek yaptığımızda json olarak geri döndürür her isteğin farklı bir adresi vardır konumuzdaki adres aşağıdaki gibidir.
https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=TOPLAM_KAYIT&pageToken=ISTENILEN_SAYFA&q=ARANACAK_KELIME&key=API-KIMLIGI
Kopyala
Adrese TOPLAM_KAYIT, ISTENILEN_SAYFA, ARANACAK_KELIME ve API-KIMLIGI yazdığımızda json verileri geri döndürülür bu verileri ayıklayıp istediğimiz gibi kullanabiliriz.
Adreste dikkat edilmesi gereken nokta ISTENILEN_SAYFA değişkenidir ilk çalıştığında burayı boş gönederin sonraki sayfalar için ISTENILEN_SAYFA değişkeni geri dönen json verilerinden alınarak kullanılır.
PHP ile youtube arama kodları
API-KIMLIGINI-YAZ yazdığım yeri sizin API kimliği ile değiştirin.
<?php
/**
* Youtube API search example
* author: Mehmet Ibrahim
* read link for use: /CLASS/php_PDO_turu_veritabani_sinifi
* website:
*/
// Google API key.
$key = "API-KIMLIGINI-YAZ";
// Sayfa Başı toplam kayıt 0 ile 50 arası.
$maxResults = "3";
function get_contents($Url) {
if (!function_exists('curl_init')){
die('CURL yüklü değil!');
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Youtube Arama Projesi</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="index.php?kayitlari=goster">
Youtube Arama Projesi:
<br>
<input name="query" value="CNC machine" type="text">
<input type="submit" value="Submit">
</form>
<br><br>
<?php
// bilgi var ise
if(isset($_GET["kayitlari"]) == "goster") {
// ilk sayfada ISTENILEN_SAYFA olmadığı için boş bir değişken oluşturalım pageToken
$pageToken ="";
// formdan veri varsa kelimeyi POST ile alalım yoksa GET ile kelimeyi ve sayfa dedeğişkenini alalım
if(isset($_POST["query"])){
$kelime = $_POST["query"];
} else {
$kelime = $_GET["kelime"];
$pageToken = $_GET["sayfa"];
}
//kayıtları çekeceğimiz adres ve verilerin json_decode ile ayrıştırılması
$gelen = "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=". $maxResults ."&pageToken=". urlencode($pageToken) ."&q=". urlencode($kelime) ."&key=". $key;
$veri = json_decode(get_contents($gelen));
// values istenilen sayfa bası kayıt sayısı kadar veri içeren degişkenimiz (bulunan sonuçlar)
// totalResults aranan kelime ile ilgili bulunan toplam sonuç
$values = $veri->items;
$totalResults = $veri->pageInfo->totalResults;
// sonunda tüm verileri tek seferde yazdırmak istediğim için değişkenim
$html = "";
// prevPageToken Önceki sayfa için kullanılacak değişken boş değil ise önceki sayfa için link olusturalım
if(isset($veri->prevPageToken)){
$html .= "<a href=\"index.php?kayitlari=goster&kelime=". $kelime ."&sayfa=". $veri->prevPageToken ."\"><button type=\"button\" name=\"OncekiButton\">Önceki Sayfa</button></a>";
}
// nextPageToken sonraki sayfa için kullanılacak değişken boş değil ise önceki sayfa için link olusturalım
if(isset($veri->nextPageToken)){
$html .= "<a href=\"index.php?kayitlari=goster&kelime=". $kelime ."&sayfa=". $veri->nextPageToken ."\"><button type=\"button\" name=\"SonrakiButton\">Sonraki Sayfa</button></a>";
}
// toplam sonucu sonra yazdırmak üzere html değişkenine ekliyoruz
$html .= "<hr><br><b>toplam sonuc:</b> ". $totalResults ."<br>";
$html .= "<hr><br>";
// values değişkeninde bulunan sonuçları parcalayıp verileri alıyoruz
// burada foreach döngüsü $maxResults kadar olacaktır çünkü $values değişkenimde okadar kayıtlı veri var
foreach($values as $value) {
// alttaki değişkenlerin tanımını türkçe yaptım anlaşılması için o yüzden tek tek açıklamıyorum
$baslik = $value->snippet->title;
$aciklama = $value->snippet->description;
$kanal_id = $value->snippet->channelId;
$kanal = $value->snippet->channelTitle;
$tarih = $value->snippet->publishedAt;
$resim = $value->snippet->thumbnails->default->url;
$resim_m = $value->snippet->thumbnails->medium->url;
$resim_h = $value->snippet->thumbnails->high->url;
$videoId = $value->id->videoId;
// burada foreach dönmeye devam ettikçe html değişkenimize yeni kayıtları da ekliyoruz
$html .= "<b>baslik:</b> ". $baslik ."<br>";
$html .= "<b>aciklama:</b> ". $aciklama ."<br>";
$html .= "<b>kanal_id:</b> ". $kanal_id ."<br>";
$html .= "<b>kanal:</b> ". $kanal ."<br>";
$html .= "<b>tarih:</b> ". $tarih ."<br>";
$html .= "<b>videoId:</b> https://www.youtube.com/embed/". $videoId ."<br>";
$html .= "<img src=\"". $resim ."\">";
$html .= "<img src=\"". $resim_m ."\">";
$html .= "<img src=\"". $resim_h ."\"><br><hr>";
}
// ve artık tamamlanmış html değişkenini echo komutu ile sayfaya yazdırıyoruz.
echo $html;
}
?>
</body></html>
Kopyala
javascript JQUERY ile youtube arama kodları
Bunu 2 dosya ile yapacağız bir hml ve bir javascript dosyamız var
Html dosyamız.
<!DOCTYPE html>
<html>
<head>
<title>Youtube Arama Projesi</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="search.js"></script>
</head>
<body>
<form id="search-term">
Youtube Arama Projesi:
<br>
<input id="query" value='CNC machine' type="text">
<input type="submit" value="Submit">
</form>
<button type="button" id="OncekiButton">Önceki Sayfa</button>
<button type="button" id="SonrakiButton">Sonraki Sayfa</button>
<div id="search-results">
</div>
</body>
</html>
Kopyala
Javascript dosyamız
API-KIMLIGINI-YAZ yazdığım yeri sizin API kimliği ile değiştirin.
/**
* Youtube API search example
* author: Mehmet Ibrahim
* read link for use: /CLASS/php_PDO_turu_veritabani_sinifi
* website:
*/
// Google API key.
var api_key = "API-KIMLIGINI-YAZ";
// Sayfa Başı toplam kayıt 0 ile 50 arası.
var maxKayit = "3";
// sonraki Önceki sayfa verisini tutan değişkenlerimiz
var nextPageToken, prevPageToken;
// sayfa yorumlaması tarayıcıda tamamlandığında]
$(document).ready(function () {
// bilgi var ise (form gönderildi ise)
$('#search-term').submit(function (event) {
event.preventDefault();
// formdaki veriyi jquery ile alalım
var searchTerm = $('#query').val();
// kayıtları getir
getRequest(searchTerm,"");
});
// sonraki butona tıklandığında
$('#SonrakiButton').click(function() {
var searchTerm = $('#query').val();
// kayıtları getir
getRequest(searchTerm,nextPageToken);
});
// önceki butona tıklandığında
$('#OncekiButton').click(function() {
var searchTerm = $('#query').val();
// kayıtları getir
getRequest(searchTerm,prevPageToken);
});
});
// kayıtları getir
function getRequest(searchTerm,PageToken) {
url = 'https://www.googleapis.com/youtube/v3/search';
var params = {
part: 'snippet',
key: api_key,
q: searchTerm,
maxResults:maxKayit,
pageToken:PageToken
};
$.getJSON(url, params, function (searchTerm) {
// kayıt varsa gösterecek olan function'a gönder
showResults(searchTerm);
});
}
// kayıtları parçalayacak olan function
function showResults(results) {
// sonunda tüm verileri tek seferde yazdırmak istediğim için değişkenim
var html = "";
// items istenilen sayfa bası kayıt sayısı kadar veri içeren degişkenimiz (bulunan sonuçlar)
// nextPageToken sonraki sayfa için kullanılacak değişken
// prevPageToken Önceki sayfa için kullanılacak değişken
// totalResults aranan kelime ile ilgili bulunan toplam sonuç
var items = results.items;
nextPageToken = results.nextPageToken;
prevPageToken = results.prevPageToken;
var totalResults = results.pageInfo.totalResults;
// toplam sonucu sonra yazdırmak üzere html değişkenine ekliyoruz
html += 'toplam sonuc: ' + totalResults + '<br>';
html += '<hr><br>';
// items değişkeninde bulunan sonuçları parcalayıp verileri alıyoruz
// burada each döngüsü maxResults kadar olacaktır çünkü items değişkenimde okadar kayıtlı veri var
$.each(items, function (index, value) {
// alttaki değişkenlerin tanımını türkçe yaptım anlaşılması için o yüzden tek tek açıklamıyorum
var baslik = value.snippet.title;
var aciklama = value.snippet.description;
var kanal_id = value.snippet.channelId;
var kanal = value.snippet.channelTitle;
var tarih = value.snippet.publishedAt;
var resim = value.snippet.thumbnails.default.url;
var resim_m = value.snippet.thumbnails.medium.url;
var resim_h = value.snippet.thumbnails.high.url;
var videoId = value.id.videoId;
// burada foreach dönmeye devam ettikçe html değişkenimize yeni kayıtları da ekliyoruz
html += 'baslik: ' + baslik + '<br>';
html += 'aciklama: ' + aciklama + '<br>';
html += 'kanal_id: ' + kanal_id + '<br>';
html += 'kanal: ' + kanal + '<br>';
html += 'tarih: ' + tarih + '<br>';
html += 'videoId: https://www.youtube.com/embed/' + videoId + '<br>';
html += '<img src="' + resim + '">';
html += '<img src="' + resim_m + '">';
html += '<img src="' + resim_h + '"><br><hr>';
});
// ve artık tamamlanmış html değişkenini jquery ile html sayfamızdaki <div id="search-results"> div'e yazdırıyoruz.
$('#search-results').html(html);}
Kopyala
ASP ile youtube arama kodları
API-KIMLIGINI-YAZ yazdığım yeri sizin API kimliği ile değiştirin.Ayrıca kodlar içinde include (dahil) edilen aspJSON1.17.asp dosyamız var asp motoru varsayılan olarak bir json decode içermediği için kodlar uzayacağindan bunları ayrıştırmaya kod yazıp boğuşmak yerine arşivimde bulunan bu hazır class'ı ekledim kod olarak içeriğini buraya yazmıyorum sayfa sonunda verdiğim link üzerinden indirdiğiniz dosyların içinde olacak.
<%
Response.Buffer = True
Response.CharSet = "UTF-8"
'/**
'* Youtube API search example
'* author: Mehmet Ibrahim
'* read link for use: /CLASS/php_PDO_turu_veritabani_sinifi
'* website:
'*/
'// Google API key.
key = "API-KIMLIGINI-YAZ"
'Sayfa başı toplam kayıt, 0 ile 50 arası.
maxResults = "3"
%>
<!--#include file="aspJSON1.17.asp" -->
<!DOCTYPE html>
<html>
<head>
<title>Youtube Arama Projesi</title>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="default.asp?kayitlari=goster">
Youtube Arama Projesi:
<br>
<input name="query" value='CNC machine' type="text">
<input type="submit" value="Submit">
</form>
<br><br>
<%
'// bilgi var ise
if Request.QueryString("kayitlari") = "goster" then
'// ilk sayfada ISTENILEN_SAYFA olmadığı için boş bir değişken oluşturalım pageToken
pageToken =""
'// formdan veri varsa kelimeyi POST ile alalım yoksa GET ile kelimeyi ve sayfa dedeğişkenini alalım
if not Request.Form("query") = "" then
kelime = Request.Form("query")
else
kelime = Request.QueryString("kelime")
pageToken = Request.QueryString("sayfa")
end if
html = ""
'// kayıtları çekeceğimiz adres ve verilerin aspJSON ile ayrıştırılması
videoAdres = "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults="& maxResults &"&pageToken="& pageToken &"&q="& kelime &"&key="& key
Set oJSON = New aspJSON
oJSON.loadJSON(videoAdres)
'// items istenilen sayfa bası kayıt sayısı kadar veri içeren degişkenimiz (bulunan sonuçlar)
'// totalResults aranan kelime ile ilgili bulunan toplam sonuç
'// nextPageToken sonraki sayfa için kullanılacak değişken
'// prevPageToken Önceki sayfa için kullanılacak değişken
set items = oJSON.data.item("items")
totalResults = oJSON.data.item("pageInfo")("totalResults")
nextPageToken = oJSON.data.item("nextPageToken")
prevPageToken = oJSON.data.item("prevPageToken")
'// prevPageToken Önceki sayfa için kullanılacak değişken boş değil ise önceki sayfa için link olusturalım
If not prevPageToken = "" Then
html = html & "<a href=""default.asp?kayitlari=goster&kelime="& kelime &"&sayfa="& prevPageToken &"""><button type=""button"" name=""OncekiButton"">Önceki Sayfa</button></a>"
end if
'// nextPageToken sonraki sayfa için kullanılacak değişken boş değil ise önceki sayfa için link olusturalım
If not nextPageToken = "" Then
html = html & "<a href=""default.asp?kayitlari=goster&kelime="& kelime &"&sayfa="& nextPageToken &"""><button type=""button"" name=""SonrakiButton"">Sonraki Sayfa</button></a>"
end if
'// toplam sonucu sonra yazdırmak üzere html değişkenine ekliyoruz
html = html & "<hr><br><b>toplam sonuc:</b> "& totalResults &"<br>"
html = html & "<hr><br>"
'// values değişkeninde bulunan sonuçları parcalayıp verileri alıyoruz
'// burada for each döngüsü maxResults kadar olacaktır çünkü items değişkenimde okadar kayıtlı veri var
for each item in items
'// alttaki değişkenlerin tanımını türkçe yaptım anlaşılması için o yüzden tek tek açıklamıyorum
baslik = items(item)("snippet")("title")
aciklama = items(item)("snippet")("description")
kanal_id = items(item)("snippet")("channelId")
kanal = items(item)("snippet")("channelTitle")
tarih = items(item)("snippet")("publishedAt")
resim = items(item)("snippet")("thumbnails")("default")("url")
resim_m = items(item)("snippet")("thumbnails")("medium")("url")
resim_h = items(item)("snippet")("thumbnails")("high")("url")
videoId = items(item)("id")("videoId")
'// burada foreach dönmeye devam ettikçe html değişkenimize yeni kayıtları da ekliyoruz
html = html & "<b>baslik:</b> "& baslik &"<br>"
html = html & "<b>aciklama:</b> "& aciklama &"<br>"
html = html & "<b>kanal_id:</b> "& kanal_id &"<br>"
html = html & "<b>kanal:</b> "& kanal &"<br>"
html = html & "<b>tarih:</b> "& tarih &"<br>"
html = html & "<b>videoId:</b> https://www.youtube.com/embed/"& videoId &"<br>"
html = html & "<img src="""& resim &""">"
html = html & "<img src="""& resim_m &""">"
html = html & "<img src="""& resim_h &"""><br><hr>"
next
'// ve artık tamamlanmış html değişkenini Response.write komutu ile sayfaya yazdırıyoruz.
Response.write html
End If
%>
</body>
</html>
Kopyala
Notlar
Kodlar sunucudan çekilen veri içinden hemen hemen size gerekli olacak (video başlığı, kanal adı, kanal id, video açıklama, bulunan sonuç sayısı, video id, yayınlanan tarihi, video ile ilişkili 3 resim adresi) gibi tüm verileri çeker. ihtiyacınız olmayanların kodlarını silerek kodları rahatlatabilirsiniz gerçi herhangi bir yavaşlık söz konusu değil fakat gereksiz olan veriyi neden döngü içinde uğraştıralım unutmayın bu sadece bizim tarafımıza etki eder google üzerinden her zaman tüm veri cekilecektir.
Ornekler verileri direk sayfaya yazdırır sitenize göre düzenlemeniz gerekiyor yani kodlar bize video id verir ancak bunu sayfada oynatmaz sayfada oynatmak için video id iframe ile sağlanmalıdır Örnek: <iframe width="640" height="360" src="https://www.youtube.com/embed/VIDEO_ID_BURAYA" frameborder="0" allowfullscreen></iframe>
Tekrar hatırlatmada fayda var Google API key almadan kodları çalıştıramazsınız.
Arşiv dosyaları: Youtube_Arama.rar
Evet bu yazımız burada son buluyor çok fazla açıklama yok kodlar arasındaki notlarda zaten detayları açıkladım üstesinden gelemediğiniz veya anlamadığınız konu olursa yorum yazabilirsiniz
İyi çalışmalar
Nesne gerekli: 'oJSON.data.Item(...)'
/youtube/Youtube_Arama/asp_ornek/default.asp, satır 63
hatası alıyorum.
ne kadar kurcalasam da sorunu çözemedim.