Hai sudah lama saya tidak mengupdate blog ini, pada saat ini saya ingin memberikan sebuah tutorial yang tidak jauh dari blog. Namun, kali ini agak berbeda dari biasanya. Biasanya saya share tutorial untuk blogspot sekarang saya share tutorial untuk pengguna WordPress nih. Saat ini saya ingin share cara untuk membuat share button di wordpress.
Share button yang saya maksud yaitu tombol share yang berjajar meliputi facebook like button, facebook share button, gplus share button dan tweet button. Keempat share button tersebut saya dapatkan dari situs resmi mereka masing-masing. Lalu bagaimana caranya? Simak caranya berikut
Letakkan kode CSS berikut di style.css
.share-button-atas {display: inline-block;margin: 5px;float: left;}
Letakkan Script berikut tepat di bawah <body> mungkin ada di file header.php
<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=1403625866557415";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Letakkan HTML berikut sesuai theme anda, biasanya di atas <?php the_content() ?> dan ada di file single.php
<div id='share-button-atas'>
<div class="fb-like share-button-atas" data-href="<?php the_permalink(); ?>" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
<div class="fb-share-button share-button-atas" data-href="<?php the_permalink(); ?>" data-type="button_count"></div>
<div class='share-button-atas'>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button 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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class='share-button-atas'>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-via="mnovalbs" 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>
</div></div>
Silahkan simpan, semoga berhasil