Dalam artikel ini, kita akan belajar bersama-sama mengenai cara manual untuk menempatkan tombol sosial media seperti facebook, twitter, digg, stumble uppon dan lainnya dengan mengandalkan beberapa baris kode saja tanpa harus menggunakan plugin. Di luar sana, ada banyak sekali plugin yang menyediakan layanan untuk tombol sosial media untuk WordPress, tapi untuk alasan optimasi kita harus meminimalisir penggunaan plugin. Mengapa kita harus menginstal sebuah plugin jika anda bisa membuatnya hanya dengan beberapa baris kode saja. Oke tanpa basa basi langsung aja ya tutorialnya dibawah ini

Tahap 1: Mendapatkan Kode tombol sosial media seperti facebook, Twitter, Digg, Stumble uppon, dan linked in

Tombol Twitter :

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=box_count&show_faces=false&width=55&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:55px; height:65px;"></iframe>

Tombol Stumble Upon:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink(); ?>"></script>

Tombol Digg:

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>

Tombol Linked In:

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="top"></script>

Tahap 2: Edit Single.php pada wordpress

Dalam kasus ini saya menggunakan themes wordpress TwentyTen default bawaan dari wordpress. Oke mari kita buat frameworknya. Kemudian kita taruh kode-kode tombol sosial media diatas kedalam framework tersebut. tampilan kodenya seperti dibawah ini

<div class="twitter_button">
</div>
<div class="facebook_button">
</div>
<div class="stumbleupon_button">
</div>
<div class="digg_button">
</div>
<div class="linkedin_button">
</div>
<div class="clear"></div>

Kemdian selanjutnya taruh semua kode tombol sosial media kedalam framework diatas. hasilnya seperti dibawah ini

<div class="twitter_button">
<script type="text/javascript">
tweetmeme_url = '<?php the_permalink() ?>';
tweetmeme_source = 'your twitter id';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div class="facebook_button">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=box_count&show_faces=false&width=55&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:55px; height:65px;"></iframe>
</div>
<div class="stumbleupon_button">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php the_permalink(); ?>"></script>
</div>
<div class="digg_button">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>
</div>
<div class="linkedin_button">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="top"></script>
</div>
<div class="clear"></div>

Tempatkan kode gabungan antara framework dan sosial media diatas class “entry-utility” pada theme wordpress twentyten bagian single.php file dimulai pada baris 54.

<div class="entry-utility">
	<?php twentyten_posted_in(); ?>
	<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
	Please add the code above here
</div><!-- .entry-utility -->

Tahap 3: Membuat tampilan menjadi ciamik menggunakan CSS

Untuk membuat tampilan tombol sosial media ini tampak ciamik atau enak dilihat maka anda bisa menggunakan CSS, caranya buka style.css pada theme wordpress twentyten kemdian masukkan kode dibawah ini

.clear {clear: both;}
.twitter_button, .facebook_button, .linkedin_button, .digg_button, .stumbleupon_button {
width: 70px;
height: 70px;
float: left;
margin: 20px 0px;
background-color: #DFDFDF;
padding: 10px;
margin-right: 20px;
text-align: center;
}

Kode css ini bisa anda modifikasi lagi tergantung selera anda jikalau anda memiliki kemampuan dalam kode-kode CSS. apabila anda sudah menerapkan langkah-langkah diatas dengan benar maka tampilannya akan seperti dibawah ini

Pada artikel berikutnya akan saya jelaskan mengenai kekuatan sosial media dalam menjaring pengunjung. Jadi jangan sia-siakan kesempatan itu mari mulai dari sekarang kita fasilitasi blog/website kita menggunakan tombol sosial media. Bahan referensi artikel ini ada di http://www.dynamicwp.net/