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 😀
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 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:
.bookmarkitem {float:left;padding:5px;}
Baris kode pertama adalah untuk membuat garis batas atas dan bawah seperti ini:
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:
Tambahkan kode berikut di bawahnya:
<div class=”bookmarkitem”>
<iframe src=’http://api.tweetmeme.com/button.js?url=<?php the_permalink() ?>&source=jimmysun&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() ?>&title='<?php the_title() ?>’></a>
</div>
<div class=”bookmarkitem”>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=1&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() ?>&layout=standard&show_faces=false&width=450&action=like&font&colorscheme=light&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:
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>:
<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() ?>&source=jimmysun&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() ?>&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:
Untuk meletakkannya di atas postingan, paste-kan kode tersebut di atas kode ini:
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:
