Harus diakui, kehadiran media sosial, seperti Facebook, Twitter, Google+, Pinterest, atau Linkedin, saat ini berdampak besar terhadap popularitas dan trafik blog. Jejaring sosial tidak hanya bisa dimanfaatkan untuk update status, tetapi juga bisa dioptimalkan untuk memopulerkan sebuah blog. Bayangkan saja jika banyak sahabat kita yang menjadi follower, kemudian mengklik tautan tulisan yang kita pajang di jejaring sosial, bisa dipastikan kita akan mendapatkan keajaiban kunjungan yang tak terduga. Jejaring sosial bisa menjadi media “gethok tular” antar-follower yang “menakjubkan” sehingga jangkauan penyebaran blog kita menjadi jauh lebih luas. Tidak berlebihan apabila situs-situs bertrafik tinggi senantiasa memajang ikon share-social di setiap postingannya.
Kini, pemilik blog bermesin wordpress maupun blogspot makin mudah dalam memasang ikon share-social beserta counter-nya. WordPress, misalnya, telah menyediakan berbagai plugin share-social yang bisa didapatkan secara gratis. Demikian juga dengan blogspot, ada banyak pilihan widget yang bisa dimanfaatkan. Meski demikian, kita juga perlu mempertimbangkan kecepatan aksesnya. Di balik kemudahan yang ditawarkan, pemasangan ikon share-social bisa menimbulkan dampak yang kurang nyaman terhadap kecepatan akses blog. Loading menjadi lebih berat, bahkan lemot.
Sebagai pengguna mesin wordpress, untuk menyiasati lemot-nya loading blog, saya cenderung meminimalkan penggunaan plugin. Hanya ada 9 plugin yang saya pasang yang saya nilai cukup penting dan tidak berdampak besar terhadap kecepatan akses blog. Untuk sementara plugin W3 Total Cache yang selama ini saya nilai cukup bagus dalam menyimpan cache saya nonaktif-kan karena menimbulkan disfungsi terhadap berbagai fitur di dashboard.
Berikut adalah beberapa plugin yang masih saya pertahankan.
1. Akismet: untuk memfilter komentar spam yang dikendalikan spam-bot.
2. All In One SEO Pack: untuk mengoptimasi SEO blog.
3. Batch Cat: untuk mengedit kategori postingan secara massal.
4. Comment Reply Notification: untuk mengirimkan balasan komentar via email.
5. Delete-Revision: untuk menghapus arsip revisi tulisan yang tak terpakai secara massal.
6. SEO Smart Links: untuk mengoptimasi seo postingan berdasarkan judul, kategori, page, atau tag.
7. SRG Clean Archives: untuk membuat halaman arsip tulisan.
8. Twitter Like Box Widget: untuk memasang boks follower twitter.
9. WP No Frames: untuk mencegah penyalahgunaan trafik blog oleh blog lain.
Karena plugin share-social berdampak kurang baik terhadap kecepatan akses blog, maka saya berusaha menggantinya dengan memasang ikon secara manual. Memang agak repot karena berdasarkan hasil pencarian, masih sangat minim rujukan praktis yang bisa saya gunakan.
Ada dua tahap penting dalam memasang ikon share-social dan counter secara manual, yaitu menyiapkan image ikon yang kita butuhkan dan snippet (kode php)-nya. Baik ikon maupun snippetnya bisa kita cari di internet.
Berikut adalah langkah-langkah pemasangan ikon share-social dan counter secara manual versi saya.
1. Setelah mendapatkan image ikon yang kita butuhkan, seperti RSS, facebook, twitter, google+, pinterest, atau linkedin, gambar-gambar tersebut dikompress dengan teknik css-sprite. Saya menggunakan tool CSS Sprite Generator di spritegen.website-performance.org. CSS Sprites merupakan teknik CSS untuk menggabungkan beberapa file gambar (khusus gambar yang berdimensi kecil) menjadi satu gambar utuh. Tujuannya untuk mengurangi waktu delay download resource & HTTP Requests file-file gambar sebelum digabungkan. Dengan cara demikian, pemanggilan file gambar bisa berlangsung lebih cepat. Kelebihan CSS Sprite Generator, menurut saya, kita bisa mengunggah beberapa file gambar sekaligus dalam format winzip sehingga lebih praktis. Selain itu, juga disediakan kode css yang sesuai dengan style gambar yang telah kita unggah. Langkah selanjutnya adalah memodifikasi kode css agar kompatibel dengan performa blog kita. Jangan lupa, unggah juga ikon share social (RSS, facebook, twitter, google+, pinterest, dan linkedin) non-css sprite ke dalam folder image theme satu persatu. Ikon tersebut bisa diambil dari ikon share sebelum dikompress melalui css-sprite.
Berikut adalah kode css sprite yang saya gunakan di blog ini.
.sprite-1rss-35 {background:url(alamat url gambar css sprite yang telah diunggah di folder image theme) 0 0; width:35px; height:35px;}.sprite-2facebook-35 {background:url(alamat url gambar css sprite yang telah diunggah di folder image theme) -37px 0px;width:35px; height:35px;}.sprite-3twitter-35 {background:url(alamat url gambar css sprite yang telah diunggah di folder image theme) -74px 0px;width:35px; height:35px;}.sprite-4googleplus-35 { background:url(alamat url gambar css sprite yang telah diunggah di folder image theme) -111px 0px;width:35px; height:35px;}.sprite-5pinterest-35 { background:url(alamat url gambar css sprite yang telah diunggah di folder image theme) -148px 0px;width:35px; height:35px;}
.sprite-6linkedin-35 { background:(alamat url gambar css sprite yang telah diunggah di folder image theme) -185px 0px;width:35px; height:35px;}.sprite-7email-35 { background:(alamat url gambar css sprite yang telah diunggah di folder image theme) -222px 0px;width:35px; height:35px;}
</style>
Kode tersebut dipasang di header.php sebelum kode </head>. Sebelum kode css dipasang, gambar hasil css-sprite diunggah dan disatukan dalam folder images theme yang digunakan. Info detil tentang kode css-sprite bisa ditemukan dengan mudah di mesin pencari. Selanjutnya, kita gabungkan ikon share social dengan url-nya seperti berikut ini!
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank"><img class="sprite-4googleplus-35" style="box-shadow:none !important" src="isi alamat url ikon google+ non-css sprite yang telah diunggah dalam folder image theme" alt="google+" width="35" height="35" /></a></span>
<span style="margin-right:-30px"><a href='javascript:void((function()%7Bvar%20e=document.createElement('script');
e.setAttribute('type','text/javascript');e.setAttribute('charset',
'UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?
r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img style="box-shadow:none !important" class="sprite-5pinterest-35" src="isi alamat url ikon pinterest non-css sprite yang telah diunggah dalam folder image theme" alt="pinterest" width="35" height="35" /></a></span><span style="margin-right:-30px"><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" target="_blank"><img style="box-shadow:none !important" class="sprite-6linkedin-35" src="isi alamat url ikon linkedin non-css sprite yang telah diunggah dalam folder image theme" alt="linkedin" width="35" height="35" /></a></span><span style="margin-right:0px"><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburner/CatatanSawaliTuhusetya&loc=en_US" target="_blank"><img style="box-shadow:none !important" class="sprite-7email-35" src="isi alamat url ikon email non-css sprite yang telah diunggah dalam folder image theme" alt="email" width="35" height="35" /></a></span></div>
Kode tersebut dipasang di single.php. Posisinya bisa disesuaikan dengan struktur post theme yang digunakan.
2. Tahap pemasangan kode snippet counter share-social saya anggap agak ribet dan merepotkan. Kita perlu melakukan teknik “trial and error” untuk menghasilkan visualisasi ikon dan counter share-social yang sesuai selera. Agar bisa memasang counter share-social kita perlu mendapatkan kode API key dengan melakukan sign-up di sini. Sedangkan, snippet bakunya bisa kita dapatkan di sini.
Berikut adalah kode bakunya:
$url = ((!empty($_SERVER['HTTPS'])) ? "https://": "http://" ) . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXXXXXX");
$counts = json_decode($json, true);
echo "This page has " . $counts["Twitter"] ." tweets, " . $counts["Facebook"]["like_count"] . " likes, and ". $counts["GooglePlusOne"] . "+1's";
?>
Keterangan: silakan ganti kode XXXXXXX dengan kode api yang telah kita dapatkan.
Langkah selanjutnya adalah menggabungkan, ikon share-social dan counternya. Berikut adalah snippet lengkap yang saya pasang di single.php.
<table><tr><td><div style="width:80px;background:#eee;border:1px solid #bbb;box-shadow:3px 3px 3px #666;margin:0px 10px 0px 115px;padding:9px 5px 7px 5px;text-align:center;"><iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=265048624250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div></td><td>
<div style="background:#eee;width:20px;height:auto;margin:0px 10px 0px -8px;padding:5px 10px 5px 10px;text-align:center;border:1px solid #bbb;box-shadow:3px 3px 3px #666;">
<?php
$url = ((!empty($_SERVER['HTTPS'])) ? "https://": "http://" ) . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXXXXXX");
$counts = json_decode($json, true);
echo " " . $counts["Twitter"] ." ";
?><span style="margin:0 0 0 -7px;padding:0px;text-align:center;font:bold 11px arial"><a href="http://twitter.com/home?status=<?php echo urlencode("Luangkan waktu untuk membaca tulisan menarik ini: "); ?><?php the_permalink(); ?>" target="_blank">Tweet</a></span></div></td>
<td>
<div style="background:#eee;width:20px;height:auto;margin:0px 10px 0px -8px;padding:5px 10px 5px 10px;text-align:center;border:1px solid #bbb;box-shadow:3px 3px 3px #666;"><?php
$url = ((!empty($_SERVER['HTTPS'])) ? "https://": "http://" ) . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXXXXXX");
$counts = json_decode($json, true);
echo " ". $counts["GooglePlusOne"] . " ";
?><span style="margin:0px;padding:0px;text-align:center;font:font:bold 11px arial"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank">G+s</a></span></div></td>
<td>
<div style="background:#eee;width:20px;height:auto;margin:0px 10px 0px -8px;padding:5px 10px 5px 10px;text-align:center;border:1px solid #bbb;box-shadow:3px 3px 3px #666;">
<?php
$url = ((!empty($_SERVER['HTTPS'])) ? "https://": "http://" ) . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXXXXXX");
$counts = json_decode($json, true);
echo " " . $counts["Pinterest"] ." ";
?><span style="margin:0px;padding:0px;text-align:center;font:font:bold 11px arial"><a href='javascript:void((function()%7Bvar%20e=document.createElement('script');
e.setAttribute('type','text/javascript');e.setAttribute('charset',
'UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?
r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'>PIN</a></span></div></td>
<td>
<div style="background:#eee;width:20px;height:auto;margin:0px 10px 0px -8px;padding:5px 10px 5px 10px;text-align:center;border:1px solid #bbb;box-shadow:3px 3px 3px #666;">
<?php
$url = ((!empty($_SERVER['HTTPS'])) ? "https://": "http://" ) . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$json = file_get_contents("http://api.sharedcount.com/?url=" . rawurlencode($url) . "&apikey=XXXXXXX");
$counts = json_decode($json, true);
echo " " . $counts["LinkedIn"] ." ";
?><span style="margin:0px;padding:0px;text-align:center;font:font:bold 11px arial"><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" target="_blank">INs</a></span></div></td>
<td>
<div style="background:#eee;width:20px;height:auto;margin:0px 10px 0px -8px;padding:5px 10px 5px 10px;text-align:center;border:1px solid #bbb;box-shadow:3px 3px 3px #666;">
<?php
$obj=new shareCount(get_permalink( $post->ID ));
echo $obj->get_tweets() + $obj->get_plusones() + $obj->get_fb() + $obj->get_stumble() + $obj->get_pinterest() + $obj->get_delicious() + $obj->get_linkedin();
?><br /><span style="margin:0px 0 0 -5px;padding:0px;text-align:center;font:bold 11px arial"><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" target="_blank">Share</a></span></div></td></tr></table></div>
Keterangan: ganti kode XXXXXXX dengan kode api key dari sharedcount.com
Modifikasi kode snippet menghasilkan screenshot berikut ini.
 |
Memang agak ribet, tetapi memberikan pengaruh yang cukup signifikan terhadap akses blog. Loading menjadi lebih enteng. Hal itu bisa dilihat berdasarkan skor di gtmetrix.com atau tools.pingdom.com.
Berikut screenshotnya:
Speed post dengan satu gambar hanya beda sedikit dengan speed home-page-nya yang memiliki Page Speed Grade: A (99%) dan YSlow Grade: A (98%). Dengan memasang share social dan counter secara manual mudah-mudahan trafik blog semakin meningkat tanpa kehilangan kecepatan akses secara optimal. ***
Seri https://minecraftpremiumsatinal.com