ediTEMP Atur Share Button agar tidak mengganggu speed blog

Atur Share Button agar tidak mengganggu speed blog

Share Button, seperti gplus, facebook, twitter, pinterest dan lain lain, memang dianggap sangat menunjang proses perkembangan sebuah blog. Karena itu hampir seluruh blogger berusaha sekuat tenaga agar bisa memasang Share Button pada setiap blog yang di kelolanya.

Namun pemasangan share button kadang menjadi sesuatu yang cukup puyeng untuk dipikirkan, terutama kaitannya dengan pengaruh terhadap kecepatan loading blog. Hal seperti ini lah yang kadang menjadikan seorang pengelola blog selalu mencari cari pengaturan agar bisa memasang share button namun sebisa mungkin tidak menggangu speed performance blog.



Ada berbagai cara dan bahkan format gratis yang yang ditawarkan oleh sekian banyak master blogger, namun kenyataan dilapangan ternyata kadang hasilnya kurang memuaskan bagi sebagian blogger. Hal itu mungkin saja terpengaruh oleh ragam susunan html blog yang berbeda beda, sehingga (mungkin lagi), satu tataan format share button hasil karya sang maestro, bisa bekerja dengan baik pada suatu blog tertentu, namun ternyata bila dipasang pada blog lain yang memiliki susuna html berbeda hasilnya jadi mengecewakan.

Sesungguhnya kebanyakan problem tersebut muncul dari elemen template yang bernama script, utamanya adalah script src='.......' karena script bentuk ini tugasnya memanggil (mengambil) script yang disimpan pada situs tujuan. Karena itu kebanyakan tutorial menyarankan agar :
  • Pasang script share button pada bagian paling bawah (diatas </body> misalnya,
  • Ada yang menyarankan menambah atribut defer
  • Ada juga yang menyuruh menambah atribut async
  • Dll.....


Pada kesempatan kali ini ediTEMP mencoba share salah satu cara atau salah satu usaha agar share button tidak mengganggu loading blog. Walaupun cara ini sudah beberapa kali ediTEMP coba pada beberapa jenis template blog dengan hasil yang cukup memuaskan, namun tetap saja ada kemungkinan tidak cocok bila dipasang pada blog anda. Cocok atau tidak hanya bisa terdeteksi bila anda sudah mencobanya, .... karena itu tidak ada salahnya bila anda coba cara berikut ini.

Pasang script itu bersamaan langsung dengan kode html, bisa sebelumnya atau bisa juga sesudahnya. Dengan cara seperti ini berarti script terpasang pada bagian pengaturan halaman posting blog. bagi yang belum terlalu memahami, coba buka html template dan amati bagian yang ada didalam :


<b:includable id='post' var='post'>
...................................................................
...................................................................
<b:if cond='data:blog.pageType == &quot;item&quot;'>
..................................................................
..................................................................
..................................................................
<data:post.body/>
..................................................................
..................................................................
#disekitar sini biasanya kode html custom share button dipasang#
..................................................................
</b:if>
</b:includable>


Intinya ... share button custom (buatan sendiri dan bukan bawaan blog) dipasang didalam :
<b:includable id='post' var='post'>
dibawah :
<data:post.body/> 
yang terletak didalam kondisional pengatur tampilan hanya pada halaman posting :
<b:if cond='data:blog.pageType == &quot;item&quot;'>




==========================
pindah semua script facebook, gplus, twitter pinterest dan lain lain tepat diatas kode html custom share button, kira kira seperti ini lah ......

================================
<b:includable id='post' var='post'>
...................................................................
...................................................................
<b:if cond='data:blog.pageType == &quot;item&quot;'>
..................................................................
..................................................................
..................................................................
<data:post.body/>
..................................................................
..................................................................
<!-- Script Share button dimulai -->
<b:if cond='data:post.isFirstPost'>

<!-- Facebook -->
<div id='fb-root'/>
<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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

<!-- gplusone -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Script Share Button selesai -->

<!-- Share Button dimulai -->
<div class='sharebuttons' style='padding:10px 0 10px;'>

<!-- Twitter -->
<div style='float:left;margin-right:15px'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>

<!-- gplusone -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>

<!-- Facebook -->
<div style='float:left;margin-left:-20px'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>

<!-- Pinterest -->
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 15px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<style type='text/css'> 
#pin-wrapper &gt; a {background-image:none !important;}
</style> 
</div>
<div style='clear: both;'/>
<!-- Share Button selesai -->
..................................................................
</b:if>
</b:includable>

bila masih meragukan kinerja kondisional yang telah ada, untuk meyakinkan hati agar yakin seyakin yakinnya bahwa elemen itu hanya akan bekerja pada halaman posting saja, silakan pasang saja tag kondisional baru :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
tepat diatas 
<!-- Script Share button dimulai -->
dan jangan lupa tutup kondisional tersebut dengan memasang
</b:if>
dibawah :
<!-- Share Button selesai -->

Walaupun sebenarnya bila pada template anda sudah terdapat share button custom sepeti itu pastinya sudah diatur oleh pembuatnya agar hanya bekerja pada halaman posting saja.

Bila sudah dipasang dengan benar, coba save dan amati speed blog anda, juga cek pada google page speed insight, semiga nasibnya sama dengan blog ediTEMP, share button tidak mengganggu speed blog.


NB: kode script dan html diatas hanyalah contoh, ediTEMP tidak menjamin antar tag pembuka dan tag penutupnya masih sesuai atau tidak ???? (hanya contoh saja)

Demikian pembahasan tentang Atur Share Button agar tidak mengganggu speed blog yang bisa ediTEMP sajikan. Ralat, saran, masukan, kritik dan/atau pertanyaan, bisa disampaikan melalui kolom Komentar.

Belum ada Komentar

Poskan Komentar

Formulir Kontak

Nama

Email *

Pesan *