Karena ada beberapa teman blogger yang meminta dibuatkan tutorial membuat tombol-tombol social bookmark seperti yang ada di blog ini, maka sekarang saya buatkan tutorialnya, sekalian jadi ada bahan posting nih :D

Tutorial yang akan saya buat adalah sesuai dengan yang ada di blog saya ini. Untuk “Home” tombolnya kecil-kecil dan letaknya berderet ke samping di bawah judul posting. Dan untuk di halaman single post tombolnya besar-besar dan saya letakkan di kanan layar monitor pengunjung dan letaknya fixed. Maksudnya fixed adalah apabila Anda scrolling ke atas dan ke bawah, tombol-tombol itu tetap berada dan terlihat di kanan layar monitor Anda (silakan coba membuka halaman single page di blog ini :) ).

OK, langsung ya. Social bookmark yang akan ditampilkan adalah Twitter, Facebook, Google Buzz, Digg, StumbleUpon dan Facebook Like. Tambahan lagi, semuanya ditampilkan tanpa menggunakan plugin apa pun, murni coding, jadi bisa diterapkan juga di website lain selain WordPress.

Langkah Pertama.

Tambahkan kode di bawah ini di file header.php theme Anda, sebelum kode </head>:

<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script>

<script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’></script>

<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

Fungsi ketiga baris kode itu adalah agar kita bisa menempatkan tombol Digg, Facebook dan GoogleBuzz di mana saja dan kapan saja.

Langkah Kedua (untuk Home).

Tambahkan kode berikut di file style.css theme Anda:

.bookmarkbox {border-bottom:1px solid #DDD; border-top:1px solid #DDD;padding:5px 0px 5px 0px;}
.bookmarkitem {float:left;padding:5px;}

Baris kode pertama adalah untuk membuat garis batas atas dan bawah seperti ini:
social bookmark

Dan baris kode kedua berfungsi untuk memposisikan tombol-tombolnya.

Langkah Ketiga (untuk Home).

Di file index.php theme Anda, cari kode yang menampilkan judul postingan. Biasanya kodenya seperti ini:

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>

Tambahkan kode berikut di bawahnya:

<div class="bookmarkbox">
<div class="bookmarkitem">
<iframe src='http://api.tweetmeme.com/button.js?url=<?php the_permalink() ?>&amp;source=jimmysun&amp;style=compact' height='20' width='70' frameborder='0' scrolling='no'></iframe>
</div>
<div class="bookmarkitem">
<a name='fb_share' type='button_count' share_url='<?php the_permalink() ?>' href='http://www.facebook.com/sharer.php'>Share</a>
</div>
<div class="bookmarkitem">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="<?php the_permalink() ?>"></a>
</div>
<div class="bookmarkitem">
<a class='DiggThisButton DiggCompact' href='http://digg.com/submit?url=<?php the_permalink() ?>&amp;title='<?php the_title() ?>'></a>
</div>
<div class="bookmarkitem">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=<?php the_permalink() ?>"></script>
</div>
<div style="clear:both;"></div>
</div>
<br />
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

Penting: ganti kode yang saya beri warna merah di atas dengan username Twitter Anda.

Kode di atas fungsinya untuk menampilkan tombol-tombol social bookmark-nya. Kemudian yang baris terakhir untuk menampilkan tombol Facebook Like.

Nah, tombol-tombol social bookmark untuk Home sudah selesai. Sekarang lanjut untuk halaman single post.

Langkah Keempat (untuk Single).

Tambahkan kode berikut di file style.css theme Anda:

#bookmarkleft {
position: fixed;
width: 60px;
top: 100px;
right: 0px;
font-size: 0.9em;
border: 1px solid #DDD;
background-color: white;
padding: 10px;
z-index: 2;
}

Kode di atas fungsinya untuk membuat tombol-tombol social bookmark tetap diam di tempatnya dan tidak ikut naik turun ketika layar digulung (scroll) ke atas dan ke bawah. Apabila Anda ingin letaknya di sebelah kiri, ganti right menjadi left. Anda bisa juga mengganti parameter top untuk menentukan posisinya seberapa jauh dari atas layar monitor. Silakan coba-coba sendiri untuk mengganti parameter-parameternya.

Oh ya, kode ini sudah saya test di FireFox, Chrome dan Opera tidak ada masalah. Tapi bermasalah di Internet Explorer 6. Internet Explorer versi 8 sudah bisa menampilkannya dengan baik (tapi masih tetap merupakan browser yang payah!).

Langkah Kelima (untuk Single).

Di file header.php theme Anda, copy kode berikut tepat di bawah <body>:

<?php if(is_single()) { ?>
<div id="bookmarkleft">
<div class="bookmarkitem">
<a name='fb_share' type='box_count' share_url='<?php the_permalink() ?>'></a>
</div>
<div class="bookmarkitem">
<iframe src='http://api.tweetmeme.com/button.js?url=<?php the_permalink() ?>&amp;source=jimmysun&amp;style=normal' height='61' width='50' frameborder='0' scrolling='no'></iframe>
</div>
<div class="bookmarkitem">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink() ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div class="bookmarkitem">
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class='DiggThisButton DiggMedium' href='http://digg.com/submit?url=<?php the_permalink() ?>&amp;title='<?php the_title() ?>'></a>
</div>
</div>
<?php } ?>

Penting: ganti kode yang saya beri warna merah di atas dengan username Twitter Anda.

Langkah Keenam (untuk Single).

Terakhir adalah menampilkan Facebook Like di halaman single post. Edit file single.php theme Anda, lalu tempatkan kode Facebook Like ini di mana saja Anda mau:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

Untuk meletakkannya di atas postingan, paste-kan kode tersebut di atas kode ini:

<?php the_content('Continue Reading...'); ?>

Silakan Anda coba-coba sendiri untuk posisinya ya :wink2:

Selesai! Tombol-tombol social plugin Anda sudah beres. Bagaimana kalau mau menambahkan tombol-tombol dari social bookmark lain seperti Reddit atau Yahoo Buzz? Gampang koq, Anda tinggal masuk ke website mereka, cari kode untuk menampilkan tombolnya, lalu edit parameter 'url' dengan <?php the_permalink() ?>, lalu paste kode nya seperti contoh di atas.

Semoga bermanfaat dan selamat mencoba :thumb1:

Related Posts

Category: Personal • WordPress | Tags: • • • • • • • • •