Home » PHP Script » Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

Setelah lama berpusing-pusing ria dengan mainan software delphi, kali ini masyono.com sedikit refreshing dengan bermain php. :) Kali ini kita akan bahas cara membuat tombol share social bookmarks, tombol share link artikel ke facebook, twitter, google +, stumbleupon, dan tombol like facebook. Tidak begitu ribet cara pembuataannya, cukup sedikit butuh pengetahuan php saja. Facebook share button ini saya coba di wordpress, tapi kemungkinan besar juga bisa diimplementasikan ke website lain yang berbasis php dengan sedikit modifikasi saja. OK, lets do it.

Jika Anda mengunjungi website masyono.com Anda akan melihat tombol share di samping kiri bukan? Tampilannya seperti ini :

screenshoot-facebook-share-button.png

Nah, bagaimana cara pembuatannya? Silahkan ikuti langkah berikut : Pertama kopi kode php share facebook button ini :

<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 5px 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id=’pageshare’ title=”Share This To Facebook”><div class=’sbutton’ id=’gb’><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like layout=”box_count” show_faces=”false” font=”"></fb:like></div><div class=’sbutton’ id=’rt’><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” >Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=”text/javascript”></script></div><div class=’sbutton’ id=’gplusone’><script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script><g:plusone size=”tall”></g:plusone></div><div class=’sbutton’ id=’su’><script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script></div>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script><a class=”DiggThisButton DiggMedium”></a></div>
<div class=’sbutton’ id=’fb’>

<?php
function getUrl() {
$url = isset( $_SERVER['HTTPS'] ) && ‘on’ === $_SERVER['HTTPS'] ? ‘https’ : ‘http’;
$url .= ‘://’ . $_SERVER['SERVER_NAME'];
$url .= in_array( $_SERVER['SERVER_PORT'], array(’80′, ’443′) ) ? ” : ‘:’ . $_SERVER['SERVER_PORT'];
$url .= $_SERVER['REQUEST_URI'];
return $url;
}

$encoded_url = urlencode( getUrl() );
if ( !empty($encoded_url) ){ ?>
<a name=”fb_share” type=”box_count” href=”https://www.facebook.com/sharer/sharer.php?u=<?php echo $encoded_url; ?>” target=”_blank”><img src=”<?php bloginfo(‘template_directory’); ?>/images/fb_share.png” /></a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>

<?php } ?>

</div>
<br/>
<div style=”clear: both;font-size: 8px;text-align:center;”></div>
</div>

Selanjutnya paste ke dalam notepad2 atau notepad++. Save as atau simpan menjadi share.php. Simpan di dalam satu folder direktori template wordpress kamu. Selanjutnya upload file share.php tadi ke dalam direktori template wordpress kamu.

Next, upload juga file fb_share.png ke folder images direktori template kamu agar nanti ikon fb share akan muncul. kalau dulu sih bisa tanpa mengupload gambar sendiri, tapi terakhir saya coba kok nggak muncul :D Jadi saya akali begitu.

Sekarang edit file footer.php wordpress template kamu, masukkan kode berikut di baris paling bawah footer.php :

<?php include (TEMPLATEPATH . ‘/share.php’); ?>

Seperti ini kurang lebihnya :


gambar-share-footer-button.png

Selanjutnya save, dan atau upload lagi footer.php tersebut. Kode tersebut untuk memanggil fungsi dari share.php tadi. Langkah terakhir tinggal pastikan kalau tombol share facebook-nya berhasil dengan cara mengakses web kamu. Jreng…. Jreng…. Jreng….. :D

Jika ingin tampilannya melayang di sisi kanan layar silahkan diedit kode di atas di fungsi style nya. Dan kalau ga mau repot download saja file code share.php dan fb_share.png nya di sini -> http://www.tusfiles.net/xq98f1ojco2f

Sing podo digolek'i :

cara menggunakan netloop, http injector tidak terhubung ke host, download wuuzzz bgt ehi untuk http injector, wuuzzz bgt ehi download, telkomsel finder, cara membuat config kpn tunnel, wuuzz bgt ehi, cara membuat config netloop, cara mengisi payload kpn tunnel, Cara menggunakan http injector kartu 3

[ DOWNLOAD Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog ]

Related Posts To "Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog"

Tags: ,

This entry was posted on Sunday, February 8th, 2015 at 8:35 pm and is filed under PHP Script. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog”

soned February 23rd, 2015 at 9:22 am

Kurang Jelas Mbah :) ^_^

denbagus March 11th, 2015 at 12:47 am

mosok to? :D

abdi azka October 5th, 2016 at 11:44 am

met siang gan..knp down load wuzz bgt ehi.. malah yang nongol 9 apps..gmn vara down load wuzzz bgt ehi nya… trimss mhon info nya gan

Leave a Reply