Mesin Pencari Image dengan Google API

Skrip auto konten dalam tutorial cara membuat blog auto-generated content sebenarnya sangat banyak fungsinya. Proses generate konten yang dihasilkan bukan hanya dalam bentuk konten tertulis saja, tapi juga gambar, book, news, dan video. Tapi kali ini kita membahas Google Search API untuk image-nya saja dulu. Seperti halnya cara kerja search engine gambar dari Bing API pada tutorial sebelumnya, Google Search API image ini lebih banyak fungsi yang kita bisa tambahkan dan hasil pencariannya juga lebih banyak dibandingkan dengan menggunakan API Bing.

Bagaimana cara membuat mesin pencari Image dengan Google API di halaman search result WordPress?, ikuti saja langkah-langkahnya sebagai berikut:

1. Buka editor search.php blog wp kamu.

2. Kode 1 (Script proses keyword) – Tempatkan Kode berikut di paling atas sebelum kode <?php get_header(); ?>, jangan lupa daftarkan situs kamu di Google API sebelumnya untuk mendapatkan API key http://code.google.com/apis/ajaxsearch/key.html

<?php define('GOOGLE_API_KEY', '');
function pete_curl_get($url, $params){$post_params = array();
foreach ($params as $key => &$val) {
if (is_array($val)) $val = implode(',', $val);
$post_params[] = $key.'='.urlencode($val);
}
$post_string = implode('&', $post_params);
$fullurl = $url."?".$post_string;
$ch = curl_init();curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);curl_setopt($ch, CURLOPT_URL, $fullurl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040608'); //kamu bisa pake user agent yang lain, lihat listnya di sini www.user-agents.org
$result = curl_exec($ch);curl_close($ch);
return $result;
}function perform_google_web_search($termstring)
{
$start = 0;
$result = array();
while ($start<10) //kamu bisa ganti angka "50" untuk jumlah list  yang ditampilkan
{
$searchurl = 'http://ajax.googleapis.com/ajax/services/search/images?v=1.0'; 
$searchurl .= '&key='.'ABCDEFG'; //ganti ABCDEFG dengan kode api Google http://code.google.com/apis/ajaxsearch/signup.html
$searchurl .= '&start='.$start;
$searchurl .= '&rsz=large'; //kamu bisa pake "small" untuk menampilkan hanya 4 (maksimal) pencarian
$searchurl .= '&filter=0'; //kamu bisa ganti "filter=1" untuk mem-filter hasil pencarian
$searchurl .= '&q='.urlencode($termstring);
$response = pete_curl_get($searchurl, array());
$responseobject = json_decode($response, true);
if (count($responseobject['responseData']['results'])==0)
break;
$allresponseresults = $responseobject['responseData']['results'];
foreach ($allresponseresults as $responseresult)
{
$result[] = array(
'url' => $responseresult['visibleUrl'],
'title' => $responseresult['titleNoFormatting'],
'thumbnail' => $responseresult['tbUrl'],
'originalurlimage' => $responseresult['originalContextUrl'],
);
}
$start += 8;
}
return $result;
}if (isset($_REQUEST['s'])) {
$termstring = urldecode($_REQUEST['s']);
} else {
$termstring = '';}
?>

2.Kode 2 (hasil yang ditampilkan) - Tempatkan kode berikut sebelum kode <?php endif; ?>.

<?php
function hilangkan_spesial_karakter($result) { //fungsi hilangkan semua spesial karakter
	$result = strip_tags($result);
	$result = preg_replace('/&.+?;/', '', $result); 
	$result = preg_replace('/\s+/', ' ', $result);
        $result = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', ' ', $result);
	$result = preg_replace('|-+|', ' ', $result);
        $result = preg_replace('/&#?[a-z0-9]+;/i','',$result);
        $result = preg_replace('/[^%A-Za-z0-9 _-]/', ' ', $result);
	$result = trim($result, ' ');
	return $result;
}
function CleanFileNameBan($result){
$bannedkey = array("key","key","key"); //masukkan kata kunci satu persatu untuk menghindari kata-kata yang tidak diinginkan.
$result = str_replace($bannedkey, '',$result);
$result = trim($result);
return $result;
}
?>
<?php $termstring = $s ?>
<?php if ($termstring!='') {
$googleresults = perform_google_web_search($termstring);
//Kamu bisa ganti kode <h1> serta test yang ada sesuai dengan kode html dan text keinginan kamu begitu juga dengan yang lainnya
print '<h1>Gambar  '.CleanFileNameBan(hilangkan_spesial_karakter($s)).'  yang terkait:</h1>'; 
print '<p style="font-weight:bold">Powered by Google</p>';
foreach ($googleresults as $result) {
print '<div class="post">';
print '<h1 class="title"><a href="'.$result['originalurlimage'].'">'.$result['title'].'</a></h1>';
print '<a href="'.$result['originalurlimage'].'"><img src="'.$result['thumbnail'].'"/></a>';
print '<p style="color:#777777">Sumber: '.$result['url'].'</p>';
print '</div>';
}
}
?>

Selesai!

Penjelasan bagaimana hasil generate kode di atas bisa menampilkan gambar
Saya cuma mengubah referensi kode sebelumnya dengan kode berikut:

