Ketika kita mulai merancang atau melakukan sedikit perubahan pada situs WordPress kita, mungkin pernah terpikir untuk membuat sesuatu yang unik. Contohnya adalah membuat Social Sharing. Kebanyakan social sharing hanya berbentuk biasa dan terkesan monoton. Jika di artikel sebelumnya kami telah memberikan 10 Tips Pro untuk Situs e-Commerce yang Ramah dan Menarik. Di artikel berikut ini kami akan membagikan cara membuat Social Sharing dengan tampilan yang unik yaitu Cara Membuat Social Sharing Grafik Batangan Untuk WordPress
Sebelum kita melanjutkan, mungkin Anda bertanya-tanya, “Bagaimana sih tampilan Social Sharing berbentuk batangan?”. Jika Anda penasaran maka akan kami tunjukkan contoh tampilan dari Social Sharing berbentuk batangan.
Begitulah tampilan dari Social Sharing berbentuk batangan. Lalu apakah Anda tertarik untuk membuatnya untuk di stius WordPress Anda? Berikut akan kami bagikan bagaimana cara membuat Social Sharing berbentuk batangan.
The Markup
Jika Anda ingin menambahkan grafik batangan yang ingin Anda buat tepat di bawah judul, dalam file single.php di tema WordPress Anda, tambahkan kode ini di suatu tempat di bawah the_title() atau ke tempat dimana Anda ingin menampilkan grafik batangan ini.
|
|
<div class="socialShare clearfix"> <div class="sharedCount"> <span class="count"></span> <span class="shares">shares</span> </div> <ul class="icons clearfix"> <li class="icon twitter social"><a href="https://twitter.com/share" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @JaringanHosting"></a></li> <li class="icon google social"><a href="https://plus.google.com/share" data-url="<?php echo get_permalink(); ?>"></a></li> <li class="icon facebook social"><a href="https://www.facebook.com/sharer/sharer.php" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @JaringanHosting" target="_blank"></a></li> <li class="icon linkedin social"><a href="http://www.linkedin.com/shareArticle" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?>"></a></li> </ul> <script>parseSharedCount("<?php echo get_permalink(); ?>");</script> </div> |
Pada baris ke 12, kami melewatkan post URL ke fungsi parseSharedCount yang akan kita buat pada langkah selanjutnya.
Mendapatkan Jumlah Shares
Pertama, yang kita perlukan adalah mendapatkan jumlah shares, karena data ini penting juga untuk kita. Cara termudah adalah dengan menggunakan layanan yang melakukannya untuk Anda. Setelah melakukan pencarian cepat di Google, saya menemukan SharedCount, sebuah situs kecil yang rapi yang tidak hanya menyediakan apa yang saya butuhkan, dan terbaik dari semua, mereka memiliki API yang mudah untuk digunakan. Tetapi untuk menggunakan API, Anda harus mendapatkan API key.
Setelah Anda mendaftar dan menerima key Anda, buatlah file baru dengan nama “sharedcount.js”. Kita akan menempatkan semua jQuery dalam file ini. Mulailah dengan menyisipkan kode ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
(function($){ sharedCount = function(url, fn) { url = encodeURIComponent(url || location.href); var domain = "//free.sharedcount.com/"; /* SET DOMAIN */ var apikey = "" /*API KEY HERE*/ var arg = { data: { url : url, apikey : apikey }, url: domain, cache: true, dataType: "json" }; if ('withCredentials' in new XMLHttpRequest) { arg.success = fn; } else { var cb = "sc_" + url.replace(/\W/g, ''); window[cb] = fn; arg.jsonpCallback = cb; arg.dataType += "p"; } return $.ajax(arg); }; |
Pada baris ke-5, tambahkan API key Anda di antara tanda kutip. Fungsi ini yang berguna untuk melakukan komunikasi dengan SharedCount.com API, dan mengembalikan semua data yang kita butuhkan.
Parse SharedCount Data
Sekarang kita akan membuat fungsi untuk mengambil data SharedCount. Jadi mari kita buat sebuah fungsi yang akan menampilkan shares individu untuk setiap situs sosial yang kita tarik, dan Total dari keseluruhan. Tambahkan kode ini ke file Anda:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
parseSharedCount = function(url) { sharedCount(url, function(data){ var twitterCount = data.Twitter; var facebookCount = data.Facebook.total_count; var googleCount = data.GooglePlusOne; var linkedinCount = data.LinkedIn; var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount; var offset = 25; var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset; var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset; var googleHeight = Math.ceil(googleCount/totalCount*100)+offset; var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset); $(".socialShare .count").text(totalCount); $(".socialShare .icon.twitter").css('height',twitterHeight+'%'); $(".socialShare .icon.facebook").css('height',facebookHeight+'%'); $(".socialShare .icon.google").css('height',googleHeight+'%'); $(".socialShare .icon.linkedin").css('height',linkedinHeight+'%'); $(".socialShare").addClass('loaded'); }); } })(jQuery); |
Pada baris ke 3-7, kami menampilkan hitungan individu untuk setiap situs sosial. Kemudian pada baris 9-13, persentase dihitung berdasarkan nilai-nilai. Nilai “offset” digunakan untuk memastikan setiap bar memiliki beberapa ketinggian sehingga ikon dapat ditampilkan bahkan jika situs tertentu tidak memiliki shares apapun. Akhirnya, pada baris 15-20, kita menetapkan total jumlah shares teks dan menggunakan nilai-nilai persentase untuk mengatur ketinggian pada setiap bar. Menambahkan kelas “loaded” ke div yang akan memulai animasi CSS.
Membuat Grafik Batangan Clickable
Di akhir kode kita akan menambah file sharedcount.js dan akan membuat bar menjadi tombol. Sehingga bila diklik setiap bar akan terbuka masing-masing dan menampilkan sosial sharing popup window.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
jQuery(document).ready(function( $ ) { $(".social.icon a").click(function(){ var url = $(this).attr('data-url'); var text = $(this).attr('data-text'); var href = $(this).attr('href'); if($(this).parent().hasClass('twitter')){ window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); }else if($(this).parent().hasClass('facebook')){ window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); }else if($(this).parent().hasClass('google')){ window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); }else if($(this).parent().hasClass('linkedin')){ window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); } return false; }); }); |
Berikut ini adalah segala sesuatu yang harus ada di dalam file sharedcount.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
(function($){ sharedCount = function(url, fn) { url = encodeURIComponent(url || location.href); var domain = "//free.sharedcount.com/"; /* SET DOMAIN */ var apikey = "" /*API KEY HERE*/ var arg = { data: { url : url, apikey : apikey }, url: domain, cache: true, dataType: "json" }; if ('withCredentials' in new XMLHttpRequest) { arg.success = fn; } else { var cb = "sc_" + url.replace(/\W/g, ''); window[cb] = fn; arg.jsonpCallback = cb; arg.dataType += "p"; } return $.ajax(arg); }; parseSharedCount = function(url) { sharedCount(url, function(data){ var twitterCount = data.Twitter; var facebookCount = data.Facebook.total_count; var googleCount = data.GooglePlusOne; var linkedinCount = data.LinkedIn; var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount; var offset = 25; var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset; var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset; var googleHeight = Math.ceil(googleCount/totalCount*100)+offset; var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset); $(".socialShare .count").text(totalCount); $(".socialShare .icon.twitter").css('height',twitterHeight+'%'); $(".socialShare .icon.facebook").css('height',facebookHeight+'%'); $(".socialShare .icon.google").css('height',googleHeight+'%'); $(".socialShare .icon.linkedin").css('height',linkedinHeight+'%'); $(".socialShare").addClass('loaded'); }); } })(jQuery); jQuery(document).ready(function( $ ) { $(".social.icon a").click(function(){ var url = $(this).attr('data-url'); var text = $(this).attr('data-text'); var href = $(this).attr('href'); if($(this).parent().hasClass('twitter')){ window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); }else if($(this).parent().hasClass('facebook')){ window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); }else if($(this).parent().hasClass('google')){ window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); }else if($(this).parent().hasClass('linkedin')){ window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300"); } return false; }); }); |
Tempatkan file dalam folder js tema Anda. Tema Anda harus memiliki tempat di functions.php yang di mana semua script terdapat di tempat itu . Tambahkan baris kode di bawah ini di tempat yang sama untuk memastikan script sharedcount akan loaded.
|
|
wp_enqueue_script('sharedcount', get_bloginfo('template_url').'/js/sharedcount.js', array('jquery'), '0.1', false); |
File CSS
Untuk penampilan grafik batang, dengan tampilan datar yang bersih, sehingga cocok dengan desain. Anda harus menambahkan CSS berikut ke file style.css di theme WordPress Anda. Semua ini file CSS yang cukup mendasar, tetapi penting untuk dicatat pada baris 84 dan 88 kita mendefinisikan kelas .loaded untuk mengaktifkan animasi setelah data telah loaded.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
.socialShare { color: #fff; display: block; margin-bottom: 20px; padding: 0; height: 73px; position: relative; border-bottom: 3px solid #d8d8d8; width: 250px; } .socialShare .sharedCount{ position: relative; font-size: .9em; display: block; box-shadow: none; margin-top: 0; top: 0; left: 0; float: left; opacity: 0; margin-left: 5px; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; transition: opacity 0.5s ease; background: none; color: #222222; border: none; } .socialShare .sharedCount .count{ font-size: 1.9em; display: block; color: #25bb8b; } .socialShare .sharedCount .shares{ font-size: 1.1em; display: block; color: #b8b8b8; } .socialShare.loaded .sharedCount { opacity: 1; } .socialShare .icons { margin-bottom: 0; positon: relative; } .socialShare .icon { display: block; font-size: 1.2em; float: left; margin: 0 0 0 0; position: absolute; bottom: 4px; opacity: 0; height: 0px; width: 30px; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; transition-delay: .7s; -webkit-transition-delay: .7s; /* Safari */ } .socialShare .icon a{ color: rgba(255,255,255,.7); display: block; width: 100%; height: 100%; background-size: 20px 20px; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; transition-delay: .7s; } .socialShare.loaded .icon { opacity: 1; } .socialShare.loaded .icon a{ -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .socialShare .icon a:hover{ background-color: #222; } .socialShare .icon.twitter{ background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat; left: 90px; } .socialShare .icon.twitter a{ background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat; } .socialShare .icon.google{ left: 125px; -webkit-transition-delay: .7s; /* Safari */ } .socialShare .icon.google a{ background: #e03e12 url(images/icon_google.png) center center no-repeat; } .socialShare .icon.facebook { left: 160px; -webkit-transition-delay: .9s; /* Safari */ } .socialShare .icon.facebook a{ background: #2c6087 url(images/icon_facebook.png) center center no-repeat; } .socialShare .icon.linkedin { left: 195px; -webkit-transition-delay: 1.2s; /* Safari */ } .socialShare .icon.linkedin a{ background: #3686ab url(images/icon_linkedin.png) center center no-repeat; } |
Jika Anda menginginkan sebuah ikon yang unik yang pas untuk social sharing grafik batangan, Anda bisa men-downloadnya disini
Kami mendorong Anda untuk men-tweak itu dan mulai membuatnya sendiri. Seperti yang Anda perhatikan, kami hanya memasukkan empat situs sosial di artikel ini seperti, twitter, Google+, Facebook dan Linkedin. Tetapi SharedCount menyediakan data yang lebih banyak lagi. Jadi, Anda akan dapat menambahkan stius sosial lebih banyak lagi yang penting bagi Anda.
Sekarang Anda sudah bisa memulai membuat sosial sharing yang unik untuk stius WordPress Anda. Anda dapat mempelajari artikel Cara Membuat Social Sharing Grafik Batangan Untuk WordPress dan kemudian mulai mempraktekkannya. Semoga bermanfaat
