Facebook, Twitter, Google Plus and More Share Button Valid HTML 5

Minggu, 27 April 2014

Laba-Laba Blog - Facebook, Twitter dan Google Plus sangat berperan penting dalam dunia website, karena Facebook, Twitter serta Google Plus dapat me-share artikel-artikel yang telah kita publikasikan ke jejaring sosial tersebut. Tidak heran bila banyak website yang setiap artikelnya memasang Facebook, Twitter dan Google Plus karena itu tadi. Banyak sekali website-website yang terkenal gara-gara jejaring sosial.

Artikel yang sedang kami bahas ini sebelumnya sudah dibahas oleh Kang Ismet dan juga Kang Adhy. Sebenarnya memasang widget ini di blogger sangatlah mudah serta simpel karena kode CSSnya sudah dirubah atau dimodifikasi oleh Kang Adhy serta sudah ditambahkan sebuah asynchronous sehingga tampilannya lebih menarik dan lebih keren tentunya.

Berikut ikutilah langkah-langkah dibawah ini.

1.Simpan kode CSS di bawah ini, di atas kode ]]></b:skin> atau </style>.

.share-box{border-top:2px solid #bbb;border-bottom:1px solid #ccc;font-size:16px;padding:10px 0 11px;position:relative;margin:25px 20px}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:2px 6px;margin-top:-4px}
a.more:hover{background:#0f6bc9;}

2. Kemudian, pastikan kode JavaScript SDK Facebook sudah terpasang di blog anda seperti berikut ini:

<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.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

3. Pastikan juga kode JavaScript Facebook sudah dipasang asynchronous seperti ini js.async=true; jika belum, silahkan pasang seperti kode di atas.

4. Silahkan copy kode HTML di bawah ini di daerah bawah postingan anda.

<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>
<span style='float:left;margin-top:-2px;margin-right:30px;font-size:18px;font-family: Oswald;color:#666;text-transform:uppercase'>Share this article :</span>
<div style='margin-right:30px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span>
</div>
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>✚</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</b:if>

5. Jika blog anda terpasang kode </body> (di paling bawah), maka agar tombol Google Plusnya muncul, silahkan pasang JavaScriptnya di bawah ini dan simpan di atasnya.

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

Jika ternyata kode JavaScript di atas sudah ada di blog anda, maka silahkan lewati langkah ini