Menggunakan Responsive Social Share Buttons Ringan Dengan Counter Di Blog

Menggunakan Responsive Social Share Buttons Ringan Dengan Counter Di Blog

Bola Hero Gawai

Menggunakan Responsive Social Share Buttons Ringan Dengan Counter Di Blog

Menggunakan Responsive Social Share Buttons Ringan Dengan Counter Di Blog
Sebenarnya saya sudah banyak men-share cara membuat tombol berbagi sosmed atau social share button, namun kali ini saya masih akan membagikan cara menggunakan social share buttons dan saya merekomendasikan untuk digunakan di blog. Walaupun social share buttons ini dari pihak ketiga, namun ternyata ini benar-benar ringan.

Social share button ini dilengkapi dengan counter atau jumlah klik berbagi sehingga bisa diketahui berapa banyak postingan kita dibagikan di sosial media. Selain itu tombol ini responsive sehingga tampilannya akan aman di berbagai ukuran device.

Dan yang membuat tombol berbagi sosmed ini ringan adalah ternyata js dari sosmed ini bisa kita defer sehingga tidak akan mengganggu loading blog. Untuk demo silahkan lihat di halaman ini (jika belum saya ganti hehehe...) atau lihat pada animasi gif di atas. Dan di bawah ini screenshot dari tampilan mobile.

Responsive Social Share Buttons Pada Mobile

Nah jika Anda ingin mencobanya juga, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan copy kode HTML di bawah ini dan simpan di bawah postingan blog. Silahkan cari kode ini <b:includable id='post' var='post'> kemudian gulung layar ke bawah dan temukan kode di bawah ini atau yang mirip seperti di bawah ini.


      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Silahkan simpan kode di bawah ini di bawah kode di atas (di bawah kode </div>).


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="don-share" data-limit="3">
  <div class="don-share-total"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-google"></div>
  <div class="don-share-linkedin"></div>
  <div class="don-share-pinterest"></div>
  <div class="don-share-tumblr"></div>
  <div class="don-share-stumbleupon"></div>
  <div class="don-share-reddit"></div>
  <div class="don-share-pocket"></div>
</div>
<div class='clear'/>
</b:if>

Jika ternyata lebar halaman postingan tidak muat untuk 3 buah tombol tampilan normal, silahkan rubah kode angka 3 yang saya tandai di atas menjadi 2 sehingga tampak seperti pada halaman demo blog ini.

2. Langkah Kedua
Silahkan simpan javascript defer js social share button ini di atas kode </body>. JS ini saya hosting dengan akun Google Drive saya, jadi untuk keamanan silahkan hosting di akun Google Drive Anda sendiri.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/share-donreach.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

3. Langkah Ketiga
Untuk sedikit merapihkan tampilannya, silahkan tambahkan CSS di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.don-share .don-share-total{position:relative!important}
.don-share .don-share-total:after{bottom:0!important}
</style>
</b:if>

Selesai....

Social share buttons ini memerlukan waktu untuk menampilkan jumlah klik berbagi, sehingga jangan aneh jika jumlah kliknya tidak langsung tampil. Widget ini tidak hanya dapat digunakan di Blogger tapi juga dapat digunakan di Wordpress.

Sumber:
http://donreach.com/social-share-buttons

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

12 Comments Add Comment

di blog saya sudah ada mas, bawaan dari template nya ! hehe

Balas

tombol share thisnya gak kebuka bang lewat desktop, kalau di hp kebuka aja

Balas

Sepertinya tengah ada perbaikan dari donreach, mungkin tengah update font-awesome atau sesuatu yang lain.

Balas

oot mas numpang tanya kalo microdata schema.org tombol share bagaimana ya?

Balas

Sepertinya kalau tombol share tidak perlu schema.org, mungkin juga schema.org untuk profil author agar bisa tampil di halaman hasil pencarian seperti ini.
<script type='application/ld+json'>
{
"@context": "http:\/\/schema.org",
"@type": "Person",
"url": "http:\/\/yourdomain.com",
"sameAs": ["https:\/\/www.facebook.com\/yourusername", "https:\/\/instagram.com\/yourusername\/", "http:\/\/id.linkedin.com\/in\/yourusername", "https:\/\/www.google.com\/+yourusername", "https:\/\/www.pinterest.com\/yourusername\/", "https:\/\/twitter.com\/yourusername"],
"name": "Your Name"
}
</script>

Balas

mau nanya kang, itu waktu saya klik share FB kok yg keluar hanya link webnya saja ya, padahal saya share di artikel, seharusnya link artikel+gambar,
kira2 kenapa ya kang ?? atur nuhun

Balas

Om kalau tampilannya kaya di regibrader[dot]com cara buatnya gmn ya??
tutorial diatas tampilanny terlalu besar om klo dibuka di dekstop.
tolong dong tutorialnya. KOREANAGASSI

Balas

Coba tampilkan 2 tombol saja, robah angka 3 menjadi 2 pada kode data-limit="3"

Balas

punten mas adi, kenapa ya jumlah sharenya 0 terus padahal artikelnya udh saya share berkali-kali ke fb sama G+?

Balas

Memerlukan waktu untuk menampilkan jumlahnya kang :) Nanti juga akan berubah sendiri.

Balas

ouhh jadi gitu ya, kirain langsung muncul seketika :D

siap haturnuhun. :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×