.....
'url' => $responseresult['visibleUrl'],// Kode "visibleUrl" untuk menampilkan alamat url gambar
'title' => $responseresult['title'], //Kode "title" untuk menampilkan title gambar
'thumbnail' => $responseresult['tbUrl'], // Kode "tbUrl" untuk menampilkan thumbnail gambar
'originalurlimage' => $responseresult['originalContextUrl'],//Kode "originalContextUrl" untuk menampilkan link ke halaman gambar aslinya
.....

Kode Hasil Proses

.....
print '<h1 class="title"><a href="'.$result['originalurlimage'].'">'.$result['title'].'</a></h1>';
print '<a href="'.$result['originalurlimage'].'"><img src="'.$result['thumbnail'].'"/></a>';
print '<p style="color:#777777">Sumber: '.$result['url'].'</p>';
.....

Kamu bisa belajar mengubah referensi kode tersebut dengan kode dari Google API, referensinya di sini. Selamat memodifikasi dan mencoba Sob! :)

Please Note
Ikuti petunjuk-petunjuk yang ada dalam kode.
Baca baik-baik aturan penggunaan Google API jika mau menggunakan skrip ini.
Advance user only!

Update 30 APRIL 2010
Skrip diubah untuk menyesuaikan dengan aturan main Google AJAX Search API

Baca juga tips WordPress untuk menghentikan pencurian feed konten blog WorPress Anda.


 Bagikan

Membuat Search Engine Gambar di WordPress

Katanya satu gambar bisa menunjukkan seribu bahasa, bagaimana kalo banyak gambar dalam halaman pencarian blog WordPress kamu? Wah bisa menunjukkan berapa bahasa yah?! :mrgreen:
Setelah sebelumnya ada tutorial membuat search engine ebook dalam format PDF dengan menggunakan API search engine Bing, sekarang kita buat mesin pencari dalam format gambar to’ di halaman pencarian WordPress. Skrip kali ini agak berbeda dengan skrip auto-generated content, tapi fungsinya sama saja, kode ini meng-generate image dengan memanfaatkan API suatu search engine. Kita pake API Bing saja yah :)

Cara membuat search engine gambar di halaman search result wordpress, berikut langkahnya: (Saya pake WordPress Theme Default sebagai contoh penempatan kode)
1. Masuk search.php theme WordPress kamu
2. Kopas kode berikut dan tempatkan sebelum kode <?php endwhile; ?> dan sesudah kode <?php else : ?>:

<?php function CleanFileNameBan($result){
$bannedkey = array("key","key","key"); //masukkan kata kunci satu persatu untuk menghindari kata-kata yang tidak diinginkan.
$result = str_replace($bannedkey, '',$result);
$result = trim($result);
return $result;
}
function hilangkan_spesial_karakter($result) { //fungsi hilangkan semua spesial karakter
	$result = strip_tags($result);
	$result = preg_replace('/&.+?;/', '', $result); 
	$result = preg_replace('/\s+/', ' ', $result);
        $result = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', ' ', $result);
	$result = preg_replace('|-+|', ' ', $result);
        $result = preg_replace('/&#?[a-z0-9]+;/i','',$result);
        $result = preg_replace('/[^%A-Za-z0-9 _-]/', ' ', $result);
	$result = trim($result, ' ');
	return $result;
}
?>
<?php 
if (isset($s)) { 
$request = 
'http://api.search.live.net/json.aspx?Appid=KODEAPIBING&sources=image&Image.Count=5&query=' . urlencode($s); $response  = file_get_contents($request); 
$jsonobj  = json_decode($response); 
echo('<div ID="post">');                     
foreach((array)$jsonobj->SearchResponse->Image->Results as $value) 
{
echo('<h2 class="title">'.CleanFileNameBan(hilangkan_spesial_karakter($value->Title)).'</h2>'); 
echo('<div class="entry"><a target="_blank" rel="nofollow" href="' . $value->Url . '">'); 
echo('<img style="border:none" src="' . $value->Thumbnail->Url. '"></a></div>');
echo('<p style="color:#777777">Sumber: ' . $value->Url. '</p>'); 
} 
echo(''); 
} ?>

Kode line 30 $value-/>Thumbnail->Url tidak pake garis miring (/) jadinya gini $value->Thumbnail->Url

3. Ganti kata KODEAPIBING dengan kode API dari BING di line 22 (daftar di http://www.bing.com/developers/createapp.aspx). Gambar dalam bentuk Thumbnail yang jumlahnya (angka 5), bisa ganti dengan jumlah yang diinginkan pada kode line 22 ...Image.Count=5...

Selesai!

Silahkan modifikasi sendiri kode html yang ada untuk menyesuaikan dengan theme WordPress kamu. Selamat mencoba sob! :)

Update 28 April 2010

  • Pada Line 34 kode sebenarnya seperti ini echo(‘</div>’);
  • Ada penambahan kode (array) pada line 26 untuk menghilangkan kode error Invalid argument supplied for foreach()

Please Note
Ternyata gambarnya bisa juga di-index oleh search engine :mrgreen:
Jangan lupa pasang atribusi Bing untuk hasil pencariannya.
Penempatan kode tergantung dari theme yang dipakai. Silahkan berkreasi sendiri.
Kasi tau yach kalo ada error. :)