Month: September 2012

Sebelumnya sudah dibahas PHP API Video YouTube yang paling sering dilihat (Top Rated), kali ini adalah tutorial penggunaan API YouTube Search digabungkan dengan fancyBox jQuery yang diterapkan di halaman pencarian WordPress (WordPress Search Results Page). Versi API YouTube yang digunakan dalam tutorial ini adalah versi 2, sedangkan versi 3 masih dalam experimental. Kombinasi dengan FancyBox jQuery di sini berguna untuk menampilkan player video YouTube dalam bentuk window pop-up ketika gambar diklik.

Cara implementasinya sebagai berikut:

1. Download file api-youtube-fancybox-media.zip (Kode PHP API YouTube Search + fancyBox jQuery) di sini.
2. Extrak file zip tersebut, dan simpan folder dengan nama fancymedia di root theme WP Anda.
3. Pasang kode berikut di header.php sebelum kode </head>

   <script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/fancymedia/jquery-1.8.0.min.js"></script>
   <script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/fancymedia/jquery.fancybox.pack.js"></script>
   <script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/fancymedia/jquery.fancybox-media.js"></script>
   <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'template_url' ); ?>/fancymedia/jquery.fancybox.css" media="screen" />
   <script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/fancymedia/fb.setting.js"></script>
   

4. Simpan kode API YouTube dalam file php-yt.php di search.php. Kode PHP API YouTube seperti ini:

   <form method="get" action="<?php echo trailingslashit( home_url() ); ?>">
         <input class="input" type="text" name="s" value="<?php if ( is_search() ) echo esc_attr( get_search_query() ); else esc_attr_e( 'Search Video...'); ?>" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
         <select name="o">
         <option value="relevance">Relevance</option>
         <option value="published">Publication time</option>
         <option value="viewCount">User views</option>
         <option value="rating">User rating</option>
         </select>
         <select name="i">
           <option value="10">10</option>
           <option value="25">25</option>
           <option value="50">50</option>
           <option value="100">100</option>
         </select>
         <input type="submit" value="search"/>  
   </form>
    <?php
         if (!isset($_GET['s']) || empty($_GET['s'])) {
           die ('ERROR: Please enter one or more search keywords');
         } else {
           $s = $_GET['s'];
           $s = ereg_replace('[[:space:]]+', ' ', trim($s));
           $s = urlencode($s);
         }
         if (!isset($_GET['o']) || empty($_GET['o'])) {
           $o = 'viewCount';
         } else {
           $o = htmlentities($_GET['o']);
         }
         if (!isset($_GET['i']) || empty($_GET['i'])) {
           $i = 25;
         } else {
           $i = htmlentities($_GET['i']);
         }
         if (!isset($_GET['pageID']) || $_GET['pageID'] <= 0) {
           $t = 1;  
         } else {        
           $pageID = htmlentities($_GET['pageID']);
           $t = (($pageID-1) * $i)+1;  
         }
       // Setting URL Feed
       $ytfeedURL = 'https://gdata.youtube.com/feeds/api/videos?q='.$s.'&orderby='.$o.'&max-results='.$i.'&start-index='.$t.'&v=2';
       $ytxml = simplexml_load_file($ytfeedURL);
       ?>
         <h1><?php echo $ytxml->title; ?></h1>
       <?php
       foreach ($ytxml->entry as $entry) {
         $media = $entry->children('http://search.yahoo.com/mrss/');
         $attrs = $media->group->player->attributes();
         $watch = $attrs['url']; 
         $attrs = $media->group->content->attributes();
         $player = $attrs['url']; 
         $attrs = $media->group->thumbnail[2]->attributes();
         $thumbnail = $attrs['url']; 
         $yt = $media->children('http://gdata.youtube.com/schemas/2007');
         $attrs = $yt->duration->attributes();
         $length = $attrs['seconds']; 
         $yv = $entry->children('http://gdata.youtube.com/schemas/2007');
         if ($yv->statistics) {
           $attrs = $yv->statistics->attributes();
           $viewCount = $attrs['viewCount']; 
         } else {
           $viewCount = 0; 
         } 
         $gd = $entry->children('http://schemas.google.com/g/2005'); 
         if ($gd->rating) {
           $attrs = $gd->rating->attributes();
           $rating = $attrs['average']; 
         } else {
           $rating = 0; 
         } 
         ?>
         <div class="item">
           <span class="title">
             <a class="fancybox-media" href="<?php echo $watch; ?>"><?php echo $media->group->title; ?></a>
           </span>
           <p><?php echo $media->group->description; ?></p>
           <p>
             <span class="thumbnail">
               <a class="fancybox-media" href="<?php echo $player; ?>"><img src="<?php echo $thumbnail;?>" /></a>
               <br/>
               Click to play
               <br/>
             </span>
   <span class="attr">Duration:</span> <?php printf('%0.2f', $length/60); ?> min. | <span class="attr">Rating:</span> <?php echo $rating; ?> | <span class="attr">Views:</span> <?php echo $viewCount; ?> | <span class="attr">By:</span> <?php echo $entry->author->name; ?>        
           </p>
         </div>      
       <?php
       }
       ?>
   

5. Save pekerjaan Anda.

Tampilannya seperti gambar berikut:

Deskripsi

• Dalam kode kode PHP API YouTube, terdapat kode class=”fancybox-media”, fungsinya untuk fancyBox media player YouTube pada saat diklik.
• Disable klik kanan untuk gambar dan setting ukuran (width/height) fancyBox player YouTube terdapat pada file fb.setting.js.
• Anda bisa menerapkan tutorial ini di platform lainnya selain WordPress dengan mengganti parameter url s dengan parameter url yang Anda inginkan.

Referensi

• Dokumentasi API YouTube versi 2 ~ https://developers.google.com/youtube/2.0/reference
• File FancyBox jQuery ~ http://fancybox.net/