WEB : Display Flickr photos on your website

2006 Juli 27
by agus hery

Beberapa pemilik blog kini semakin banyak yang melengkapi tampilan blognya dengan menampilkan album photo di salah satu sudut blognya.Hitung-hitung sebagai media aktualisasi, blog memang ampuh untuk mewujudkan keinginan menampilkan sosok yang lebih manusiawi dengan kemunculan photo-photo pribadi.Jadi bila photo kita terlalu sayang hanya dinikmati sendiri, knapa tidak mencoba menyebarkannya lewat blog?

Salah satu layanan photo album yang popular di kalangan blogger adalah flickr.Layanan gratis dari Yahoo ini memang paling menarik, baik dari segi tampilan maupun dukungan tool dibelakangnya.Untuk itu kita akan mencoba mendapatkan kode HTML dari flickr agar bisa digabungkan dengan template blogger kita.Kita mulai?

Pertama kali yang perlu dilakukan jelas memiliki akun di flickr.Bilapun tidak, yahoo tidak berkeberatan kita menggunakan akun email kita di yahooo sebagai user login di flickr.Kita akan membicarakan cara mendapatkan kode HTMLnya, untuk itu disini tidak dibahas bagaimana cara mengupload photo, mengorganisasikan, membuat group atau setingan photo album lainnya.

1. Untuk itu kita membutuhkan badge dengan mengakses tautan http://www.flickr.com/badge_new.gne.

Disini ada 2 pilihan mode tampilan badge yang akan kita pasang di blog.Yakni an HTML badge dan a Flash badge.Keduanya diberikan keleluasaan memilih mengingat kelebihan dan kekurangan badge yang terpilih.HTML sangat cocok untuk yang lebih mengedepankan sisi kesederhanaan.Sedang Flash mengagungkan sisi penampilan.Kekurangannya adalah versi HTML sangat monoton, sedangkan flash membutuhkan dukungan flash plugin di browser pengaksesnya.Jadi silahkan pilih salah satu dari kedua pilihan ini.

2.Pilih photo yang akan dipublikasikan.
Ini bisa jadi photo milik kita sendiri, atau photo temen kita.

Bila memilih opsi photo sendiri maka akan dipertajam pilihannya menjadi semua photo publik, atau photo dengan tag khusus ataupun publik photo yang telah kita Set sebelumnya.Saatnya untuk memilih salah satu agar kita semakin dekat dengan kode yang kita cari.

3.Kostumasi warna.
Ini bagian yang paling menyenangkan.Memilih warna yang kita kehendaki.Tak perlu takut bila kita tak mengetahui kode heksa dari warna yang kita inginkan.Terdapat panel warna yang disediakan untuk memudahkan kerja kita.

Kali ini gunakan feeling ya untuk mendapatkan warna yang sesuai dengan blog kita secara keseluruhan.Bagi yang tak ingin repot dengan warna pilihan terahir pun disediakan, yakni no background dan no border.Sepertinya ini cocok dengan yang diburu waktu mengejar pesawat ya :D .Setelah itu terahir kita pilih

4.Here comes our badges!

Woala….kodenyapun muncul dibagian ini.Jadi tunggu apalagi…salin dan pasang kode ini di blogmu.

