Setelah kemarin kami membagikan script template SEO Meta Tags , sekarang kami akan share tentang button yang berfungsi sharing di social media. Seperti gambar dibawah ini:
Oke langsung saja, pertama saya sarankan untuk menggunakan meta tags header yang sebelumnya sebelum membuat button share social media.
Baca juga : Meta Tags Untuk Media Social Facebook, Twitter, Goggle Plus.
Supaya lebih gampang kita akan memanfaatkan Api dari beberapa media social Facebook, Twitter dan Google Plus.
Tempatkan script dibawah ini sesuai yang kamu inginkan,yakni tempat dimana letak button share akan diletakkan.
Kemudian tambahkan Api Facebook dibawah ini di dalam tag <body> , saya sarankan di bawah tag <body>.
Selesai , hasilnya akan seperti gambar diatas.
 |
| Gambar button share social media |
Oke langsung saja, pertama saya sarankan untuk menggunakan meta tags header yang sebelumnya sebelum membuat button share social media.
Baca juga : Meta Tags Untuk Media Social Facebook, Twitter, Goggle Plus.
Supaya lebih gampang kita akan memanfaatkan Api dari beberapa media social Facebook, Twitter dan Google Plus.
Tempatkan script dibawah ini sesuai yang kamu inginkan,yakni tempat dimana letak button share akan diletakkan.
<?php
//get current URL
$url_share ="http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<style type="text/css">
.box->div{
margin: 3px;
margin-top: 0px;
float: left;
}
</style>
<div class="box-">
<div>
<div class="fb-like"
data-href="<?php echo $url_share ?>"<!-- Bisa ganti dengan url fanspage FB atau current URL -->
data-layout="button_count"
data-action="like"
data-show-faces="false"
data-share="false">
</div>
</div>
<div>
<div class="fb-share-button"
data-href="<?php echo $url_share ?>"
data-layout="button_count">
</div>
</div>
<div>
<a href="https://twitter.com/share" class="twitter-share-button"{count} data-via="nontonline"></a>
</div>
<div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
</div>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>Kemudian tambahkan Api Facebook dibawah ini di dalam tag <body> , saya sarankan di bawah tag <body>.
<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/sdk.js#xfbml=1&version=v2.5&appId=Your ID FB";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Untuk 'appId=Your ID FB' , ganti 'your id fb' sesuai dengan id facebook kamu (id facebook yang akan menjadi admin website kamu).Selesai , hasilnya akan seperti gambar diatas.
