den / dental / dieyoung / 15june

Hi dab! Berhubung banyak yang bertanya bagaimana cara saya ngoprek Wordpress hingga bisa seperti 15june.com sekarang, saya akan bocorkan bagaimana cara mengkombinasi Twitter, Flickr, Journal, Delicious dan Last.fm dalam sebuah blog berbasis Wordpress.

Inilah bahan-bahan yang saya gunakan:

• Wordpress 2.5
• del.icio.us for Wordpress
• FeedBurner FeedSmith
• Last.fm for Wordpress
• Twitter Tools
• FeedWordPress

Skenario Awal, Custom Flickr Post

Awalnya saya kebingungan bagaimana caranya mengambil gambar-gambar saya di Flickr via RSS, pasalnya default RSS yang disediakan oleh Flickr hanya menampilkan gambar berukuran ’small’ / kecil. Kemudian saya memutuskan menggunakan FlickrAPI. Setelah tanya sana-sini akhirnya saya berhasil membuat sebuah file RSS yang di-generate dari script PHP, tentu saja dengan menampilkan ukuran ‘medium’.

Ternyata, tidak semua gambar di Flickr yang mau saya tampilkan. Jadi, cara diatas tidak berhasil dan akhirnya saya menggunakan fasilitas Blog This dari Flickr sendiri. Fasilitas ini memungkinkan saya untuk memposting gambar berukuran medium dan tentunya saya bebas memilih gambar yang mana dan dengan custom HTML pula.

Format post saya begini:
<a href="{photo_url}" style="background: transparent url('{photo_src}') no-repeat center center;" title="{photo_title}"><img src="{photo_src}" alt="{photo_title}"></a>
<div class="flickr-desc">{photo_desc}</div>

Kenapa saya pilih format seperti ini? Jawabannya berhubungan dengan CSS yang akan saya jelaskan dibawah. This is what I want.

Narsisme Twitter

Saya jarang ngeblog, sudah menjadi stereotype di otak saya bahwa blog itu mulai membosankan dan wasting time. Kalaupun saya ada waktu, malah lebih banyak main di Flickr :D Micro Blogging adalah yang cocok buat orang pemalas seperti saya. Apalagi Twitter mendukung blogging via SMS, that is another fun.

Saya memakai plugin keren dari Alex King, Twitter Tools dan memasukkan kedalam body post, dirangkum per hari. Jadi kamu kadang melihat post berjudul “Twitter for 2008-05-13″. Plugin ini punya option untuk diset demikian.

Goodbye Ma.gnolia, Welcome Del.icio.us

Sebelumnya saya memakai service social-bookmarking dari ma.gnolia, I don’t have problem with that tapi karena satu hal dan lainnya, saya bermigrasi ke del.icio.us. Plugin yang saya pakai adalah del.icio.us for Wordpress, plugin ini tidak masuk dalam body post tapi independen di bagian sidebar. Saya hanya integrasikan link del.icio.us dalam general RSS dengan menggunakan Feedburner.

Personality Last.fm

Saya tidak berharap pengunjung melihat 10 last music tracks yang saya dengarkan, tapi ini saya gunakan agar saya sendiri tahu track list saya selama seminggu apa saja. Mulan Jameela dan Parish Hilton juga oke, Kangen Band masuk black list, Cradle of Filth jadi nina-bobo, seru!

Journal, Long Post Blogging

Saya tidak mau membebani pengunjung menyedot semua aktifitas internet saya begitu saja. Mungkin untuk beberapa orang akan merasa terganggu dan useless. Maka dari itu saya install 2 Wordpress! Kenapa dua? Konyol memang, saya mengalami kesulitan untuk membagi RSS untuk setiap kategori karena plugin FeedBurner FeedSmith me-redirect semua RSS menjadi satu. Contohnya untuk RSS dalam kategori Flickr: 15june.com/flickr/feed/ akan otomatis ke feeds.feedburner.com/15june. That is sucks.

Maka dari itu saya install Wordpress di dalam folder /archive/ demi mendapatkan RSS tersendiri agar bisa di-subscribe tanpa embel flickr, twitter dll. Kemudian RSS dari Wordpress dalam folder /archives/ ini saya sedot dengan FeedWordPress di Wordpress dalam /root/ .

Eh, did I said about categories? Ah ya! Setelah konsep dan plugin bekerja sesuai keinginan, saya mulai berpikir tentang CSS. Bagaimana caranya dengan CSS memisahkan style antara postingan Flickr, Twitter dan Journal dalam body post. This is the best part.

Dancing With CSS

Konsep ini terpikir setelah saya berhasil meng-convert semua web berbasis Joomla 1.5 di kantor, yaitu penambahan custom sufix class dan di-generate otomatis. Maksudnyeeeee????

Begini, body post yang berasal dari Twitter, Flickr dan Journal dibagi dalam kategori berbeda sesuai dengan namanya, jadi kalau post berasal dari Flickr otomatis masuk ke kategori flickr (ini bisa diset kok, tinggal cari ubek-ubek di dalam admin).

Maka dari itu sodara-sodariku sekalian, kode looping saya modifikasi dan menambahkan tag khusus menjadi seperti ini:
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . '-entry';}?>

Paham adik-adik? Tidak??? bagoooosss…
Lengkapnya jadi begini:

--------------------------
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div class="<?php foreach((get_the_category()) as $category) { echo $category->cat_name . '-post';}?>" id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Posted: <?php the_time('F jS, Y') ?>" class="<?php foreach((get_the_category()) as $category) { echo $category->cat_name . '-title';}?>"><?php the_title(); ?></a></h2>

<div class="<?php foreach((get_the_category()) as $category) { echo $category->cat_name . '-entry';}?>" id="post-<?php the_ID(); ?>">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

</div>

<?php endwhile; ?><?php else : ?><?php endif; ?>
--------------------------

Dengan demikian, Wordpress akan menghasilkan div class tersendiri di setiap postnya:
<div class="flickr-entry" id="post-527">

Aha! CSSpun siap di buat karena classnya sudah ada untuk masing-masing post, jadilah warna-warna dan icon-icon kecil seperti “burung”, “kamera” dan “buku” sebagai simbol untuk membedakan setiap post yang ada di 15june.com

Bisa saja sih dengan memakai teknik Custom Fields dengan hasil yang sama, tapi tetap saja kamu harus manual memilih field setiap post. Repot, capek, males dsb.

Tuh kan, Sebenernya Doyan Ngeblog Gak Sih?

Hehehehe, NGGAK! Sibuk! :D