Cara Memasang Tombol Share Media Umum Di Bawah Posting Blog
Selasa, 28 Juli 2015
Edit
TOMBOL bagi ke media umum (social share button) yaitu widget atau fitur yang dipasang di bawah posting blog untuk memudahkan kita dan pengunjung membagikan goresan pena ke media sosial.
Widget ini menciptakan blog atau website menjadi ramah pengguna, juga mendukung pengoptimalan mesin pencari (SEO) yang dikenal dengan Social Media Optimization (SMO).
Tersebarnya postingan atau goresan pena web/blog di media umum akan makin meningkatkan popularitas dan peringkat di halaman hasil pencarian (SERP).
Tombol share media umum di bawah ini dapat dibilang lengkap alasannya yaitu mencakup media umum terpopuler ketika ini -- Facebook, Twitter, Google+, Pinterest, LinkedIn, plus WhatsApp (WA).
Live Demo dapat Anda lihat di bab bawah posting ini, dapat sekalian ngetes.
Template bawaan blogger sudah menyediakan widget media umum share ini dengan tampilan standar nan "kurang keren".
Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog
1. Klik "Template" > "Edit HTML"2. Copy & Paste instruksi di bawah ini di atas instruksi <div id='related-posts'> atau di bawah <data:post.body/> yang kedua atau ketiga.
<!-- Scripts Start -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<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.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<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>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</b:if>
<!-- Scripts End -->
<div class='horizontal-social-buttons' style='padding:5px;margin:5px'>
<!-- Twitter -->
<div style='float:left;margin-right:5px'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 18px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
<!-- Pinterest End --><div style='float:left;margin-left:7px'>
<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="//yourjavascript.com/09010225501/whatsappblogger.js";h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
<!-- Whatsapp Share Buttons End -->
</div>
<div style='float:left;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='BUTTON-TYPE' expr:data-url='data:post.url' type='in/share'/>
</div>
</div>
<div class='clear'/>
</b:if>
<!-- Scripts End -->
3. Save Template!
Kini Tombol Share Media Sosial --Facebook, Twitter, Google+, Pinterest, LinkedIn, plus WhatsApp (WA)-- sudah terpasang di Bawah Posting Blog Anda.
Selain dengan memakai instruksi di atas, Anda juga dapat gunakan instruksi social share button dari AddThis. Wasalam. (http://).*