Flickr Stream di Blog Anda
Jika anda pengunjung setia website ini, anda mungkin mengamati ada sedikit tambahan di sidebar bagian bawah. Yah, saya masukkan sedikit javascript di sidebar untuk menampilkan stream foto dari Flickr. Juga dengan memanfaatkan aplikasi online semacam Yahoo Pipes. Ngga akan bicara panjang lebar, ini source-code nya. Silahken kupipes ke blog anda.
<script type="text/javascript">
function render(data) {
var str = new Array();
var max = 6;
for (var i=0; i<data.value.items.length; i++) {
if (i >= max) break;
var item = data.value.items[i];
str.push('<div class="flickrItem"><a href="' + item.link + '" title="' + item.title.replace("\"", """) + '"><img src="' + item['media:group']['media:content']['media:thumbnail'].url + '" /></a></div>');
}
var body = document.getElementsByTagName("body")[0];
var div = document.getElementById("flickr");
div.innerHTML = str.join("\n");
}
var __onload = window.onload || function(){};
window.onload = function() {
__onload();
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=7114ce50d2699c7fe2d920a8d2aa17f0&_render=json&_callback=render';
script.onload = function(){ head.removeChild(script); };
head.appendChild(script);
};
</script>
<div id="flickr"></div>
Sedikit penjelasan teknis (ngga kuat nahan nih) Script diatas memanfaatkan DOM untuk menambahkan tag script di head agar javascript bisa mengakses URL selain URL di domain anda. (CrossSite Scripting).
Semoga berguna ;)
woo.. yg tadi to?
aq sebenernya ngga setia fer
tapi selalu km pamerin kalo ada yg baru
jadi mau ga mau kudu ngeliat ;))
err… mesti enable javascript ya?
*polos*
hohohoho… ada json…
Saya juga ngga setia ngunjungin kok, cuma baca dari RSS reader :D
sip-sip
sip…sip…
Apa itu mas Yahoo Pipes? Tanpa Server Side Programing sama sekali?
@jauhari
Service yahoo untuk manipulasi RSS. Mayan keren tuh..
[...] dari posting saya tentang Flickr streams, sekarang lebih gampang untuk memajang foto2 keren flickr di sidebar / footer blog anda. Cukup [...]