Google'dan API ile PHP ASp ve javascript kullanarak Youtube arama verilerini çekmek ve sayfada göstermek

Youtube arama verilerini çekmek 21 Ocak 2018, 23:18

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-KIMLIGIKopyala

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

Youtube arama verilerini çekmek Yorumları:

Bu yazıya toplam 3 yorum yapılmış.

Toplam 1 sayfa yorum var, Gösterimde olan yorum sayfası 1

24 Temmuz 2018, 03:39

eren yazdı:

Cevapla

Microsoft VBScript çalışma hatası hata '800a01a8'

Nesne gerekli: 'oJSON.data.Item(...)'

/youtube/Youtube_Arama/asp_ornek/default.asp, satır 63

hatası alıyorum.
ne kadar kurcalasam da sorunu çözemedim.

24 Temmuz 2018, 10:08

Mehmet Ibrahim cevapladı:

Merhaba Eren kodları az önce tekrar test ettim sorunsuz çalışıyor. Geçersiz bir API kimliği 63. satırdaki aynı hatayı döndürüyor, API kimliği aldınız mı acaba üstte nasıl alınacağını anlattığım sayfanın adresini verdim atlamış olabilirsiniz tekrar kontrol edin.

10 Ekim 2018, 12:29

Serkan Yildirim yazdı:

Cevapla

hocam bu youtube yayinlarini cekmenin bir videolu anlatimi yokmu

23 Ocak 2019, 05:03

stan laurey yazdı:

Cevapla

php üzeri nasil youtube linkleri oynatiriz?

Yorum yaz.

Bağlan Bağlan Bağlan

Yorumunuza cevap yazilmasi durumunda bildiri almak istiyor musunuz?
Hayır. Evet.