Tutorial Membuat Share Social Media Button Facebook, Twitter, Google Plus dan Pinterest di WordPress

Gambar di bawah ini adalah contoh hasil dari pembuatan share button social media Facebook, Google Plus, Twitter dan Pinterest. Jika ingin membuat yang seperti itu, ikuti petunjuk berikut ini:

Facebook, Twitter, Google Plus for Social Media Button

Pertama, buat file share-button.php yang di simpan di folder theme wordpress anda. Misal path lengkap dari file tersebut adalah /wp-content/themes/template-aktif/share-button.php dengan isi file:

<div align="center" style="margin:0 0 0 0; padding: 0 0 0 0;">
	<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="155" data-show-faces="false"></div>
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-via="cinta_linux" data-lang="en">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><!-- Place this tag where you want the share button to render. --><div class="g-plus" data-action="share" data-annotation="bubble"></div>
	<!-- Place this tag after the last share tag. --><script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>
	<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div>

Jangn lupa, ganti kode data-via=”cinta_linux” diganti account twtter yang anda punya.

Kedua, tambahkan kode facebook di bawah ini di antara kode <body> dan </body> di semua halaman yang akan ditambahkan share button. Biasanya, yang digunakan adalah sebelum kode </body> di dalam file /wp-content/themes/template-aktif/footer.php

<!-- Start FB Apps -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=658144544204317";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- End FB Apps -->
</body>
</html>

Kemudian panggil (include) file share-button.php ke dalam theme yang anda pakai. Sebagai contoh, tombol share button diinginkan ada di file /wp-content/themes/single.php maka dapat dilihat contoh di bawah ini.

<?php include(TEMPLATEPATH. '/share-button.php'); ?>

Contoh penggunaan bisa anda lihat di bawah ini:

<?php get_header(); ?>
	<div id="content">
    <div class="clear"></div>
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	  	<div class="postmeta left">
	    	<h1 class="posttitle"><?php the_title(); ?></h1>
	    </div> <!--end: postmeta-->
	  	<div class="clear"></div>
	  	<div class="entry">
	    	<?php the_content(); ?><input type="hidden" name="IL_IN_TAG" value="2"/>
	    	<div class="clear"></div>
			<?php include(TEMPLATEPATH. '/share-button.php'); ?>
	    	<div class="tags">
	      		<?php the_tags(); ?>
	      		<?php edit_post_link('Edit', '[ ', ' ]'); ?>
	    	</div> <!--end: tags-->
	  	</div> <!--end: entry-->
	  	<?php comments_template(); ?>
	<?php endwhile; else: ?>
	<?php endif; ?>
	<div class="clear"></div>
	</div> <!--end: content-->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Silahkan kembangkan dsendiri dan tempatkan social media button di tempat yang anda inginkan.

Selamat mencoba dan semoga berhasil!