Simple Share Button untuk Blogspot

Simple, sebenernya share button yang simple ini pengen buat tanpa melibatkan js Widget dari social masing2, saya rasa cukup ringan dan tampilannya pun lumayan

Apa yg dibutuhkan :

1. Font Awesome yang akan digunakan untuk icon
Load fontawesome di head blogger kamu

Code:

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

2. CSS button , diambil berdasar dari ini - https://github.com/necolas/css3-github-buttons

Spoiler

Code:

.share-buttons, a.share-buttons {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0 #fff;
font:11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -ms-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-moz-background-clip: padding; /* for Firefox 3.6 */
background-clip: padding-box;
border-radius: 0.2em;
/* IE hacks */
zoom: 1;
*display: inline;
}

.share-buttons:hover,
.share-buttons:focus,
.share-buttons:active,
.share-buttons.active {
border-color: #3072b3;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
color: #fff;
background-color: #3c8dde;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
background-image: -moz-linear-gradient(#599bdc, #3072b3);
background-image: -o-linear-gradient(#599bdc, #3072b3);
background-image: linear-gradient(#599bdc, #3072b3);
}

.share-buttons:active,
.share-buttons.active {
border-color: #2a65a0;
border-bottom-color: #3884cd;
background-color: #3072b3;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
background-image: -moz-linear-gradient(#3072b3, #599bdc);
background-image: -ms-linear-gradient(#3072b3, #599bdc);
background-image: -o-linear-gradient(#3072b3, #599bdc);
background-image: linear-gradient(#3072b3, #599bdc);
}

/* overrides extra padding on button elements in Firefox */
.share-buttons::-moz-focus-inner {
padding: 0;
border: 0;
}
/* Red Share Buttons
   ========================================================================== */

.share-buttons.red {
color: #333;
}

.share-buttons.red:hover,
.share-buttons.red:focus,
.share-buttons.red:active {
border-color: #b53f3a;
border-bottom-color: #a0302a;
color: #fff;
background-color: #dc5f59;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
background-image: -moz-linear-gradient(#dc5f59, #b33630);
background-image: -ms-linear-gradient(#dc5f59, #b33630);
background-image: -o-linear-gradient(#dc5f59, #b33630);
background-image: linear-gradient(#dc5f59, #b33630);
}

.share-buttons.red:active,
.share-buttons.red.active {
border-color: #a0302a;
border-bottom-color: #bf4843;
background-color: #b33630;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
background-image: -moz-linear-gradient(#b33630, #dc5f59);
background-image: -ms-linear-gradient(#b33630, #dc5f59);
background-image: -o-linear-gradient(#b33630, #dc5f59);
background-image: linear-gradient(#b33630, #dc5f59);
}

/* BLT Share Buttons
   ========================================================================== */

.share-buttons.blt {
color: #333;
}

.share-buttons.blt:hover,
.share-buttons.blt:focus,
.share-buttons.blt:active {
border-color: #3a91b3;
border-bottom-color: #257796;
color: #fff;
background-color: #00ABED;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#05a3e0), to(#0299d3));
background-image: -moz-linear-gradient(#05a3e0, #0299d3);
background-image: -ms-linear-gradient(#05a3e0, #0299d3);
background-image: -o-linear-gradient(#05a3e0, #0299d3);
background-image: linear-gradient(#05a3e0, #0299d3);
}
.share-buttons.blt:active,
.share-buttons.blt.active {
border-color: #3a91b3;
border-bottom-color: #257796;
background-color: #00ABED;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00ABED), to(#05a7e6));
background-image: -moz-linear-gradient(#00ABED, #05a7e6);
background-image: -ms-linear-gradient(#00ABED, #05a7e6);
background-image: -o-linear-gradient(#00ABED, #05a7e6);
background-image: linear-gradient(#00ABED, #05a7e6);
}

3. Yang terakhir tinggal pasang code nya tepatnya didalam blog1 (biasanya) yang bernama shareButtons

Code:

<div style='height: 28px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/>  
                      <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a>
                      <a class='share-buttons' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a>
                      <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a>
          </div>

Hasil :

Spoiler

Sedikit demo di blog saya yang kurang terpakai ini http://dblogskies.blogspot.com/

Saya buat ini sebenernya sambil menunggu mastah membuatkan Count Share nya . Silahkan mencoba semoga bermanfaat dan Goodluck !

Updates : Karena di blog Danlogs sudah ada cara menghitung count untuk sharing button, ada baiknya dibaca dahulu artikelnya.

Nah sekarang saya mempersiapkan css untuk count nya :

Spoiler

Code:

a.share-buttons span {
background: #477FEF;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: inline-block;
font-size: 12px;
margin: -21px 0 0 -15px;
min-width: 14px;
padding: 4px 8px;
position: absolute;
text-align: center;
text-shadow: 0px 0px 0 #fff;
}

Lalu Update untuk count, tempatnya masih sama seperti cara di atas , Jadi untuk menghindari hasil count yang berbenturan dengan ID post terutama di home yg ada lebih dari 1 postingan maka saya akan pasang di homepage dan static page tanpa count,berikut codenya :

Code:

<b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
    <div style='height: 28px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/>  
      <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a>
      <a class='share-buttons' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a>
      <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a>
    </div>
  </b:if>
</b:if>

Dan untuk tampilkan count di halaman postingan tambahkan tepat dibawahnya :

Spoiler

Code:

<b:if cond='data:blog.pageType == "item"'> 
  <div style='height: 28px;margin-top: 15px;'><i class='icon-share icon-1x' style='padding-right: 5px;'/>  
    <a class='share-buttons blt' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + " " + data:post.canonicalUrl + ""' id='twshared' target='_blank' title='Share on Twitter'><i class='icon-twitter'/> Twitter</a>
    <a class='share-buttons bfb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.canonicalUrl + ""' id='fbshared' target='_blank' title='Share on Facebook'><i class='icon-facebook'/> Facebook</a>
    <a class='share-buttons red' expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl + ""' target='_blank' title='Share on Google+'><i class='icon-google-plus'/> Google+</a>
  </div>
<script type='text/javascript'>
  var share_url = '<data:post.canonicalUrl/>';
  $.getJSON('http://graph.facebook.com/'+ share_url, function(fb) {
    if (fb.shares != null) {
      $('#fbshared').append('<span>' + fb.shares + '</span>');
    }
    else {
      $('#fbshared').append('<span>0</span>');
    }
  });
  $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+ share_url + '&callback=?', function(tw) {
    $('#twshared').append('<span>' + tw.count + '</span>');
  });
</script>
</b:if>

Demo bisa disini http://dblogskies.blogspot.com/2013/08/hanya-test-media-dan-video.html
Sangat disayang kan sampai saat ini saya belum menemukan Google+ menyediakan api Json untuk data count share nya

Update 2 : css bentrok dengan a:link untuk warnanya, sy update cssnya

Code:

.share-buttons, a.share-buttons {

 

simple tapi keren juga sih

simple tapi keren juga sih Share Buttonnya, pengen nerapin ke blogspot saya tapi templatenya blm ada yang cocok nih

 

Keren euy.boleh dicoba neh.

Keren euy.boleh dicoba neh.. nuhun gan

 

ternyata sudah jadi, judul

ternyata sudah jadi, judul blognya juga di samping, kenapa gak jadi di bawah ?

 

Barusan Update post karena

Barusan Update post karena sudah ada count nya

 

terlalu jos nih share

terlalu jos nih share buttonya

 

Bookmark dulu,

kebetulan udah ada tombol share, hehehe