{"id":1686,"date":"2014-10-01T02:21:55","date_gmt":"2014-10-01T02:21:55","guid":{"rendered":"http:\/\/blog.jaringanhosting.com\/?p=1686"},"modified":"2014-10-24T02:45:19","modified_gmt":"2014-10-24T02:45:19","slug":"wordpress-hosting-indonesia-jaringanhosting-com-cara-membuat-social-sharing-grafik-batangan-untuk-wordpress","status":"publish","type":"post","link":"https:\/\/blog.jaringanhosting.com\/index.php\/wordpress-hosting-indonesia-jaringanhosting-com-cara-membuat-social-sharing-grafik-batangan-untuk-wordpress\/","title":{"rendered":"WordPress Hosting Indonesia – JaringanHosting.com :: Cara Membuat Social Sharing Grafik Batangan Untuk WordPress"},"content":{"rendered":"

Ketika kita mulai merancang atau melakukan sedikit perubahan pada situs WordPress<\/a> 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\u00a010 Tips Pro untuk Situs e-Commerce yang Ramah dan Menarik<\/a>. Di artikel berikut ini kami akan membagikan cara membuat Social Sharing dengan tampilan yang unik yaitu\u00a0Cara Membuat Social Sharing Grafik Batangan Untuk WordPress<\/strong><\/span><\/p>\n

\"Cloud<\/a><\/p>\n

Sebelum kita melanjutkan, mungkin Anda bertanya-tanya, “Bagaimana sih tampilan Social Sharing berbentuk batangan?”. Jika Anda penasaran maka akan kami tunjukkan contoh tampilan dari\u00a0Social Sharing berbentuk batangan.<\/p>\n

\"bar\"<\/a><\/p>\n

Begitulah tampilan dari\u00a0Social Sharing berbentuk batangan. Lalu apakah Anda tertarik untuk membuatnya untuk di stius WordPress<\/a> Anda? Berikut akan kami bagikan bagaimana cara membuat\u00a0Social Sharing berbentuk batangan.<\/p>\n

The Markup<\/strong><\/p>\n

Jika Anda ingin menambahkan grafik batangan yang ingin Anda buat\u00a0tepat di bawah judul, dalam file single.php di tema WordPress<\/a> Anda, tambahkan kode ini di suatu tempat di bawah the_title() atau ke\u00a0tempat dimana Anda ingin menampilkan grafik batangan ini.<\/p>\n

<div class=\"socialShare clearfix\">\r\n\t<div class=\"sharedCount\">\r\n\t\t<span class=\"count\"><\/span>\r\n\t\t<span class=\"shares\">shares<\/span>\r\n\t<\/div>\r\n\t<ul class=\"icons clearfix\">\r\n\t\t<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>\r\n\t\t<li class=\"icon google social\"><a href=\"https:\/\/plus.google.com\/share\" data-url=\"<?php echo get_permalink(); ?>\"><\/a><\/li>\r\n\t\t<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>\r\n\t\t<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>\r\n\t<\/ul>\r\n\t<script>parseSharedCount(\"<?php echo get_permalink(); ?>\");<\/script>\r\n<\/div><\/pre>\n
Pada baris ke 12, kami melewatkan\u00a0post URL ke fungsi parseSharedCount yang akan kita buat\u00a0pada\u00a0langkah selanjutnya.<\/p>\n
Mendapatkan Jumlah Shares<\/strong><\/p>\n
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<\/em>.<\/p>\n
Setelah Anda mendaftar dan menerima key<\/em>\u00a0Anda, buatlah\u00a0file baru dengan nama “sharedcount.js”. Kita akan menempatkan semua jQuery dalam file ini. Mulailah dengan menyisipkan kode ini:<\/p>\n
(function($){\r\n   sharedCount = function(url, fn) {\r\n      url = encodeURIComponent(url || location.href);\r\n      var domain = \"\/\/free.sharedcount.com\/\"; \/* SET DOMAIN *\/\r\n      var apikey = \"\" \/*API KEY HERE*\/\r\n      var arg = {\r\n\t     data: {\r\n                url : url,\r\n                apikey : apikey\r\n\t     },\r\n\t     url: domain,\r\n\t     cache: true,\r\n\t     dataType: \"json\"\r\n      };\r\n      if ('withCredentials' in new XMLHttpRequest) {\r\n\t     arg.success = fn;\r\n      }\r\n      else {\r\n\t     var cb = \"sc_\" + url.replace(\/\\W\/g, '');\r\n\t     window[cb] = fn;\r\n\t     arg.jsonpCallback = cb;\r\n\t     arg.dataType += \"p\";\r\n      }\r\n      return $.ajax(arg);\r\n};<\/pre>\n
Pada baris ke-5, tambahkan API key<\/em> Anda di antara tanda kutip. Fungsi ini yang berguna untuk melakukan komunikasi dengan SharedCount.com API, dan mengembalikan semua data yang kita butuhkan.<\/p>\n
Parse SharedCount Data<\/strong><\/p>\n
Sekarang kita akan membuat\u00a0fungsi 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:<\/p>\n
parseSharedCount = function(url) {\r\n   sharedCount(url, function(data){\r\n\tvar twitterCount = data.Twitter;\r\n\tvar facebookCount = data.Facebook.total_count;\r\n\tvar googleCount = data.GooglePlusOne;\r\n\tvar linkedinCount = data.LinkedIn;\r\n\tvar totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;\r\n\r\n\tvar offset = 25;\r\n\tvar twitterHeight = Math.ceil(twitterCount\/totalCount*100)+offset;\r\n\tvar facebookHeight = Math.ceil(facebookCount\/totalCount*100)+offset;\r\n\tvar googleHeight = Math.ceil(googleCount\/totalCount*100)+offset;\r\n\tvar linkedinHeight = Math.ceil(linkedinCount\/totalCount*100+offset);\r\n\r\n\t$(\".socialShare .count\").text(totalCount);\r\n\t$(\".socialShare .icon.twitter\").css('height',twitterHeight+'%');\r\n\t$(\".socialShare .icon.facebook\").css('height',facebookHeight+'%');\r\n\t$(\".socialShare .icon.google\").css('height',googleHeight+'%');\r\n\t$(\".socialShare .icon.linkedin\").css('height',linkedinHeight+'%');\r\n\t$(\".socialShare\").addClass('loaded');\r\n   });\t\r\n}\r\n})(jQuery);<\/pre>\n
Pada baris ke 3-7, kami menampilkan\u00a0hitungan individu untuk setiap situs sosial. Kemudian pada baris 9-13, persentase dihitung berdasarkan nilai-nilai. Nilai\u00a0“offset” digunakan untuk memastikan setiap bar memiliki beberapa ketinggian sehingga ikon dapat ditampilkan bahkan jika situs tertentu tidak memiliki shares\u00a0apapun. Akhirnya, pada baris 15-20, kita menetapkan total jumlah shares\u00a0teks dan menggunakan nilai-nilai persentase untuk mengatur ketinggian pada setiap bar. Menambahkan kelas “loaded<\/em>” ke div yang akan memulai animasi CSS.<\/p>\n
Membuat\u00a0Grafik Batangan Clickable<\/em><\/strong><\/p>\n
Di\u00a0akhir kode kita akan menambah file sharedcount.js dan akan membuat bar menjadi tombol. Sehingga bila diklik setiap bar akan terbuka masing-masing dan menampilkan\u00a0sosial sharing popup window.<\/p>\n
jQuery(document).ready(function( $ ) {\r\n$(\".social.icon a\").click(function(){\t\t\r\n\tvar url = $(this).attr('data-url');\r\n\tvar text = $(this).attr('data-text');\r\n\tvar href = $(this).attr('href');\r\n\t\t\r\n\tif($(this).parent().hasClass('twitter')){\r\n\t\t\twindow.open(href+\"?text=\"+text+\"&url=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}else if($(this).parent().hasClass('facebook')){\r\n\t\t\twindow.open(href+\"?t=\"+text+\"&u=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}else if($(this).parent().hasClass('google')){\r\n\t\t\twindow.open(href+\"?&url=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}else if($(this).parent().hasClass('linkedin')){\r\n\t\t\twindow.open(href+\"?mini=true&summary=\"+text+\"&url=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}\r\n\treturn false;\r\n});\r\n});<\/pre>\n
Berikut ini adalah segala sesuatu yang harus ada di dalam file sharedcount.js<\/p>\n
(function($){\r\n   sharedCount = function(url, fn) {\r\n      url = encodeURIComponent(url || location.href);\r\n      var domain = \"\/\/free.sharedcount.com\/\"; \/* SET DOMAIN *\/\r\n      var apikey = \"\" \/*API KEY HERE*\/\r\n      var arg = {\r\n\t     data: {\r\n                url : url,\r\n                apikey : apikey\r\n\t     },\r\n\t     url: domain,\r\n\t     cache: true,\r\n\t     dataType: \"json\"\r\n      };\r\n      if ('withCredentials' in new XMLHttpRequest) {\r\n\t     arg.success = fn;\r\n      }\r\n      else {\r\n\t     var cb = \"sc_\" + url.replace(\/\\W\/g, '');\r\n\t     window[cb] = fn;\r\n\t     arg.jsonpCallback = cb;\r\n\t     arg.dataType += \"p\";\r\n      }\r\n      return $.ajax(arg);\r\n};\r\n\r\nparseSharedCount = function(url) {\r\n   sharedCount(url, function(data){\r\n\tvar twitterCount = data.Twitter;\r\n\tvar facebookCount = data.Facebook.total_count;\r\n\tvar googleCount = data.GooglePlusOne;\r\n\tvar linkedinCount = data.LinkedIn;\r\n\tvar totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;\r\n\r\n\tvar offset = 25;\r\n\tvar twitterHeight = Math.ceil(twitterCount\/totalCount*100)+offset;\r\n\tvar facebookHeight = Math.ceil(facebookCount\/totalCount*100)+offset;\r\n\tvar googleHeight = Math.ceil(googleCount\/totalCount*100)+offset;\r\n\tvar linkedinHeight = Math.ceil(linkedinCount\/totalCount*100+offset);\r\n\r\n\t$(\".socialShare .count\").text(totalCount);\r\n\t$(\".socialShare .icon.twitter\").css('height',twitterHeight+'%');\r\n\t$(\".socialShare .icon.facebook\").css('height',facebookHeight+'%');\r\n\t$(\".socialShare .icon.google\").css('height',googleHeight+'%');\r\n\t$(\".socialShare .icon.linkedin\").css('height',linkedinHeight+'%');\r\n\t$(\".socialShare\").addClass('loaded');\r\n   });\t\r\n}\r\n})(jQuery);\r\n\r\njQuery(document).ready(function( $ ) {\r\n$(\".social.icon a\").click(function(){\t\t\r\n\tvar url = $(this).attr('data-url');\r\n\tvar text = $(this).attr('data-text');\r\n\tvar href = $(this).attr('href');\r\n\t\t\r\n\tif($(this).parent().hasClass('twitter')){\r\n\t\t\twindow.open(href+\"?text=\"+text+\"&url=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}else if($(this).parent().hasClass('facebook')){\r\n\t\t\twindow.open(href+\"?t=\"+text+\"&u=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}else if($(this).parent().hasClass('google')){\r\n\t\t\twindow.open(href+\"?&url=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}else if($(this).parent().hasClass('linkedin')){\r\n\t\t\twindow.open(href+\"?mini=true&summary=\"+text+\"&url=\"+url, \"\", \"height=400,width=600,toolbar=no,menubar=no,left=300,top=300\");\r\n\t}\r\n\treturn false;\r\n});\r\n});<\/pre>\n
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<\/em>.<\/p>\n
wp_enqueue_script('sharedcount', get_bloginfo('template_url').'\/js\/sharedcount.js', array('jquery'), '0.1', false);<\/pre>\n
File CSS<\/strong><\/p>\n
Untuk penampilan grafik batang, dengan tampilan datar yang bersih, sehingga cocok dengan\u00a0desain. Anda harus menambahkan CSS berikut ke file style.css di theme WordPress <\/a>Anda. Semua ini\u00a0file CSS yang cukup mendasar, tetapi penting untuk dicatat pada baris 84 dan 88 kita mendefinisikan kelas .loaded untuk mengaktifkan animasi setelah data telah loaded<\/em>.<\/p>\n
.socialShare {\t\r\n\tcolor: #fff;\r\n\tdisplay: block;\r\n\tmargin-bottom: 20px;\r\n\tpadding: 0;\t\r\n\theight: 73px;\r\n\tposition: relative;\r\n\tborder-bottom: 3px solid #d8d8d8;\r\n\twidth: 250px;\t\r\n}\r\n\r\n.socialShare .sharedCount{\r\n\tposition: relative;\r\n\tfont-size: .9em;\t\r\n\tdisplay: block;\r\n\tbox-shadow: none;\r\n\tmargin-top: 0;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tfloat: left;\r\n\topacity: 0;\r\n\tmargin-left: 5px;\t\r\n\t-webkit-transition: opacity 0.5s ease;\r\n\t-moz-transition: opacity 0.5s ease;\r\n\t-o-transition: opacity 0.5s ease;\r\n\ttransition: opacity 0.5s ease;\r\n\tbackground: none;\r\n\tcolor: #222222;\r\n\tborder: none;\r\n}\r\n\r\n.socialShare .sharedCount .count{\r\n\tfont-size: 1.9em;\r\n\tdisplay: block;\r\n\tcolor: #25bb8b;\r\n}\r\n\r\n.socialShare .sharedCount .shares{\r\n\tfont-size: 1.1em;\r\n\tdisplay: block;\r\n\tcolor: #b8b8b8;\r\n}\r\n\r\n.socialShare.loaded .sharedCount {\r\n\topacity: 1;\r\n}\r\n\r\n.socialShare .icons {\r\n\tmargin-bottom: 0;\r\n\tpositon: relative;\t\t\r\n}\r\n\r\n.socialShare .icon {\t\r\n\tdisplay: block;\t\r\n\tfont-size: 1.2em;\t\r\n\tfloat: left;\r\n\tmargin: 0 0 0 0;\r\n\tposition: absolute;\r\n\tbottom: 4px;\r\n\topacity: 0;\r\n\theight: 0px;\r\n\twidth: 30px;\r\n\t-webkit-transition: all 0.7s ease;\r\n\t-moz-transition: all 0.7s ease;\r\n\t-o-transition: all 0.7s ease;\r\n\ttransition: all 0.7s ease;\r\n\ttransition-delay: .7s;\r\n\t-webkit-transition-delay: .7s; \/* Safari *\/\t\t\r\n}\r\n\r\n.socialShare .icon a{\r\n\tcolor: rgba(255,255,255,.7);\t\r\n\tdisplay: block;\t\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground-size: 20px 20px;\r\n\t-webkit-transition: all 0.7s ease;\r\n\t-moz-transition: all 0.7s ease;\r\n\t-o-transition: all 0.7s ease;\r\n\ttransition: all 0.7s ease;\r\n\ttransition-delay: .7s;\t\r\n}\r\n\r\n.socialShare.loaded .icon {\r\n\topacity: 1;\t\r\n}\r\n\r\n.socialShare.loaded .icon a{\r\n\t-webkit-transition: all 0.7s ease;\r\n\t-moz-transition: all 0.7s ease;\r\n\t-o-transition: all 0.7s ease;\r\n\ttransition: all 0.7s ease;\r\n}\r\n\r\n.socialShare .icon a:hover{\r\n\tbackground-color: #222;\t\r\n}\r\n\r\n.socialShare .icon.twitter{\r\n\tbackground: #5ec2df url(images\/icon_twitter.png) center 5px no-repeat;\r\n\tleft: 90px;\t\r\n}\r\n.socialShare .icon.twitter a{\r\n\tbackground: #5ec2df url(images\/icon_twitter.png) center 5px no-repeat;\r\n}\r\n.socialShare .icon.google{\t\r\n\tleft: 125px;\r\n\t-webkit-transition-delay: .7s; \/* Safari *\/\t\r\n}\r\n.socialShare .icon.google a{\r\n\tbackground: #e03e12 url(images\/icon_google.png) center center no-repeat;\r\n}\r\n.socialShare .icon.facebook {\r\n\tleft: 160px;\r\n\t-webkit-transition-delay: .9s; \/* Safari *\/\t\r\n}\r\n.socialShare .icon.facebook a{\r\n\tbackground: #2c6087 url(images\/icon_facebook.png) center center no-repeat;\r\n}\r\n.socialShare .icon.linkedin {\r\n\tleft: 195px;\r\n\t-webkit-transition-delay: 1.2s; \/* Safari *\/\t\r\n}\r\n\r\n.socialShare .icon.linkedin a{\r\n\tbackground: #3686ab url(images\/icon_linkedin.png) center center no-repeat;\t\r\n}<\/pre>\n
Jika Anda menginginkan sebuah ikon yang unik yang pas untuk social sharing grafik batangan, Anda bisa men-downloadnya disini<\/a><\/p>\n
Kami mendorong Anda untuk men-tweak itu dan mulai membuatnya sendiri. Seperti yang Anda perhatikan, kami hanya\u00a0memasukkan\u00a0empat situs sosial di artikel ini\u00a0seperti, twitter, Google+, Facebook dan Linkedin. Tetapi SharedCount menyediakan data yang lebih\u00a0banyak lagi. Jadi, Anda akan dapat menambahkan stius sosial lebih banyak lagi\u00a0yang penting bagi Anda.<\/p>\n
Sekarang Anda sudah bisa memulai membuat sosial sharing yang unik untuk stius WordPress<\/a> Anda. Anda dapat mempelajari artikel\u00a0Cara Membuat Social Sharing Grafik Batangan Untuk WordPress<\/strong><\/span> dan kemudian mulai mempraktekkannya. Semoga bermanfaat<\/p>\n","protected":false},"excerpt":{"rendered":"
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<\/p>\n","protected":false},"author":4710,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/1686"}],"collection":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/users\/4710"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/comments?post=1686"}],"version-history":[{"count":0,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/1686\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/media?parent=1686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/categories?post=1686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/tags?post=1686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}