Membuat Share Button Social Media dengan PHP

       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:

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.

Meta Tags Untuk Media Social Facebook, Twitter, Goggle Plus

             Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang berfungsi sebagai pemberi informasi metadata dari sebuah halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”. Secara umum, terdapat beberapa macam meta tag dengan fungsi yang berbeda. Beberapa fungsi tersebut misalnya meta keywords dan description. [sumber : wikipedia] selengkapnya.

           Tapi disini kita share meta tags untuk social network seperti facebook, twitter dan google plus. Fungsi dari meta tags social media ini adalah, ketika seseorang berbagi link atau artikel anda di social media, maka informasi website anda akan terlihat jelas. Dan hal tersebut wajib ada jika kita ingin website kita dikenal orang lain melalui social media .

Oke, dibawah ini adalah template meta tags lengkap untuk social media:

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">

<!-- Open Graph data for facebook-->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />
<meta property="fb:app_id" content="Facebook App numberic ID" />

Silahkan value content-nya di ganti sesuai website anda.
Saya rasa cukup, jika kurang jelas silahkan core-coret dikomentar.

Terimakasih.