20 Responses leave one →
  1. 2006 Juli 28
    Meti Mediyastuti permalink

    ass wr wb
    kang makin hari makin asyik juga ya materinya…..naah yang ini sebenernya aku tunggu…gimana dong…dari dulu pengen ada album photo di blogku…musti accout dulu ya..ke flicker…bantuin ya…kalau ukuran photonya gimana..???

    makasih ya bantuannya

    wassalam,
    meti

  2. 2006 Juli 28
    Kirana permalink

    makasi pak..postingnya… jadi inget deh :D

  3. 2006 Agustus 7
    vadis permalink

    Nah ini dia tips yang saya tunggu-tunggu (meskipun belum saya minta). Tinggal dilihat hasilnya di blogku (seperti yang dulu saya pernah tanya).
    Makasih banyak, Mas Agus!

  4. 2007 Maret 3
    Anonymous permalink

    mas klo saya copy langsung code-nya ke page index, kok style css-nya malah bikin page blog saya error, jadi sakarang flickr saya tanpa css.
    kenapa ya???

  5. 2007 Maret 5
    aguSHery permalink

    ada baiknya dicek juga apakah kode yang disimpan di template tak ada yang korup, alamat blognya?

  6. 2007 Maret 6
    - Nilla - permalink

    Makasih ilmunya ya Mas Agus! udh diaplikasiin tuh! :D

  7. 2007 Maret 8
    Kian permalink

    makasih kang…
    akhirnya bisa juga

  8. 2007 April 1
    sachroel permalink

    mo nanya nih kang,

    buat nampilin foto, saya make marquee trus langsung link ke foto2 yg sudah di upload sebelumnya di geocities.

    nah….di bandingin dengan “display flickr photos” ini, kira2 lebih berat yg mana kang?

  9. 2007 April 2
    aguSHery permalink

    pro sachroel, aku perlu tau ukuran-ukuran gambar di geocities…ukuran thumbnail kah?

    karena bila melihat layanan flicr memang menampilkan ukuran kecil agar lebih ringan dimunculkan gambarnya…. dan flicr juga menampilkan dalam bentuk slide flash yang secara teknis menajdi sangat ringan….

    kalo soal server sih keduanya masih berada di luar negeri, jadi berat karena aksesnya yg jauh bisa jadi alasan…

    kesimpulannya…bila ukuran di geocities besar, maka mending di flickr saja….

  10. 2007 Agustus 14
    Fajar Nugraha permalink

    mas, kalo mo tampilin penyedia layanan foto lain spt rock.you, slide.com ato photobucket, apakah prosesnya sama aja? ini cuma bisa ditampilin di widget ya? bisa ga dimasukin ke postingan artikel?

  11. 2007 Agustus 16
    aguSHery permalink

    prosesnya bisa jadi berbeda, dan secara teknis bila kita menerima kode HTML dari penyedianya, kita bisa pasang di bagian mana saja di blog kita, sekalipun dalam postingan misalnya.

  12. 2008 Januari 2
    borsalino permalink

    saya sudah mencoba beberapa kali meng-copy kode tersebut di wordpress, namun selalu gagal. penyebabnya adalah, kode javascript selalu “hilang” ntah kemana …

  13. 2008 Januari 3
    aguSHery permalink

    borsalino, dipasang di blog wordpress.com ato domain sendiri yang menggunakan wp? karena bila menggunakan wordpess.com cukup tambahkan widget dan pilih Flickr. Imbuhkan alamat feed flickrnya disitu.

  14. 2008 Juni 23
    estopan permalink

    di wordpress susah ya, kan html/ java scrift gk bisa. gimana caranya

  15. 2008 Juni 25

    memang ada batasan widget berjenis HTML untuk dipasangkan di wordpress.com (gratisan). Biasanya ini diakali dengan jembatan widget, coba masuk ke Design – Widget dan tambahkan jenis Flickr. Nanti akan bisa terlihat seperti di wp saya ini.

  16. 2009 Februari 18

    thanks bos, tulisan kamu bermanfaat banget buat aq. aq doakan semoga kamu sukses dan selalu mendapat inspirasi yang baru.
    terus menulis bos, sampe menulis dilarang
    ^_^

  17. 2009 Maret 23

    Mas aku seorang newbie…
    Kok aku pasang kode diteks ga bisa ya????
    mohon bantuannya…
    Txs

  18. 2009 April 14

    Pasang kode apa nih kalo boleh tahu? slama ini masangnya pake bantuan widget apa?

  19. 2009 April 14

    Makasih!

Trackbacks & Pingbacks

  1. Copy-Paste Masal | Cosa Aranda

Leave a Reply

Note: You can use basic XHTML in your comments. Your email address will never be published.

Berlangganan umpan komentar ini melalui RSS