Web Design Membuat Button Share Ke Sosial Media

Jika kita membuat tulisan di blog, baik di situs blogger atau wordpress, tombol share sudah otomatis tersedia. Berbeda dengan membuat sebuah desain website, semua fitur harus dibuat terlebih dahulu termasuk tombol share, agar setiap artikel yang akan dibuat dapat dibagikan secara otomatis ke sosial media.

Kali ini Aha Sarang Komputer akan berbagi membuat button share ke beberapa sosial media dalam desain website, seperti share ke facebook, twitter, google+, linkedin, line, whatsapp. Kecuali instagram, karena tidak ada API instagram, dimana instagram adalah app sosisal media berbagi image, short video.

Lagsung saja ke pembuatan desain share, tahapan langkahnya adalah sebagai berikut;

1. Facebook

Plugin share Facebook, developer faceboook membuat dua model, yaitu menggunakan javascript dan iframe. Kita bisa memilih salah satu dari keduanya. Pemilihan plugin sangat ditentukan oleh seberapa banyak desain gambar atau video di halaman website yang akan ditampilkan.

Jika tidak terlalu banyak gambar atau video, pilihan yang terbaik adalah dengan pola iframe, sedangkan jika dalam halaman website yang akan ditampilkan banyak gambar atau video, maka sangat bijak memilih pola javascript. Pemilihan ini agar halaman website mejadi ringan saat dibuka, tentunya ini akan memudahkan pengunjung saat mengunjungi halaman website Anda.

Cara memasang plugin facebook, dapat dilihat salah satu contoh dibawah ini, kemudian copy paste contoh dibawah ke halaman website Anda, Anda bisa memilih satu diantara keduanya;

Pola Javascript

<html>
<head>
  <title>Your Domain Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<!-- Load Facebook SDK for JavaScript -->
  <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";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<body>
  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>
</body>
</html>

Pola iframe


<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button&size=small&mobile_iframe=true&width=57&height=20&appId" width="57" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
</html>

2. Twitter

Pada size image twitter, developer twitter+ membuat dua ukuran image icon share twitter+, yaitu ukuran default dan large. Namun anda juga dapat melakukan kostum pada ukuran icon google+.

Contoh dibawah menggunakan ukuran default. Anda juga dapat mengubahnya dengan large atau melakukan kostum ukuran dengan menambahkan lebar dan tinggi pada contoh script dibawah.

Pola javascript

<html>
<head>
<title></title>
<link rel="canonical"
  href="/web/tweet-button">
</head>
<script>
twttr.widgets.createShareButton(
  "https://dev.twitter.com/web/tweet-button",
  document.getElementById("tweet-container"),
  {
    size: "default",
    text: "custom share text",
    hashtags: "example,demo",
    via: "twitterdev",
    related: "twitterapi,twitter"
  }
);
</script>
<body>
<a class="twitter-share-button"
  href="https://twitter.com/share"
  data-size="large"
  data-text="custom share text"
  data-url="https://dev.twitter.com/web/tweet-button"
  data-hashtags="example,demo"
  data-via="twitterdev"
  data-related="twitterapi,twitter">
Tweet
</a>
</body>
</html>

Pola iframe

<html>
<head>
<title></title>
<link rel="canonical"
  href="/web/tweet-button">
</head>
<body>
<iframe
src="https://platform.twitter.com/widgets/tweet_button.html?size=l&url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&via=twitterdev&related=twitterapi%2Ctwitter&text=custom%20share%20text&hashtags=example%2Cdemo"
  width="140"
  height="28"
  title="Twitter Tweet Button"
  style="border: 0; overflow: hidden;">
</iframe>
</body>
</html>

3. Google+

Pada size image google+, developer google+ membuat beberapa ukuran image icon share google+, yaitu ukuran small, medium, large dan ukuran lainnya. Namun anda juga dapat melakukan kostum pada ukuran icon google+.

Contoh dibawah adalah contoh yang menggunakan ukuran tinggi 15 pada image icon share google+, Anda dapat menggantinya dengan large atau disesuaikan ukurannya dengan icon share yang lainnya, agar tampilan keseluruhan button share menjadi presisi.

Pola javascript

<html>
<head>
<title></title>
<link rel="canonical" href="yourwebsite"/>
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'id'}
</script>
</head>
<body>

<!-- Tempatkan tag ini di mana pun Anda ingin tombol berbagi ditampilkan. -->
<div class="g-plus" data-action="share" data-height="15" data-href="http://www.your-domain.com/judul"></div>
</body>
</html>

4. Linkedin

Pola javascript

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-url="https://www.yourdomain.com"></script>

5. WhatsApp

Pola tap link

<a href="api.whatsapp.com/send?text=The text to share!" data-action="share/whatsapp/share">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVzuv2E7k9G5SDnOM0K7tNnXR_pFxAwPePsXAdfKOhOnWsRsXNrssUSVyNrc2cb45bFcIV-aoNALlI0YlAAxPvd5Ih5i0mX0NHXPnOnrKex5oE462DFnKUKCYn6KBrzCyinKjDS35cpsP/s640/AhaSKomp_11-05-10.37.44.png" width="45" height="15">
</a>

Edit tap link

<a href="api.whatsapp.com/send?text=textyourlink/url">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVzuv2E7k9G5SDnOM0K7tNnXR_pFxAwPePsXAdfKOhOnWsRsXNrssUSVyNrc2cb45bFcIV-aoNALlI0YlAAxPvd5Ih5i0mX0NHXPnOnrKex5oE462DFnKUKCYn6KBrzCyinKjDS35cpsP/s640/AhaSKomp_11-05-10.37.44.png" width="45" height="15">
</a>

6. LINE

Pola javascript

<html>
<head>
<title></title>
<script type="text/javascript">LineIt.loadButton();</script>
</head>
<body>
<div class="line-it-button" data-lang="en" data-type="share-a" data-url="Http://www.yourwebsite.com" style="display: none;"></div>
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</body>
</html>

Demikian tip membuat button share ke sosial media. Sekalipun dalam fitur smartphone semua sudah menambahkan fitur share dalam aplikasi browser bawaannya, namun pembuatan button share dalam desain website tetap diperlukan, bukan sebagai aksesories, tapi untuk pengguna yang menggunakan pc atau laptop.

Untuk penempatan button share dapat diatas atau dibawah artikel. Agar tampilan icon button share terlihat presisi ukuran lebar dan tingginya, maka gunakan kolom table.

Semoga bermanfaat.